@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(i){var o={};function a(e){if(o[e])return o[e].exports;var t=o[e]={exports:{},id:e,loaded:!1};return i[e].call(t.exports,t,t.exports,a),t.loaded=!0,t.exports}return a.m=i,a.c=o,a.p="",a(0)}({0:function(e,t,i){e.exports=i(1046)},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")},1046:function(e,t,i){var o;i(3),i=[i(20),i(1047),i(1048),i(23)],void 0===(t="function"==typeof(o=function(){var m=window.kendo.jQuery,n=void 0,x=window.kendo,w=m.extend,r,o=".k-imageeditor-pane",a="click",u={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-"},f=function(e){return Math.round(e*1e3)/1e3},i=x.Class.extend({init:function(e){var t=this;t.imageeditor=e;if(t.imageeditor.currentPaneTool)t.imageeditor.currentPaneTool.destroy();t.element=m("<div></div>").addClass(u.form)},open:function(){var e=this,t=e.imageeditor,i=t.options.messages.common;t.paneWrapper.append(e.element);e.formWidget=new x.ui.Form(e.element,w(e.formSettings(),{buttonsTemplate:x.format("<button class='{0} k-button k-button-md k-rounded-md k-button-solid k-button-solid-base' data-action='cancel'><span class='k-button-text'>{2}</span></button>"+"<button class='{0} {1} k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary' data-action='confirm'><span class='k-button-text'>{3}</span></button>",u.button,u.confirmButton,i.cancel,i.confirm)}));e.bindButtonEvents();t.paneWrapper.show();t.currentPaneTool=e},bindButtonEvents:function(){var e=this,t=e.formWidget,i=t.element.find("."+u.button);e._clickHandler=e._click.bind(e);i.on(a+o,e._clickHandler)},_click:function(e){var t=this,i=m(e.target).closest("."+u.button),o=i.data("action");if(t[o])t[o]()},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("."+u.button).off(o);e.formWidget.destroy();t.paneWrapper.html("");t.paneWrapper.hide();delete t.currentPaneTool}}),e=i.extend({init:function(e){var t=this;i.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 e=this,t=e.imageeditor.options.messages.panes.crop,i=e.imageeditor.options.messages.common,o=t.aspectRatioItems,a=[];if(o)for(var n in o)a.push({value:n,text:o[n]});else a=[{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:e._model,change:e.onChange.bind(e),items:[{type:"group",label:t.title||"Crop Image",layout:"grid",grid:{cols:2,gutter:"0 8px"},items:[{label:t.aspectRatio||"Aspect ratio:",field:"aspectRatio",editor:"DropDownList",editorOptions:{dataValueField:"value",dataTextField:"text",dataSource:a},colSpan:2},{label:t.orientation,field:"orientation",editor:e._orientationEditor.bind(e),colSpan:2},{label:i.width||"Width:",field:"width",attributes:{style:"max-width: 100px;"},editor:"NumericTextBox",editorOptions:{format:"n0",max:e._model.width,min:0},colSpan:1},{label:i.height||"Height:",field:"height",attributes:{style:"max-width: 100px;"},editor:"NumericTextBox",editorOptions:{format:"n0",max:e._model.height,min:0},colSpan:1},{label:i.lockAspectRatio||"Lock aspect ratio",field:"lockAspectRatio",colSpan:2}]}]}},_orientationEditor:function(e,i){var t=this,o=t.imageeditor.options.messages.panes.crop,a=i.model[i.field];t._orientationWidget=m("<div name='"+i.field+"'></div>").appendTo(e).kendoButtonGroup({items:[{text:o.portrait||"Portrait",attributes:{"data-value":"portrait"},selected:a==="portrait"},{text:o.landscape||"Landscape",attributes:{"data-value":"landscape"},selected:a==="landscape"}],select:function(e){var t=e.sender.wrapper.find(".k-selected").data("value");i.model.set(i.field,t)}}).data("kendoButtonGroup")},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:true}},canvasUI:function(){var t=this,e=t.imageeditor,i=t.imageeditor.canvasContainer,h=m("<div></div>").addClass(u.cropOverlay),o=m("<div></div>").addClass(u.crop),c="<span class='"+u.resizeHandle+"'></span>",a=["nw","n","ne","w","e","sw","s","se"],n=e.getZoomLevel();for(var r=0;r<a.length;r++){var d=m(c).addClass(u.resizeHandlePrefix+a[r]).attr("data-orientation",a[r]);t._initResizeHandle(d);o.append(d)}t.cropElement=o;t._canvasUI=h.append(o).appendTo(i);var s=Math.round(t._model.width*n);var l=Math.round(t._model.height*n);var p=parseInt(t.cropElement.css("border-top-width"),10);t.cropElement.css({width:s,height:l,backgroundImage:"url('"+e._image.src+"')",backgroundSize:x.format("{0}px {1}px",s,l),backgroundClip:"content-box",backgroundPosition:x.format("-{0}px -{0}px",p)});t.cropElement.kendoDraggable({ignore:"."+u.resizeHandle,drag:function(e){t._adjustTopLeft(e.target.offsetTop+e.y.delta,e.target.offsetLeft+e.x.delta)}})},refresh:function(){var e=this,t=e.formWidget._model,i=e.imageeditor.getZoomLevel(),o=Math.round(t.width*i),a=Math.round(t.height*i),n=Math.round(t.top*i),r=Math.round(t.left*i),d=parseInt(e.cropElement.css("border-top-width"),10);e.cropElement.css({top:n,left:r,width:o,height:a,backgroundSize:x.format("{0}px {1}px",e._model.width*i,e._model.height*i),backgroundPosition:x.format("-{0}px -{1}px",r+d,n+d)})},_initResizeHandle:function(e){var l=this;e.kendoDraggable({drag:function(e){var t=m(e.sender.element),i=l.formWidget._model,o=l._model,a=t.data("orientation"),n={},r=l.imageeditor.getZoomLevel(),d=i.left*r,s=i.top*r;if(a.indexOf("w")>=0){n.left=l.cropElement[0].offsetLeft+e.x.delta;n.width=l.cropElement[0].offsetWidth-e.x.delta}else if(a.indexOf("e")>=0)n.width=l.cropElement[0].offsetWidth+e.x.delta;if(a.indexOf("n")>=0){n.top=l.cropElement[0].offsetTop+e.y.delta;n.height=l.cropElement[0].offsetHeight-e.y.delta}else if(a.indexOf("s")>=0)n.height=l.cropElement[0].offsetHeight+e.y.delta;if(n.width&&(n.left||d)+n.width<=o.width*r)i.set("width",Math.round(n.width/r));if(n.height&&(n.top||s)+n.height<=o.height*r)i.set("height",Math.round(n.height/r));if(n.top||n.left)l._adjustTopLeft(n.top,n.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();if(e>=0&&e/d+a.height<=r.height)n.set("top",Math.round(e/d));if(t>=0&&t/d+a.width<=r.width)n.set("left",Math.round(t/d))},onChange:function(e){var t=this,i=t.imageeditor.getZoomLevel(),o=e.sender._model,a=t._model,n=a.width,r=a.height,d=a.width+":"+a.height,s=t._gcd(a.width,a.height);d=a.width/s+":"+a.height/s;if(e.field==="aspectRatio"&&e.value==="originalRatio"){o.set("top",0);o.set("left",0);o.set("orientation",a.orientation);o.set("width",a.width);o.set("height",a.height)}else if(e.field==="orientation"){var h=w({},o,{width:o.height,height:o.width});var l=t._calcSize(h,d,n,r);o.set("width",l.width);o.set("height",l.height);t._orientationWidget.select(e.value==="portrait"?0:1)}else if(o.lockAspectRatio){var c=e.field;var p=t._calcSize(o,d,n,r,c);o.set("width",p.width);o.set("height",p.height)}var m=Math.round(o.width*i);var u=Math.round(o.height*i);var f=Math.round(o.top*i);var g=Math.round(o.left*i);var v=parseInt(t.cropElement.css("border-top-width"),10);t.cropElement.css({top:f,left:g,width:m,height:u,backgroundPosition:x.format("-{0}px -{1}px",g+v,f+v)})},_calcSize:function(e,t,h,c,i){var o=Math.min(e.width,h),a=Math.min(e.height,c),n=e.orientation==="portrait",r=e.aspectRatio;if(r.indexOf(":")<0)r=t;r=r.split(":").map(function(e){return parseInt(e,10)});var p=n?Math.min(r[0],r[1]):Math.max(r[0],r[1]);var m=!n?Math.min(r[0],r[1]):Math.max(r[0],r[1]);var d=f(p/m);var s=f(o/a);var l={width:Math.round(a*d),height:Math.round(o/d)};if(i==="width")return{width:o,height:l.height};if(i==="height")return{width:l.width,height:a};if(s>d)o=l.width;else if(s<d)a=l.height;return{width:o,height:a}},_gcd:function(e,t){return t===0?e:this._gcd(t,e%t)},destroy:function(){x.destroy(this._canvasUI);this._canvasUI.remove();i.fn.destroy.call(this)}}),t=i.extend({init:function(e){i.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();if(o.measure==="percents"){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:e.onChange.bind(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:false},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:false},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:true,ratio:f(o/a)}},onChange:function(e){var t=this,i=e.sender._model,o=i.lockAspectRatio;if(e.field==="measureW"||e.field==="measureH"){i.set("measureW",e.value);i.set("measureH",e.value);i.set("measure",e.value)}else if(e.field==="measure")t.resetNumericsTo(e.value);else if(e.field==="width"&&o&&!t._preventChange)i.set("height",i.width/i.ratio);else if(e.field==="height"&&o&&!t._preventChange)i.set("width",i.height*i.ratio);i.set("ratio",f(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=e==="percents",l={percents:{format:"#\\%"},pixels:{format:"n0"}};r.setOptions(l[e]);d.setOptions(l[e]);t._preventChange=true;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=false}});return w(x.ui.imageeditor,{ImageEditorPane:i,panes:{crop:e,resize:t}}),window.kendo})?o.apply(t,i):o)||(e.exports=t)},1047:function(e,t){e.exports=require("../kendo.form")},1048:function(e,t){e.exports=require("../kendo.buttongroup")}});