@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
3 lines (2 loc) • 13.5 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("kendo.core.js"),require("kendo.drawing.js"),require("kendo.dialog.js"),require("kendo.html.button.js")):"function"==typeof define&&define.amd?define(["exports","kendo.core.min","kendo.drawing","kendo.dialog","kendo.html.button"],e):e(((t="undefined"!=typeof globalThis?globalThis:t||self).kendo=t.kendo||{},t.kendo._globals=t.kendo._globals||{},t.kendo._globals.Signature={}))}(this,(function(t){window.kendo=window.kendo||{},window.kendo.inputs=window.kendo.inputs||{},function(t,e){var i=e.util,o=i.elementOffset,n=i.limitValue,s=kendo.geometry.Point,a=kendo.geometry.Rect,r=kendo.geometry.transform,l=function(){},d=function(){function t(t,e){void 0===e&&(e={}),this.element=t,this.lastMoveTime=0,this.options=Object.assign({scale:1,precision:1,samplingRate:200,smooth:!1!==e.smooth,color:e.color||"#000",backgroundColor:e.backgroundColor||"#fff",strokeWidth:1,onChange:l,onDraw:l,onDrawEnd:l},e),this.pathOptions={stroke:{color:this.options.color,width:this.options.strokeWidth,lineCap:"round",lineJoin:"round"}},this.initSurface(),this.attachEvents()}return t.prototype.destroy=function(){this.detachEvents()},t.prototype.clear=function(){this.rootGroup.clear(),this.path=null},Object.defineProperty(t.prototype,"isDrawing",{get:function(){return Boolean(this.points)},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"pathData",{get:function(){var t;return null===(t=this.path)||void 0===t?void 0:t.toString(3)},set:function(t){this.clear(),this.path=e.MultiPath.parse(t,this.pathOptions),this.rootGroup.append(this.path)},enumerable:!1,configurable:!0}),t.prototype.loadImage=function(t,i){if(void 0===i&&(i=[]),t){var o=this.size,n=o[0],s=o[1],a=n/this.options.scale,l=s/this.options.scale,d=i[0]||6*a,h=i[1]||6*l,p=a/d,u=l/h,c=Math.min(p,u),g=new e.Image(t,new kendo.geometry.Rect([0,0],[d,h]));g.transform(r().scale(c,c)),this.clear(),this.rootGroup.append(g)}else this.clear()},t.prototype.exportImage=function(t){var i,o=this.size,n=o[0],s=o[1],l=n/this.options.scale,d=s/this.options.scale,h=(null==t?void 0:t.width)||6*l,p=(null==t?void 0:t.height)||6*d,u=h/l,c=p/d,g=Math.min(u,c),m=new a([0,0],[h,p]),f=new e.Group({clip:e.Path.fromRect(m)}),_=new e.Group({transform:r().scale(g,g)}),k=e.Path.fromRect(m,{fill:{color:this.options.backgroundColor}});return f.append(k),f.append(_),(i=_.children).push.apply(i,this.rootGroup.children),e.exportImage(f,Object.assign({width:h,height:p},t))},t.prototype.resize=function(){this.surface.resize(!0)},t.prototype.setOptions=function(t){Object.assign(this.options,t),this.pathOptions.stroke.color=this.options.color,this.pathOptions.stroke.width=this.options.strokeWidth,this.path&&(this.path.options.set("stroke.color",this.options.color),this.path.options.set("stroke.width",this.options.strokeWidth)),this.background.options.set("fill.color",this.options.backgroundColor)},t.prototype.initSurface=function(){this.surface=e.Surface.create(this.element,{type:"canvas"}),this.element.style.touchAction="none";var t=this.options.scale;this.rootGroup=new e.Group({transform:r().scale(t,t)});var i=this.element.offsetWidth||750,o=this.element.offsetHeight||250;this.size=[i,o],this.background=e.Path.fromRect(new a([0,0],this.size),{fill:{color:this.options.backgroundColor}}),this.surface.draw(this.background),this.surface.draw(this.rootGroup)},t.prototype.attachEvents=function(){this.onPointerDown=this.onPointerDown.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),this.element.addEventListener("pointerdown",this.onPointerDown),this.element.addEventListener("pointermove",this.onPointerMove),this.element.addEventListener("pointerup",this.onPointerUp)},t.prototype.detachEvents=function(){this.element.removeEventListener("pointerdown",this.onPointerDown),this.element.removeEventListener("pointermove",this.onPointerMove),this.element.removeEventListener("pointerup",this.onPointerUp)},t.prototype.touchPoint=function(t){var e=o(this.element),i=t.pageX,n=t.pageY,a=1/this.options.scale;return new s(i-e.left,n-e.top).scale(a,a)},t.prototype.onPointerDown=function(t){if(!this.options.readonly&&t.isPrimary&&function(t){return"number"!=typeof t.button||0===t.button}(t)){this.path||(this.path=new e.MultiPath(this.pathOptions),this.rootGroup.append(this.path)),this.options.onDraw(),this.element.setPointerCapture(t.pointerId);var i=this.touchPoint(t);this.points=[i],this.path.moveTo(i)}},t.prototype.onPointerMove=function(t){if(this.points&&t.isPrimary){var e=(new Date).getTime();if(!(e-this.lastMoveTime<1e3/n(this.options.samplingRate,1,1e4))){this.lastMoveTime=e;var i=this.touchPoint(t),o=this.points[this.points.length-1],s=1/n(this.options.precision,.01,100);i.distanceTo(o)<s||(this.points.push(i),this.path.lineTo(i))}}},t.prototype.onPointerUp=function(t){if(t.isPrimary&&this.path&&this.points&&!this.options.readonly){if(this.options.smooth){var i=e.Path.curveFromPoints(this.points);this.path.paths.splice(this.path.paths.length-1,1,i)}this.points=null,this.options.onDrawEnd(),this.options.onChange(this.pathData)}},t}();t.SignaturePad=d}(window.kendo.inputs.common=window.kendo.inputs.common||{},window.kendo.drawing);!function(t){var e=window.kendo,i=e.ui.Widget,o=e.ui.Dialog,n=e.html,s=e._outerWidth,a=e._outerHeight,r=e.inputs.common.SignaturePad,l=".kendoSignature",d="change",h="open",p="close",u="click",c=i.extend({init:function(t,e){var o=this;e=e||{},i.fn.init.call(o,t,e),o._createElements(o.element,o.options.maximizable?"maxi":"",!1,1),o._createInput(),o.wrapper=o.element,o.options.backgroundColor||(o.options.backgroundColor=getComputedStyle(o.element[0]).backgroundColor||"#ffffff"),o._createPad(),o._createDialogPad(),o._attachHandlers(),o._assignLabel(),o.options.value&&(o._pad.loadImage(o.options.value),o._dialogPad.loadImage(o.options.value)),o.options.readonly&&o.readonly(),o.options.enable||o.enable(!1)},options:{name:"Signature",color:"#000000",enable:!0,fillMode:"solid",hideLine:!1,label:"",maximizable:!0,popupScale:3,readonly:!1,rounded:"medium",size:"medium",smooth:!1,strokeWidth:1,exportScale:2,value:""},events:[d,h,p],setOptions:function(i){var o,n=this.options,s=e.getValidCssClass("k-button-","size",n.size),a=this.element.add(this._dialogPadEl).find("."+s),r=t(this._pad.element).add(this._dialogPad.element);a.removeClass(s),this._clearCssClasses(n),this.element.removeClass(e.getValidCssClass("k-signature-","size",n.size)),e.deepExtend(n,i),this.options=n,this.element.width(n.width),this.element.height(n.height),this._dialogPadEl.width(n.width*n.popupScale),this._dialogPadEl.height(n.height*n.popupScale),o=this._pad.path,this._destroyPad(),this._destroyDialog(),this._createPad(),this._createDialogPad(),function(t,i){if(!i||!i.paths||!i.paths.length)return;t.path=new e.drawing.MultiPath(t.pathOptions),t.rootGroup.append(t.path);for(var o=0;o<i.paths.length;o++)t.path.paths.push(i.paths[o]);t.options.onChange()}(this._pad,o),this.enable(n.enable),this.readonly(n.readonly),this._hideLine(this.element),this._hideLine(this._dialogPadEl),this._applyCssClasses(this.element),this.element.find(".k-signature-maximize").toggle(n.maximizable),this.element.removeClass(e.getValidCssClass("k-input-","size",this.options.size)),this.element.addClass(e.getValidCssClass("k-signature-","size",this.options.size)),a.addClass(e.getValidCssClass("k-button-","size",n.size)),r.removeAttr("aria-label"),this._assignLabel()},close:function(){this._dialog&&this._dialog.close()},open:function(){this.options.maximizable&&this._dialog&&this._dialog.open()},destroy:function(){var t=this;t._destroyPad(),t._destroyDialog(),t.element.off(l),t.element.empty(),i.fn.destroy.call(t)},enable:function(t){(t=!1!==t)||this._dialog.close(),this.element.find(".k-button").toggle(t),this.element.toggleClass("k-disabled",!t),this._pad.options.readonly=!t,this._dialogPad.options.readonly=!t},readonly:function(e){var i=this;e=!1!==e;i._pad.options.readonly=e,i._dialogPad.options.readonly=e,i.element.find(".k-signature-clear").length||e||(t(n.renderButton('<button class="k-signature-action k-signature-clear"></button>',{icon:"x",size:this.options.size,fillMode:"flat"})).insertAfter(i.element.find(".k-signature-actions-bottom")),t(n.renderButton('<button class="k-signature-action k-signature-clear"></button>',{icon:"x",size:this.options.size,fillMode:"flat"})).insertAfter(i._dialogEl.find(".k-signature-actions-bottom"))),i.element.find(".k-signature-clear").toggle(!e),i._dialogEl.find(".k-signature-clear").toggle(!e)},value:function(t){return undefined!==t&&(this._value=t,this._input.val(t),this._pad.loadImage(t)),this._value},reset:function(){this._dialogPad.clear(),this._pad.clear(),this._value=""},_assignLabel:function(){var e=t(this._pad.element).add(this._dialogPad.element);this.options.label?e.attr("aria-label",this.options.label):this._ariaLabel(e),this.element.removeAttr("aria-labelledby")},_attachHandlers:function(){var t=this;t.element.on(u+l,".k-signature-clear",(function(){t.reset()})).on(u+l,".k-signature-maximize",(function(){t._dialog.open(),t._dialog.wrapper.find(".k-signature-minimize").trigger("focus")}))},_createInput:function(){var e=this,i=e.element.attr("name"),o=e.element.attr("autocomplete"),n=e.element.attr("required");e._input=t("<input class='k-hidden' aria-hidden='true'/>").appendTo(e.element),i&&(e._input.attr("name",i),e.element.removeAttr("name")),o&&(e._input.attr("autocomplete",o),e.element.removeAttr("autocomplete")),n&&(e._input.attr("required",n),e.element.removeAttr("required"))},_destroyPad:function(){this._pad&&(e.destroy(this.element.find(".k-signature-canvas")),this._pad=null,this.element.find(".k-signature-canvas").empty())},_destroyDialog:function(){this._dialogPad&&(this._dialogPad.destroy(),this._dialogPad=null,this._dialogEl.off(l),this._dialog.destroy(),this._dialog=null,this._dialogEl.remove(),this._dialogEl=null)},_hideLine:function(e){var i=e.find(".k-signature-line");this.options.hideLine||i.length||t("<div class='k-signature-line'>").appendTo(e),this.options.hideLine&&i.remove()},_createElements:function(i,o,s,a){t("<div class='k-signature-canvas' role='img' tabindex='0'>").appendTo(i),this._hideLine(i),t("<div class='k-signature-actions k-signature-actions-top'></div>").appendTo(i),"mini"==o&&t(n.renderButton('<button class="k-signature-action k-signature-minimize k-rotate-180" aria-label="Minimize signature"></button>',{icon:"hyperlink-open",size:this.options.size,fillMode:"flat"})).appendTo(i.find(".k-signature-actions-top")),"maxi"==o&&t(n.renderButton('<button class="k-signature-action k-signature-maximize" aria-label="Maximize signature"></button>',{icon:"hyperlink-open",size:this.options.size,fillMode:"flat"})).appendTo(i.find(".k-signature-actions-top")),t("<div class='k-signature-actions k-signature-actions-bottom'></div>").appendTo(i),this.options.readonly||t(n.renderButton('<button class="k-signature-action k-signature-clear" aria-label="Clear signature"></button>',{icon:"x",size:this.options.size,fillMode:"flat"})).appendTo(i.find(".k-signature-actions-bottom")),i.addClass("k-input k-signature"),i.width(this.options.width*a),i.height(this.options.height*a),s&&i.addClass("k-signature-maximized"),this._applyCssClasses(i),i.removeClass(e.getValidCssClass("k-input-","size",this.options.size)),i.addClass(e.getValidCssClass("k-signature-","size",this.options.size))},_createPad:function(){var e=this,i=t.extend(!0,{},e.options,{onChange:function(){var t=s(e.element,!1),i=a(e.element,!1);e._pad.exportImage({width:t*e.options.exportScale,height:i*e.options.exportScale}).then((function(t){e._value=t,e._input.val(t),e.trigger(d)})),e._pad.exportImage({width:t*e.options.exportScale*e.options.popupScale,height:i*e.options.exportScale*e.options.popupScale}).then((function(t){e._dialogPad.loadImage(t)}))},onDraw:function(){e.element.find(".k-button").hide()},onDrawEnd:function(){e.element.find(".k-button").show()}});e._pad=new r(e.element.find(".k-signature-canvas")[0],i)},_createDialogPad:function(){var i,n=this;n._dialogEl=t("<div>").appendTo(n.element),n._dialog=new o(n._dialogEl,{title:!1,closable:!1,open:function(){n.trigger(h)},close:function(){n.trigger(p)}}),n._dialogEl.removeAttr("tabindex").on("keydown",(function(t){t.keyCode===e.keys.ESC&&n._dialog.close()})),n._dialogPadEl=t("<div>").appendTo(n._dialog.element),n._createElements(n._dialogPadEl,"mini",!0,this.options.popupScale),i=n._dialogPadEl.find(".k-signature-canvas")[0],n._dialogPad=new r(i,t.extend(!0,{},n.options,{scale:n.options.popupScale,onChange:function(){var t=s(n.element,!1),e=a(n.element,!1);n._dialogPad.exportImage({width:t*n.options.exportScale,height:e*n.options.exportScale}).then((function(t){n._pad.loadImage(t),n._value=t,n._input.val(t),n.trigger(d)}))},onDraw:function(){n._dialogEl.find(".k-button").hide()},onDrawEnd:function(){n._dialogEl.find(".k-button").show()}})),n._dialog.close(),n._dialogEl.on(u+l,".k-signature-clear",(function(){n.reset()})).on(u+l,".k-signature-minimize",(function(){n._dialog.close()}))}});e.cssProperties.registerPrefix("Signature","k-input-"),e.ui.plugin(c)}(window.kendo.jQuery);var e=kendo;t.__meta__={id:"signature",name:"Signature",category:"web",description:"The Signature component ...",depends:["core","dialog","html.button","drawing"]},t.default=e,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=kendo.signature.min.js.map