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