3 lines
3.3 KiB
JavaScript
3 lines
3.3 KiB
JavaScript
var NRF_Signature_Item=function(){function t(t){this.wrapper=t,this.canvas=this.wrapper.querySelector("canvas"),this.signaturePad=new SignaturePad(this.canvas,{backgroundColor:"transparent",penColor:this.canvas.dataset.penColor}),this.input=this.wrapper.querySelector('input[type="hidden"]'),this.clearButton=this.wrapper.querySelector(".nrf-signature-clear"),this.resetButton=this.wrapper.querySelector(".nrf-signature-reset"),this.wrapper.signature=this}var e=t.prototype;return e.init=function(){this.onCanvasUpdateRatio(),this.setValue(),this.initEvents()},e.initEvents=function(){var n=this,i=this.canvas,a=this.wrapper,e=(this.signaturePad.addEventListener("afterUpdateStroke",function(){a.classList.add("painted")}),this.signaturePad.addEventListener("endStroke",function(t){var e=n.removeBlanks(i),e=n.updateCanvasColor(e,"#000");i.nextElementSibling.value=e.toDataURL(),a.classList.add("painted")}),this.resetButton.addEventListener("click",function(t){this.resetSignature(t)}.bind(this)),this.clearButton.addEventListener("click",function(t){this.clearSignature(t)}.bind(this)),window.innerWidth);window.addEventListener("resize",this.debounce(function(){var t;window.innerWidth!=e&&((t=this.wrapper.querySelector('input[type="hidden"]').value)&&this.signaturePad.fromDataURL(t),this.onCanvasUpdateRatio(),e=window.innerWidth)}.bind(this)))},e.updateCanvasColor=function(t,e){var n=t.getContext("2d");return n.save(),n.globalCompositeOperation="source-atop",n.fillStyle=e,n.fillRect(0,0,t.width,t.height),n.restore(),t},e.removeBlanks=function(t){for(var e=t.getContext("2d"),n=t.width,i=t.height,a=e.getImageData(0,0,n,i),r=n+1,s=-1,o=i+1,u=-1,c=0,d=0,d=0;d<i;d++)for(c=0;c<n;c++)0<a.data[3+4*(d*n+c)]&&(c<r&&(r=c),s<c&&(s=c),d<o&&(o=d),u<d)&&(u=d);var h,l,t=s-r,p=u-o;return t<=0||p<=0?null:(e=e.getImageData(r,o,t,p),l=(h=document.createElement("canvas")).getContext("2d"),h.width=t,h.height=p,l.putImageData(e,0,0),h)},e.clearSignature=function(t){t.target.closest(".nrf-signature-clear")&&this.clear()},e.resetSignature=function(t){t.target.closest(".nrf-signature-reset")&&(this.clear(),this.reset())},e.debounce=function(e){var n;return function(t){n&&clearTimeout(n),n=setTimeout(e,100,t)}},e.onCanvasUpdateRatio=function(){var t=Math.max(window.devicePixelRatio||1,1);this.canvas.width=this.canvas.offsetWidth*t,this.canvas.height=this.canvas.offsetHeight*t,this.canvas.getContext("2d").scale(t,t),this.signaturePad.clear()},e.setValue=function(t){""!=(t=""!=(t=void 0===t?"":t)?t:this.input.value)&&(this.signaturePad.fromDataURL(t),this.wrapper.classList.add("painted"))},e.clear=function(){this.wrapper.classList.remove("painted"),this.signaturePad.clear(),this.input.value=""},e.reset=function(){var t=this.wrapper.querySelector(".initial-value").value;this.setValue(t)},t}(),NRF_Signature_Loader=function(){function t(){this.init()}return t.prototype.init=function(){var e;window.IntersectionObserver&&(e=new IntersectionObserver(function(t,e){t.forEach(function(t){t.isIntersecting&&(new NRF_Signature_Item(t.target).init(),e.unobserve(t.target))})},{rootMargin:"0px 0px 0px 0px"}),document.querySelectorAll(".nrf-widget.signature").forEach(function(t){e.observe(t)}))},t}();"loading"!=document.readyState?new NRF_Signature_Loader:document.addEventListener("DOMContentLoaded",function(){new NRF_Signature_Loader});
|
|
|