@progress/kendo-ui/js/imageeditor/pane.min.js

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

module.exports=function(e){function t(o){if(i[o])return i[o].exports;var a=i[o]={exports:{},id:o,loaded:!1};return e[o].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}({0:function(e,t,i){i(1037),e.exports=i(1037)},3:function(e,t){e.exports=function(){throw Error("define cannot be used indirect")}},20:function(e,t){e.exports=require("../kendo.core")},23:function(e,t){e.exports=require("../kendo.draganddrop")},1037:function(e,t,i){var o,a,n;!function(r,define){a=[i(20),i(1038),i(1039),i(23)],o=r,n="function"==typeof o?o.apply(t,a):o,!(void 0!==n&&(e.exports=n))}(function(){return function(e,t){var i=window.kendo,o=e.extend,a=e.proxy,n=i.Class,r=".k-imageeditor-pane",d="click",s={form:"k-imageeditor-pane-form",button:"k-imageeditor-pane-button",confirmButton:"k-imageeditor-pane-confirm-button",cropOverlay:"k-imageeditor-crop-overlay",crop:"k-imageeditor-crop",resizeHandle:"k-resize-handle",resizeHandlePrefix:"k-resize-"},l=function(e){return Math.round(1e3*e)/1e3},h=n.extend({init:function(t){var i=this;i.imageeditor=t,i.imageeditor.currentPaneTool&&i.imageeditor.currentPaneTool.destroy(),i.element=e("<div></div>").addClass(s.form)},open:function(){var e=this,t=e.imageeditor,a=t.options.messages.common;t.paneWrapper.append(e.element),e.formWidget=new i.ui.Form(e.element,o(e.formSettings(),{buttonsTemplate:i.format("<button class='{0} k-button' data-action='cancel'>{2}</button><button class='{0} {1} k-button k-primary' data-action='confirm'>{3}</button>",s.button,s.confirmButton,a.cancel,a.confirm)})),e.bindButtonEvents(),t.paneWrapper.show(),t.currentPaneTool=e},bindButtonEvents:function(){var e=this,t=e.formWidget,i=t.element.find("."+s.button);e._clickHandler=a(e._click,e),i.on(d+r,e._clickHandler)},_click:function(t){var i=this,o=e(t.target),a=o.data("action");i[a]&&i[a]()},cancel:function(){this.destroy()},confirm:function(){window.console.error("Pane's confirm method is not implemented!"),this.destroy()},refresh:function(){},destroy:function(){var e=this,t=e.imageeditor;e.formWidget.element.find("."+s.button).off(r),e.formWidget.destroy(),t.paneWrapper.html(""),t.paneWrapper.hide(),delete t.currentPaneTool}}),c=h.extend({init:function(e){var t=this;h.fn.init.call(t,e),t.buildCropModel(),t.canvasUI()},confirm:function(){var e=this,t=e.formWidget._model.toJSON();e.destroy(),e.imageeditor.executeCommand({command:"CropImageEditorCommand",options:t})},formSettings:function(){var t,i=this,o=i.imageeditor.options.messages.panes.crop,n=i.imageeditor.options.messages.common,r=o.aspectRatioItems,d=[];if(r)for(t in r)d.push({value:t,text:r[t]});else d=[{value:"originalRatio",text:"Original ratio"},{value:"1:1",text:"1:1 (Square)"},{value:"4:5",text:"4:5 (8:10)"},{value:"5:7",text:"5:7"},{value:"2:3",text:"2:3 (4:6)"},{value:"16:9",text:"16:9"}];return{formData:i._model,change:a(i.onChange,i),items:[{type:"group",label:o.title||"Crop Image",layout:"grid",grid:{cols:2,gutter:"0 8px"},items:[{label:o.aspectRatio||"Aspect ratio:",field:"aspectRatio",editor:"DropDownList",editorOptions:{dataValueField:"value",dataTextField:"text",dataSource:d},colSpan:2},{label:o.orientation,field:"orientation",editor:e.proxy(i._orientationEditor,i),colSpan:2},{label:n.width||"Width:",field:"width",attributes:{style:"max-width: 100px;"},editor:"NumericTextBox",editorOptions:{format:"n0",max:i._model.width,min:0},colSpan:1},{label:n.height||"Height:",field:"height",attributes:{style:"max-width: 100px;"},editor:"NumericTextBox",editorOptions:{format:"n0",max:i._model.height,min:0},colSpan:1},{label:n.lockAspectRatio||"Lock aspect ratio",field:"lockAspectRatio",colSpan:2}]}]}},_orientationEditor:function(t,i){var o=this,a=o.imageeditor.options.messages.panes.crop,n=i.model[i.field];e("<div name='"+i.field+"'></div>").appendTo(t).kendoButtonGroup({items:[{text:a.portrait||"Portrait",attributes:{"data-value":"portrait"},selected:"portrait"===n},{text:a.landscape||"Landscape",attributes:{"data-value":"landscape"},selected:"landscape"===n}],select:function(e){var t=e.sender.wrapper.find(".k-state-active").data("value");i.model.set(i.field,t)}})},buildCropModel:function(){var e=this,t=e.imageeditor,i=t.getCanvasElement(),o=i.width,a=i.height;e._model={top:0,left:0,aspectRatio:"originalRatio",width:o,height:a,orientation:o-a<0?"portrait":"landscape",lockAspectRatio:!0}},canvasUI:function(){var t,o,a,n,r,d=this,l=d.imageeditor,h=d.imageeditor.canvasContainer,c=e("<div></div>").addClass(s.cropOverlay),p=e("<div></div>").addClass(s.crop),m="<span class='"+s.resizeHandle+"'></span>",u=["nw","n","ne","w","e","sw","s","se"],f=l.getZoomLevel();for(t=0;t<u.length;t++)o=e(m).addClass(s.resizeHandlePrefix+u[t]).attr("data-orientation",u[t]),d._initResizeHandle(o),p.append(o);d.cropElement=p,d._canvasUI=c.append(p).appendTo(h),a=Math.round(d._model.width*f),n=Math.round(d._model.height*f),r=parseInt(d.cropElement.css("border-top-width"),10),d.cropElement.css({width:a,height:n,backgroundImage:"url('"+l._image.src+"')",backgroundSize:i.format("{0}px {1}px",a,n),backgroundClip:"content-box",backgroundPosition:i.format("-{0}px -{0}px",r)}),d.cropElement.kendoDraggable({ignore:"."+s.resizeHandle,drag:function(e){d._adjustTopLeft(e.target.offsetTop+e.y.delta,e.target.offsetLeft+e.x.delta)}})},refresh:function(){var e=this,t=e.formWidget._model,o=e.imageeditor.getZoomLevel(),a=Math.round(t.width*o),n=Math.round(t.height*o),r=Math.round(t.top*o),d=Math.round(t.left*o),s=parseInt(e.cropElement.css("border-top-width"),10);e.cropElement.css({top:r,left:d,width:a,height:n,backgroundSize:i.format("{0}px {1}px",e._model.width*o,e._model.height*o),backgroundPosition:i.format("-{0}px -{1}px",d+s,r+s)})},_initResizeHandle:function(t){var i=this;t.kendoDraggable({drag:function(t){var o=e(t.sender.element),a=i.formWidget._model,n=i._model,r=o.data("orientation"),d={},s=i.imageeditor.getZoomLevel(),l=a.left*s,h=a.top*s;r.indexOf("w")>=0?(d.left=i.cropElement[0].offsetLeft+t.x.delta,d.width=i.cropElement[0].offsetWidth-t.x.delta):r.indexOf("e")>=0&&(d.width=i.cropElement[0].offsetWidth+t.x.delta),r.indexOf("n")>=0?(d.top=i.cropElement[0].offsetTop+t.y.delta,d.height=i.cropElement[0].offsetHeight-t.y.delta):r.indexOf("s")>=0&&(d.height=i.cropElement[0].offsetHeight+t.y.delta),d.width&&(d.left||l)+d.width<=n.width*s&&a.set("width",Math.round(d.width/s)),d.height&&(d.top||h)+d.height<=n.height*s&&a.set("height",Math.round(d.height/s)),(d.top||d.left)&&i._adjustTopLeft(d.top,d.left)}})},_adjustTopLeft:function(e,t,i){var o=this,a=i||o.formWidget._model,n=o.formWidget._model,r=o._model,d=o.imageeditor.getZoomLevel();e>=0&&e/d+a.height<=r.height&&n.set("top",Math.round(e/d)),t>=0&&t/d+a.width<=r.width&&n.set("left",Math.round(t/d))},onChange:function(e){var t,a,n,r,d,s,l,h,c,p=this,m=p.imageeditor.getZoomLevel(),u=e.sender._model,f=p._model,g=f.width,x=f.height,v=f.width+":"+f.height,w=p._gcd(f.width,f.height);v=f.width/w+":"+f.height/w,"aspectRatio"===e.field&&"originalRatio"===e.value?(u.set("top",0),u.set("left",0),u.set("width",f.width),u.set("height",f.height),u.set("orientation",f.orientation)):"orientation"===e.field?(t=o({},u,{width:u.height,height:u.width}),a=p._calcSize(t,v,g,x),u.set("width",a.width),u.set("height",a.height)):u.lockAspectRatio&&(n=e.field,r=p._calcSize(u,v,g,x,n),u.set("width",r.width),u.set("height",r.height)),d=Math.round(u.width*m),s=Math.round(u.height*m),l=Math.round(u.top*m),h=Math.round(u.left*m),c=parseInt(p.cropElement.css("border-top-width"),10),p.cropElement.css({top:l,left:h,width:d,height:s,backgroundPosition:i.format("-{0}px -{1}px",h+c,l+c)})},_calcSize:function(e,t,i,o,a){var n,r,d,s,h,c=Math.min(e.width,i),p=Math.min(e.height,o),m="portrait"===e.orientation,u=e.aspectRatio;return u.indexOf(":")<0&&(u=t),u=u.split(":").map(function(e){return parseInt(e,10)}),n=m?Math.min(u[0],u[1]):Math.max(u[0],u[1]),r=m?Math.max(u[0],u[1]):Math.min(u[0],u[1]),d=l(n/r),s=l(c/p),h={width:Math.round(p*d),height:Math.round(c/d)},"width"===a?{width:c,height:h.height}:"height"===a?{width:h.width,height:p}:(s>d?c=h.width:s<d&&(p=h.height),{width:c,height:p})},_gcd:function(e,t){return 0===t?e:this._gcd(t,e%t)},destroy:function(){i.destroy(this._canvasUI),this._canvasUI.remove(),h.fn.destroy.call(this)}}),p=h.extend({init:function(e){h.fn.init.call(this,e),this.buildResizeModel()},confirm:function(){var e=this,t=e._model.width,i=e._model.height,o=e.formWidget._model.toJSON();"percents"===o.measure&&(o.width=t*(o.width/100),o.height=i*(o.height/100)),e.imageeditor.executeCommand({command:"ResizeImageEditorCommand",options:o}),e.destroy()},formSettings:function(){var e=this,t=e.imageeditor.options.messages.panes.resize,i=e.imageeditor.options.messages.common;return{formData:e._model,change:a(e.onChange,e),items:[{type:"group",label:t.title||"Resize image",layout:"grid",grid:{cols:2,gutter:"0 8px"},items:[{label:i.width||"Width:",field:"width",attributes:{style:"max-width: 100px;"},editor:"NumericTextBox",editorOptions:{format:"n0",min:0},colSpan:1},{field:"measureW",editor:"DropDownList",attributes:{style:"max-width: 100px;"},label:{text:"&nbsp;",encoded:!1},editorOptions:{dataTextField:"text",dataValueField:"value",dataSource:[{text:t.pixels||"Pixels",value:"pixels"},{text:t.percents||"Percents",value:"percents"}]},colSpan:1},{label:i.height||"Height:",field:"height",attributes:{style:"max-width: 100px;"},editor:"NumericTextBox",editorOptions:{format:"n0",min:0},colSpan:1},{field:"measureH",label:{text:"&nbsp;",encoded:!1},attributes:{style:"max-width: 100px;"},editor:"DropDownList",editorOptions:{dataTextField:"text",dataValueField:"value",dataSource:[{text:t.pixels||"Pixels",value:"pixels"},{text:t.percents||"Percents",value:"percents"}]},colSpan:1},{label:i.lockAspectRatio||"Lock aspect ratio",field:"lockAspectRatio",colSpan:2}]}]}},buildResizeModel:function(){var e=this,t=e.imageeditor,i=t.getCanvasElement(),o=i.width,a=i.height;e._model={width:o,height:a,measure:"pixels",measureW:"pixels",measureH:"pixels",lockAspectRatio:!0,ratio:l(o/a)}},onChange:function(e){var t=this,i=e.sender._model,o=i.lockAspectRatio;"measureW"===e.field||"measureH"===e.field?(i.set("measureW",e.value),i.set("measureH",e.value),i.set("measure",e.value)):"measure"===e.field?t.resetNumericsTo(e.value):"width"===e.field&&o&&!t._preventChange?i.set("height",i.width/i.ratio):"height"===e.field&&o&&!t._preventChange&&i.set("width",i.height*i.ratio),i.set("ratio",l(i.width/i.height))},resetNumericsTo:function(e){var t=this,i=t._model.width,o=t._model.height,a=t.formWidget,n=a._model,r=a.element.find("[name=width]").data("kendoNumericTextBox"),d=a.element.find("[name=height]").data("kendoNumericTextBox"),s="percents"===e,l={percents:{format:"#\\%"},pixels:{format:"n0"}};r.setOptions(l[e]),d.setOptions(l[e]),t._preventChange=!0,n.set("width",s?i/r.value()*100:i*(r.value()/100)),n.set("height",s?o/d.value()*100:o*(d.value()/100)),t._preventChange=!1}});o(i.ui.imageeditor,{ImageEditorPane:h,panes:{crop:c,resize:p}})}(window.kendo.jQuery),window.kendo},i(3))},1038:function(e,t){e.exports=require("../kendo.form")},1039:function(e,t){e.exports=require("../kendo.buttongroup")}});