wPaint.min.js

/*! wPaint - v2.5.0 - 2018-09-26 */
!function(d){"use strict";function i(t,e,i){this.wPaint=t,this.options=i,this.name=e,this.type=t.menus.primary?"secondary":"primary",this.docked=!0,this.dockOffset={left:0,top:0},this.generate()}function a(t,e){this.$el=d(t),this.options=e,this.init=!1,this.menus={primary:null,active:null,all:{}},this.previousMode=null,this.width=this.$el.width(),this.height=this.$el.height(),this.ctxBgResize=!1,this.ctxResize=!1,this.generate(),this._init()}i.prototype={generate:function(){this.$menu=d('<div class="wPaint-menu"></div>'),this.$menuHolder=d('<div class="wPaint-menu-holder wPaint-menu-name-'+this.name+'"></div>'),this.options.handle?this.$menuHandle=this._createHandle():this.$menu.addClass("wPaint-menu-nohandle"),"primary"===this.type?((this.wPaint.menus.primary=this).setOffsetLeft(this.options.offsetLeft),this.setOffsetTop(this.options.offsetTop)):"secondary"===this.type&&this.$menu.hide(),this.$menu.append(this.$menuHolder.append(this.$menuHandle)),this.reset(),this.wPaint.$el.append(this.$menu),this.setAlignment(this.options.alignment)},reset:function(){var t,e,i=this,n=d.fn.wPaint.menus[this.name];for(t in n.items)this.$menuHolder.children(".wPaint-menu-icon-name-"+t).length||(n.items[t].name=t,n.items[t].img=i.wPaint.options.path+(n.items[t].img||n.img),e=n.items[t],i._appendItem(e))},_appendItem:function(t){var e=this["_createIcon"+t.icon.capitalize()](t);t.after?this.$menuHolder.children(".wPaint-menu-icon-name-"+t.after).after(e):this.$menuHolder.append(e)},setOffsetLeft:function(t){this.$menu.css({left:t})},setOffsetTop:function(t){this.$menu.css({top:t})},setAlignment:function(t){var e=this.$menu.css("left");this.$menu.attr("class",this.$menu.attr("class").replace(/wPaint-menu-alignment-.+\s|wPaint-menu-alignment-.+$/,"")),this.$menu.addClass("wPaint-menu-alignment-"+t),this.$menu.width("auto").css("left",-1e4),this.$menu.width(this.$menu.width()).css("left",e),"secondary"===this.type&&("horizontal"===this.options.alignment?this.dockOffset.top=this.wPaint.menus.primary.$menu.outerHeight(!0):this.dockOffset.left=this.wPaint.menus.primary.$menu.outerWidth(!0))},_createHandle:function(){var s=this,t=d('<div class="wPaint-menu-handle"></div>');return this.$menu.draggable({handle:t}),"secondary"===this.type&&(this.$menu.draggable("option","snap",this.wPaint.menus.primary.$menu),this.$menu.draggable("option","start",function(){s.docked=!1,s._setDrag()}),this.$menu.draggable("option","stop",function(){d.each(s.$menu.data("ui-draggable").snapElements,function(t,e){var i=s.$menu.offset(),n=s.wPaint.menus.primary.$menu.offset();s.dockOffset.left=i.left-n.left,s.dockOffset.top=i.top-n.top,s.docked=e.snapping}),s._setDrag()}),this.$menu.draggable("option","drag",function(){s._setIndex()})),t.bindMobileEvents(),t},_createIconBase:function(t){var e=this,i=d('<div class="wPaint-menu-icon wPaint-menu-icon-name-'+t.name+'"></div>'),n=d('<div class="wPaint-menu-icon-img"></div>'),s=n.realWidth(null,null,this.wPaint.$el);return i.attr("title",t.title).on("mousedown",d.proxy(this.wPaint._closeSelectBoxes,this.wPaint,t)).on("mouseenter",function(t){var e=d(t.currentTarget);e.siblings(".hover").removeClass("hover"),e.hasClass("disabled")||e.addClass("hover")}).on("mouseleave",function(t){d(t.currentTarget).removeClass("hover")}).on("click",function(){e.wPaint.menus.active=e}),d.isNumeric(t.index)&&n.css({backgroundImage:"url("+t.img+")",backgroundPosition:-s*t.index+"px 0px"}),i.append(n)},_createIconGroup:function(t){var e,i,n,s=this,a={backgroundImage:"url("+t.img+")"},o=this.$menuHolder.children(".wPaint-menu-icon-group-"+t.group),h=o.length,c=null;function r(){o.children(".wPaint-menu-select-holder").is(":visible")||t.callback.apply(s.wPaint,[])}if(h||(o=this._createIconBase(t).addClass("wPaint-menu-icon-group wPaint-menu-icon-group-"+t.group).on("click.setIcon",r).on("mousedown",d.proxy(this._iconClick,this))),n=o.children(".wPaint-menu-icon-img").realWidth(null,null,this.wPaint.$el),a.backgroundPosition=-n*t.index+"px center",(c=o.children(".wPaint-menu-select-holder")).length||(c=this._createSelectBox(o)).children().on("click",function(){o.addClass("active").siblings(".active").removeClass("active")}),i=d('<div class="wPaint-menu-icon-select-img"></div>').attr("title",t.title).css(a),e=this._createSelectOption(c,i).addClass("wPaint-menu-icon-name-"+t.name).on("click",function(){o.attr("title",t.title).off("click.setIcon").on("click.setIcon",r),o.children(".wPaint-menu-icon-img").css(a),t.callback.apply(s.wPaint,[])}),t.after&&c.children(".wPaint-menu-select").children(".wPaint-menu-icon-name-"+t.after).after(e),!h)return o},_createIconGeneric:function(t){return this._createIconActivate(t)},_createIconActivate:function(e){if(e.group)return this._createIconGroup(e);var i=this,t=this._createIconBase(e);return t.on("click",function(t){"generic"!==e.icon&&i._iconClick(t),e.callback.apply(i.wPaint,[t])}),t},_isIconDisabled:function(t){return this.$menuHolder.children(".wPaint-menu-icon-name-"+t).hasClass("disabled")},_setIconDisabled:function(t,e){var i=this.$menuHolder.children(".wPaint-menu-icon-name-"+t);e?i.addClass("disabled").removeClass("hover"):i.removeClass("disabled")},_getIcon:function(t){return this.$menuHolder.children(".wPaint-menu-icon-name-"+t)},_iconClick:function(t){var e=d(t.currentTarget),i=this.wPaint.menus.all;for(var n in i)i[n]&&"secondary"===i[n].type&&i[n].$menu.hide();e.siblings(".active").removeClass("active"),e.hasClass("disabled")||e.addClass("active")},_createIconToggle:function(t){var e=this,i=this._createIconBase(t);return i.on("click",function(){i.toggleClass("active"),t.callback.apply(e.wPaint,[i.hasClass("active")])}),i},_createIconSelect:function(e){var t,i,n,s=this,a=this._createIconBase(e),o=this._createSelectBox(a);function h(t){a.children(".wPaint-menu-icon-img").html(d(t.currentTarget).html()),e.callback.apply(s.wPaint,[d(t.currentTarget).html()])}for(t=0,i=e.range.length;t<i;t++)(n=this._createSelectOption(o,e.range[t])).on("click",h),e.useRange&&n.css(e.name,e.range[t]);return a},_createSelectBox:function(t){var e=d('<div class="wPaint-menu-select-holder"></div>'),i=d('<div class="wPaint-menu-select"></div>'),n=null;return e.on("mousedown mouseup",this.wPaint._stopPropagation).on("click",function(t){t.stopPropagation(),e.hide()}).hide(),"horizontal"===this.options.alignment?e.css({left:0,top:t.children(".wPaint-menu-icon-img").realHeight("outer",!0,this.wPaint.$el)}):e.css({left:t.children(".wPaint-menu-icon-img").realWidth("outer",!0,this.wPaint.$el),top:0}),t.addClass("wPaint-menu-icon-select").append('<div class="wPaint-menu-icon-group-arrow"></div>').append(e.append(i)),t.hasClass("wPaint-menu-icon-group")?t.on("mousedown",function(){n=setTimeout(function(){e.toggle()},200)}).on("mouseup",function(){clearTimeout(n)}):t.on("click",function(){e.toggle()}),e},_createSelectOption:function(t,e){var i=t.children(".wPaint-menu-select"),n=d('<div class="wPaint-menu-select-option"></div>').append(e);return i.children().length||n.addClass("first"),i.append(n),n},_setSelectValue:function(t,e){this._getIcon(t).children(".wPaint-menu-icon-img").html(e)},_createIconColorPicker:function(e){var i=this,t=this._createIconBase(e);return t.on("click",function(){"dropper"===i.wPaint.options.mode&&i.wPaint.setMode(i.wPaint.previousMode)}).addClass("wPaint-menu-colorpicker").wColorPicker({mode:"click",generateButton:!1,dropperButton:!0,onSelect:function(t){e.callback.apply(i.wPaint,[t])},onDropper:function(){t.trigger("click"),i.wPaint.dropper=e.name,i.wPaint.setMode("dropper")}}),t},_setColorPickerValue:function(t,e){this._getIcon(t).children(".wPaint-menu-icon-img").css("backgroundColor",e)},_createIconMenu:function(e){var i=this,t=this._createIconActivate(e);return t.on("click",function(){i.wPaint.setCursor(e.name);var t=i.wPaint.menus.all[e.name];t.$menu.toggle(),i.handle?t._setDrag():t._setPosition()}),t},_setDrag:function(){var t=null,e=null;this.$menu.is(":visible")&&(this.docked&&(t=e=d.proxy(this._setPosition,this),this._setPosition()),this.wPaint.menus.primary.$menu.draggable("option","drag",t),this.wPaint.menus.primary.$menu.draggable("option","stop",e))},_setPosition:function(){var t=this.wPaint.menus.primary.$menu.position();this.$menu.css({left:t.left+this.dockOffset.left,top:t.top+this.dockOffset.top})},_setIndex:function(){var t=this.wPaint.menus.primary.$menu.offset(),e=this.$menu.offset();e.top<t.top||e.left<t.left?this.$menu.addClass("wPaint-menu-behind"):this.$menu.removeClass("wPaint-menu-behind")}},a.prototype={generate:function(){if(this.init)return this;var s=this;function t(t){var e=t?t.capitalize():"",i="canvas"+e,n="ctx"+e;return s[i]=document.createElement("canvas"),s[n]=s[i].getContext("2d"),s["$"+i]=d(s[i]),s["$"+i].attr("class","wPaint-canvas"+(t?"-"+t:"")).attr("width",s.width+"px").attr("height",s.height+"px").css({position:"absolute",left:0,top:0}),s.$el.append(s["$"+i]),s["$"+i]}t("bg"),t("").on("mousedown",function(t){t.preventDefault(),t.stopPropagation(),s.draw=!0,t.canvasEvent="down",s._closeSelectBoxes(),s._callShapeFunc.apply(s,[t])}).bindMobileEvents(),t("temp").hide(),d(document).on("mousemove",function(t){s.draw&&(t.canvasEvent="move",s._callShapeFunc.apply(s,[t]))}).on("mousedown",d.proxy(this._closeSelectBoxes,this)).on("mouseup",function(t){s.draw&&(s.draw=!1,t.canvasEvent="up",s._callShapeFunc.apply(s,[t]))}),this.setTheme(this.options.theme)},_init:function(){var t=null,e=null;for(t in this.init=!0,this.options)this[e="set"+t.capitalize()]&&this[e](this.options[t]);this._fixMenus(),this.menus.primary._getIcon(this.options.mode).trigger("click")},resize:function(){var t=this.getBg(),e=this.getImage();this.width=this.$el.width(),this.height=this.$el.height(),this.canvasBg.width=this.width,this.canvasBg.height=this.height,this.canvas.width=this.width,this.canvas.height=this.height,!1===this.ctxBgResize&&(this.ctxBgResize=!0,this.setBg(t,!0)),!1===this.ctxResize&&(this.ctxResize=!0,this.setImage(e,"",!0,!0))},setTheme:function(t){var e,i;for(t=t.split(" "),this.$el.attr("class",(this.$el.attr("class")||"").replace(/wPaint-theme-.+\s|wPaint-theme-.+$/,"")),e=0,i=t.length;e<i;e++)this.$el.addClass("wPaint-theme-"+t[e])},setMode:function(t){this.setCursor(t),this.previousMode=this.options.mode,this.options.mode=t},setImage:function(t,h,c,r){if(!t)return!0;var l=this,u=null,p="";h="ctx"+(h||"").capitalize(),p=this[h],window.rgbHex(t)?(p.clearRect(0,0,this.width,this.height),p.fillStyle=t,p.rect(0,0,this.width,this.height),p.fill()):((u=new Image).src=t.toString(),d(u).load(function(){var t=1,e=0,i=0,n=0,s=0,a=u.width,o=u.height;c||((u.width>l.width||u.height>l.height||l.options.imageStretch)&&(t=(e=l.width/u.width)<(i=l.height/u.height)?e:i,a=u.width*t,o=u.height*t),n=(l.width-a)/2,s=(l.height-o)/2),p.clearRect(0,0,l.width,l.height),p.drawImage(u,n,s,a,o),l[h+"Resize"]=!1,r||l._addUndo()}))},setBg:function(t,e){if(!t)return!0;this.setImage(t,"bg",e,!0)},setCursor:function(t){t=d.fn.wPaint.cursors[t]||d.fn.wPaint.cursors.default,this.$el.css("cursor",'url("'+this.options.path+t.path+'") '+t.left+" "+t.top+", default")},setMenuOrientation:function(i){d.each(this.menus.all,function(t,e){e.options.aligment=i,e.setAlignment(i)})},getImage:function(t){var e=document.createElement("canvas"),i=e.getContext("2d");return t=!1!==t,d(e).css({display:"none",position:"absolute",left:0,top:0}).attr("width",this.width).attr("height",this.height),t&&i.drawImage(this.canvasBg,0,0),i.drawImage(this.canvas,0,0),e.toDataURL()},getBg:function(){return this.canvasBg.toDataURL()},_displayStatus:function(t){var e=this;this.$status||(this.$status=d('<div class="wPaint-status"></div>'),this.$el.append(this.$status)),this.$status.html(t),clearTimeout(this.displayStatusTimer),this.$status.fadeIn(500,function(){e.displayStatusTimer=setTimeout(function(){e.$status.fadeOut(500)},1500)})},_showModal:function(t){var e=this,i=this.$el.children(".wPaint-modal-bg"),n=this.$el.children(".wPaint-modal");i.length?n.fadeOut(500,function(){i.remove(),n.remove(),e._createModal(t)}):this._createModal(t)},_createModal:function(t){t=d('<div class="wPaint-modal-content"></div>').append(t.children());var e=d('<div class="wPaint-modal-bg"></div>'),i=d('<div class="wPaint-modal"></div>'),n=d('<div class="wPaint-modal-holder"></div>'),s=d('<div class="wPaint-modal-close">X</div>');function a(){e.remove(),i.remove()}s.on("click",function(){i.fadeOut(500,a)}),i.append(n.append(t)).append(s),this.$el.append(e).append(i),i.css({left:this.$el.outerWidth()/2-i.outerWidth(!0)/2,top:this.$el.outerHeight()/2-i.outerHeight(!0)/2}),i.fadeIn(500)},_createMenu:function(t,e){return(e=e||{}).alignment=this.options.menuOrientation,e.handle=this.options.menuHandle,new i(this,t,e)},_fixMenus:function(){var s=this,t=null;function e(t,e){var i=d(e),n=i.clone();n.appendTo(s.$el),n.outerHeight()===n.get(0).scrollHeight&&i.css({overflowY:"auto"}),n.remove()}for(var i in this.menus.all)(t=s.menus.all[i].$menu.find(".wPaint-menu-select-holder")).length&&t.children().each(e)},_closeSelectBoxes:function(t){var e,i;for(e in this.menus.all)i=this.menus.all[e].$menuHolder.children(".wPaint-menu-icon-select"),t&&(i=i.not(".wPaint-menu-icon-name-"+t.name)),i.children(".wPaint-menu-select-holder").hide()},_callShapeFunc:function(t){var e=this.$canvas.offset(),i=t.canvasEvent.capitalize(),n="_draw"+this.options.mode.capitalize()+i;t.pageX=Math.floor(t.pageX-e.left),t.pageY=Math.floor(t.pageY-e.top),this[n]&&this[n].apply(this,[t]),this.options["draw"+i]&&this.options["_draw"+i].apply(this,[t]),"Down"===i&&this.options.onShapeDown?this.options.onShapeDown.apply(this,[t]):"Move"===i&&this.options.onShapeMove?this.options.onShapeMove.apply(this,[t]):"Up"===i&&this.options.onShapeUp&&this.options.onShapeUp.apply(this,[t])},_stopPropagation:function(t){t.stopPropagation()},_drawShapeDown:function(t){this.$canvasTemp.css({left:t.PageX,top:t.PageY}).attr("width",0).attr("height",0).show(),this.canvasTempLeftOriginal=t.pageX,this.canvasTempTopOriginal=t.pageY},_drawShapeMove:function(t,e){var i=this.canvasTempLeftOriginal,n=this.canvasTempTopOriginal;e=e||2,t.left=t.pageX<i?t.pageX:i,t.top=t.pageY<n?t.pageY:n,t.width=Math.abs(t.pageX-i),t.height=Math.abs(t.pageY-n),t.x=this.options.lineWidth/2*e,t.y=this.options.lineWidth/2*e,t.w=t.width-this.options.lineWidth*e,t.h=t.height-this.options.lineWidth*e,d(this.canvasTemp).css({left:t.left,top:t.top}).attr("width",t.width).attr("height",t.height),this.canvasTempLeftNew=t.left,this.canvasTempTopNew=t.top,e=e||2,this.ctxTemp.fillStyle=this.options.fillStyle,this.ctxTemp.strokeStyle=this.options.strokeStyle,this.ctxTemp.lineWidth=this.options.lineWidth*e},_drawShapeUp:function(){this.ctx.drawImage(this.canvasTemp,this.canvasTempLeftNew,this.canvasTempTopNew),this.$canvasTemp.hide()},_drawDropperDown:function(t){var e,i={x:t.pageX,y:t.pageY},n=this._getPixel(this.ctx,i);e="rgba("+[n.r,n.g,n.b,n.a].join(",")+")",this.options[this.dropper]=e,this.menus.active._getIcon(this.dropper).wColorPicker("color",e)},_drawDropperUp:function(){this.setMode(this.previousMode)},_getPixel:function(t,e){var i=t.getImageData(0,0,this.width,this.height),n=i.data,s=4*(e.y*i.width+e.x);return{r:n[s],g:n[s+1],b:n[s+2],a:n[s+3]}}},d.support.canvas=document.createElement("canvas").getContext,d.fn.wPaint=function(e,i){function t(){var t=d.data(this,"wPaint");return t||(t=new a(this,d.extend(!0,{},e)),d.data(this,"wPaint",t)),t}var n,s=[];return"string"==typeof e?(n=(i?"set":"get")+e.charAt(0).toUpperCase()+e.substring(1),this.each(function(){var t=d.data(this,"wPaint");t&&(t[e]?t[e].apply(t,[i]):void 0!==i?(t[n]&&t[n].apply(t,[i]),t.options[e]&&(t.options[e]=i)):t[n]?s.push(t[n].apply(t,[i])):t.options[e]?s.push(t.options[e]):s.push(void 0))}),s.length?1===s.length?s[0]:s:this):((e=d.extend({},d.fn.wPaint.defaults,e)).lineWidth=parseInt(e.lineWidth,10),e.fontSize=parseInt(e.fontSize,10),this.each(function(){return d.support.canvas?d.proxy(t,this)():(d(this).html("Browser does not support HTML5 canvas, please upgrade to a more modern browser."),!1)}))},d.fn.wPaint.extend=function(n,s){var t;function e(t){if(s[t]){var e=a.prototype[t],i=n[t];s[t]=function(){e.apply(this,arguments),i.apply(this,arguments)}}else s[t]=n[t]}for(t in s="menu"===s?i.prototype:a.prototype,n)e(t)},d.fn.wPaint.menus={},d.fn.wPaint.cursors={},d.fn.wPaint.defaults={path:"/",theme:"standard classic",autoScaleImage:!0,autoCenterImage:!0,menuHandle:!0,menuOrientation:"horizontal",menuOffsetLeft:5,menuOffsetTop:5,bg:null,image:null,imageStretch:!1,onShapeDown:null,onShapeMove:null,onShapeUp:null}}(jQuery),String.prototype.capitalize||(String.prototype.capitalize=function(){return this.slice(0,1).toUpperCase()+this.slice(1)}),function(o){o.fn.realWidth=function(t,e,i){var n,s,a=null;return s=""===(t="inner"===t||"outer"===t?t:"")?"width":t+"Width",e=!0===e,a=o(this).clone().css({position:"absolute",left:-1e4}).appendTo(i||"body"),n=e?a[s](e):a[s](),a.remove(),n},o.fn.realHeight=function(t,e,i){var n,s,a=null;return s=""===(t="inner"===t||"outer"===t?t:"")?"height":t+"Height",e=!0===e,a=o(this).clone().css({position:"absolute",left:-1e4}).appendTo(i||"body"),n=e?a[s](e):a[s](),a.remove(),n},o.fn.bindMobileEvents=function(){o(this).on("touchstart touchmove touchend touchcancel",function(){var t=(event.changedTouches||event.originalEvent.targetTouches)[0],e="";switch(event.type){case"touchstart":e="mousedown";break;case"touchmove":e="mousemove",event.preventDefault();break;case"touchend":e="mouseup";break;default:return}var i=document.createEvent("MouseEvent");i.initMouseEvent(e,!0,!0,window,1,t.screenX,t.screenY,t.clientX,t.clientY,!1,!1,!1,!1,0,null),t.target.dispatchEvent(i)})}}(jQuery);