Live-update stamp preview as user types

This commit is contained in:
Skylar Ittner 2021-07-02 01:10:45 -06:00
parent 5d7cf78484
commit 533f5b5e26
3 changed files with 29 additions and 7 deletions

View File

@ -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>

View File

@ -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");

View File

@ -122,3 +122,15 @@ function trimAndShrinkSVG(svgstring) {
div.innerHTML = "";
return svg.outerHTML;
}
$("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));
});
});