From 533f5b5e26baa52a666c4e373ca99f40e3dd533a Mon Sep 17 00:00:00 2001
From: Skylar Ittner <skylar@netsyms.com>
Date: Fri, 2 Jul 2021 01:10:45 -0600
Subject: [PATCH] Live-update stamp preview as user types

---
 index.html      |  2 +-
 js/drawtools.js | 20 +++++++++++++++-----
 js/main.js      | 14 +++++++++++++-
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 9565074..0d6bc73 100644
--- a/index.html
+++ b/index.html
@@ -67,7 +67,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-primary" onclick="saveSettingsModal()">Save</button>
+                <button type="button" class="btn btn-primary" onclick="saveSettingsModal()"><i class="fas fa-save"></i> Save Settings</button>
             </div>
         </div>
     </div>
diff --git a/js/drawtools.js b/js/drawtools.js
index f2c7be7..7c51332 100644
--- a/js/drawtools.js
+++ b/js/drawtools.js
@@ -10,12 +10,22 @@ var signaturePadCallback = function () {};
 var clientSignatureSvg = "";
 
 function getStampSvg(callback) {
-    $.get("templates/stamps/" + getStorage("notary_state") + ".svg", {}, function (data) {
+    getStampSvgWithValues({
+        name: getStorage("notary_name"),
+        location: getStorage("notary_location"),
+        expires: getStorage("notary_expires"),
+        idnumber: getStorage("notary_idnumber"),
+        state: getStorage("notary_state")
+    }, callback);
+}
+
+function getStampSvgWithValues(values, callback) {
+    $.get("templates/stamps/" + values.state + ".svg", {}, function (data) {
         data = data + "";
-        data = data.replaceAll("[[[NAME]]]", getStorage("notary_name"));
-        data = data.replaceAll("[[[LOCATION]]]", getStorage("notary_location"));
-        data = data.replaceAll("[[[EXPIRES]]]", getStorage("notary_expires"));
-        data = data.replaceAll("[[[IDNUMBER]]]", getStorage("notary_idnumber"));
+        data = data.replaceAll("[[[NAME]]]", values.name);
+        data = data.replaceAll("[[[LOCATION]]]", values.location);
+        data = data.replaceAll("[[[EXPIRES]]]", values.expires);
+        data = data.replaceAll("[[[IDNUMBER]]]", values.idnumber);
 
         callback(data);
     }, "text");
diff --git a/js/main.js b/js/main.js
index e111d7f..68bb0de 100644
--- a/js/main.js
+++ b/js/main.js
@@ -121,4 +121,16 @@ function trimAndShrinkSVG(svgstring) {
     //console.log(svg.outerHTML);
     div.innerHTML = "";
     return svg.outerHTML;
-}
\ No newline at end of file
+}
+
+$("body").on("input change paste", "#settingsModal input", function () {
+    getStampSvgWithValues({
+        name: $("#settingsModal #notary_name").val(),
+        location: $("#settingsModal #notary_location").val(),
+        expires: $("#settingsModal #notary_expires").val(),
+        idnumber: $("#settingsModal #notary_idnumber").val(),
+        state: $("#settingsModal #notary_state option:selected").val()
+    }, function (svg) {
+        $("#settingsModal #stamp-preview").attr("src", "data:image/svg+xml;base64," + btoa(svg));
+    });
+});
\ No newline at end of file