jquery.selectareas.min.js

!function(a){a.imageArea=function(b,c){var g,h,j,d=b.options,e=b.$image,f=b.$trigger,i={},k=!0,l=!0,m=[0,0],n=[0,0],o={id:c,x:0,y:0,z:0,height:0,width:0},p=function(){o.z=0,A("blur")},q=function(){b.blurAll(),o.z=100,A()},r=function(){return o},s=function(a){e.trigger(a,[o.id,b.areas()])},t=function(a){var b=a||window.event||{};b.cancelBubble=!0,b.returnValue=!1,b.stopPropagation&&b.stopPropagation(),b.preventDefault&&b.preventDefault()},u=function(){a.each(arguments,function(a,b){v(b)})},v=function(b,c){var d,e;switch(b){case"start":d="mousedown",e="touchstart";break;case"move":d="mousemove",e="touchmove";break;case"stop":d="mouseup",e="touchend";break;default:return}c&&jQuery.isFunction(c)?a(window.document).on(d,c).on(e,c):a(window.document).off(d).off(e)},w=function(){g.css({cursor:"default",width:o.width,height:o.height,left:o.x,top:o.y,"z-index":o.z}),h.css({backgroundPosition:-o.x-1+"px "+(-o.y-1)+"px",cursor:d.allowMove?"move":"default",width:o.width-2>0?o.width-2:0,height:o.height-2>0?o.height-2:0,left:o.x+1,top:o.y+1,"z-index":o.z+2})},x=function(b){d.allowResize&&(b?a.each(i,function(a,b){var c,d,e=Math.round(b.width()/2),f=Math.round(b.height()/2),g=a[0],h=a[a.length-1];c="n"===g?-f:"s"===g?o.height-f-1:Math.round(o.height/2)-f-1,d="e"===h?o.width-e-1:"w"===h?-e:Math.round(o.width/2)-e-1,b.css({display:"block",left:o.x+d,top:o.y+c,"z-index":o.z+1})}):a(".select-areas-resize-handler").each(function(){a(this).css({display:"none"})}))},y=function(a){j&&j.css({display:a?"block":"none",left:o.x+o.width+1,top:o.y-j.outerHeight()-1,"z-index":o.z+1})},z=function(a){g.css({cursor:a}),h.css({cursor:a})},A=function(a){switch(a){case"startSelection":b._refresh(),w(),x(),y(!0);break;case"pickSelection":case"pickResizeHandler":x();break;case"resizeSelection":w(),x(),z("crosshair"),y(!0);break;case"moveSelection":w(),x(),z("move"),y(!0);break;case"blur":w(),x(),y();break;default:w(),x(!0),y(!0)}},B=function(a){t(a),o.width=d.minSize[0],o.height=d.minSize[1],q(),v("move",E),v("stop",H),n=K(a),n[0]+o.width>e.width()&&(n[0]=e.width()-o.width),n[1]+o.height>e.height()&&(n[1]=e.height()-o.height),o.x=n[0],o.y=n[1],A("startSelection")},C=function(a){t(a),q(),v("move",F),v("stop",H);var b=K(a);m[0]=b[0]-o.x,m[1]=b[1]-o.y,A("pickSelection")},D=function(a){t(a),q();var b=a.target.className.split(" ")[1];"w"===b[b.length-1]&&(n[0]+=o.width,o.x=n[0]-o.width),"n"===b[0]&&(n[1]+=o.height,o.y=n[1]-o.height),"n"===b||"s"===b?k=!1:"e"!==b&&"w"!==b||(l=!1),v("move",E),v("stop",H),A("pickResizeHandler")},E=function(a){t(a),q();var b=K(a),c=b[1]-n[1],f=b[0]-n[0];Math.abs(f)<d.minSize[0]&&(f=f>=0?d.minSize[0]:-d.minSize[0]),Math.abs(c)<d.minSize[1]&&(c=c>=0?d.minSize[1]:-d.minSize[1]),(n[0]+f<0||n[0]+f>e.width())&&(f=-f),(n[1]+c<0||n[1]+c>e.height())&&(c=-c),d.maxSize[0]>d.minSize[0]&&d.maxSize[1]>d.minSize[1]&&(Math.abs(f)>d.maxSize[0]&&(f=f>=0?d.maxSize[0]:-d.maxSize[0]),Math.abs(c)>d.maxSize[1]&&(c=c>=0?d.maxSize[1]:-d.maxSize[1])),k&&(o.width=f),l&&(o.height=c),d.aspectRatio&&(f>0&&c>0||f<0&&c<0?k?c=Math.round(f/d.aspectRatio):f=Math.round(c*d.aspectRatio):k?c=-Math.round(f/d.aspectRatio):f=-Math.round(c*d.aspectRatio),n[0]+f>e.width()&&(f=e.width()-n[0],c=c>0?Math.round(f/d.aspectRatio):-Math.round(f/d.aspectRatio)),n[1]+c<0&&(c=-n[1],f=f>0?-Math.round(c*d.aspectRatio):Math.round(c*d.aspectRatio)),n[1]+c>e.height()&&(c=e.height()-n[1],f=f>0?Math.round(c*d.aspectRatio):-Math.round(c*d.aspectRatio)),o.width=f,o.height=c),o.width<0?(o.width=Math.abs(o.width),o.x=n[0]-o.width):o.x=n[0],o.height<0?(o.height=Math.abs(o.height),o.y=n[1]-o.height):o.y=n[1],s("changing"),A("resizeSelection")},F=function(a){if(t(a),d.allowMove){q();var b=K(a);G({x:b[0]-m[0],y:b[1]-m[1]}),s("changing")}},G=function(a){a.x>0?a.x+o.width<e.width()?o.x=a.x:o.x=e.width()-o.width:o.x=0,a.y>0?a.y+o.height<e.height()?o.y=a.y:o.y=e.height()-o.height:o.y=0,A("moveSelection")},H=function(a){t(a),u("move","stop"),n[0]=o.x,n[1]=o.y,k=!0,l=!0,s("changed"),A("releaseSelection")},I=function(d){t(d),h.remove(),g.remove(),a.each(i,function(a,b){b.remove()}),j&&j.remove(),b._remove(c),s("changed")},J=function(b){var c=a(b).offset();return[c.left,c.top]},K=function(a){var b=J(e);a.pageX||(a.originalEvent&&(a=a.originalEvent),a.changedTouches&&(a=a.changedTouches[0]),a.touches&&(a=a.touches[0]));var c=a.pageX-b[0],d=a.pageY-b[1];return c=c<0?0:c>e.width()?e.width():c,d=d<0?0:d>e.height()?e.height():d,[c,d]};if(g=a('<div class="select-areas-outline" />').css({opacity:d.outlineOpacity,position:"absolute"}).insertAfter(f),h=a("<div />").addClass("select-areas-background-area").css({background:"#fff url("+e.attr("src")+") no-repeat",backgroundSize:e.width()+"px "+e.height()+"px",position:"absolute"}).insertAfter(g),d.allowResize&&a.each(["nw","n","ne","e","se","s","sw","w"],function(b,c){i[c]=a('<div class="select-areas-resize-handler '+c+'"/>').css({opacity:.5,position:"absolute",cursor:c+"-resize"}).insertAfter(h).mousedown(D).bind("touchstart",D)}),d.allowDelete){var L=function(a){return a.click(I).bind("touchstart",I).bind("tap",I),a};j=L(a('<div class="delete-area" />')).append(L(a('<div class="select-areas-delete-area" />'))).insertAfter(h)}return d.allowMove&&h.mousedown(C).bind("touchstart",C),q(),{getData:r,startSelection:B,deleteSelection:I,options:d,blur:p,focus:q,nudge:function(a){a.x=o.x,a.y=o.y,a.d&&(a.y=o.y+a.d),a.u&&(a.y=o.y-a.u),a.l&&(a.x=o.x-a.l),a.r&&(a.x=o.x+a.r),G(a),s("changed")},set:function(b,c){o=a.extend(o,b),n[0]=o.x,n[1]=o.y,c||s("changed")},contains:function(a){return a.x>=o.x&&a.x<=o.x+o.width&&a.y>=o.y&&a.y<=o.y+o.height}}},a.imageSelectAreas=function(){},a.imageSelectAreas.prototype.init=function(b,c){var d=this,e={allowEdit:!0,allowMove:!0,allowResize:!0,allowSelect:!0,allowDelete:!0,allowNudge:!0,aspectRatio:0,minSize:[0,0],maxSize:[0,0],width:0,maxAreas:0,outlineOpacity:.5,overlayOpacity:.5,areas:[],onChanging:null,onChanged:null};this.options=a.extend(e,c),this.options.allowEdit||(this.options.allowSelect=this.options.allowMove=this.options.allowResize=this.options.allowDelete=!1),this._areas={},this.$image=a(b),this.ratio=1,this.options.width&&this.$image.width()&&this.options.width!==this.$image.width()&&(this.ratio=this.options.width/this.$image.width(),this.$image.width(this.options.width)),this.options.onChanging&&this.$image.on("changing",this.options.onChanging),this.options.onChanged&&this.$image.on("changed",this.options.onChanged),this.options.onLoaded&&this.$image.on("loaded",this.options.onLoaded),this.$holder=a("<div />").css({position:"relative",width:this.$image.width(),height:this.$image.height()}),this.$image.wrap(this.$holder).css({position:"absolute"}),this.$overlay=a('<div class="select-areas-overlay" />').css({opacity:this.options.overlayOpacity,position:"absolute",width:this.$image.width(),height:this.$image.height()}).insertAfter(this.$image),this.$trigger=a("<div />").css({backgroundColor:"#000000",opacity:0,position:"absolute",width:this.$image.width(),height:this.$image.height()}).insertAfter(this.$overlay),a.each(this.options.areas,function(a,b){d._add(b,!0)}),this.blurAll(),this._refresh(),this.options.allowSelect&&this.$trigger.mousedown(a.proxy(this.newArea,this)).on("touchstart",a.proxy(this.newArea,this)),this.options.allowNudge&&a("html").keydown(function(a){var e,b={37:"l",38:"u",39:"r",40:"d"},c=b[a.which];if(c&&(d._eachArea(function(a){if(100===a.getData().z)return e=a,!1}),e)){var f={};f[c]=1,e.nudge(f)}})},a.imageSelectAreas.prototype._refresh=function(){var a=this.areas().length;this.$overlay.css({display:a?"block":"none"}),a?this.$image.addClass("blurred"):this.$image.removeClass("blurred"),this.$trigger.css({cursor:this.options.allowSelect?"crosshair":"default"})},a.imageSelectAreas.prototype._eachArea=function(b){a.each(this._areas,function(a,c){if(c)return b(c,a)})},a.imageSelectAreas.prototype._remove=function(a){delete this._areas[a],this._refresh()},a.imageSelectAreas.prototype.remove=function(a){this._areas[a]&&this._areas[a].deleteSelection()},a.imageSelectAreas.prototype.newArea=function(b){var c=-1;return this.blurAll(),this.options.maxAreas&&this.options.maxAreas<=this.areas().length?c:(this._eachArea(function(a,b){c=Math.max(c,parseInt(b,10))}),c+=1,this._areas[c]=a.imageArea(this,c),b&&this._areas[c].startSelection(b),c)},a.imageSelectAreas.prototype.set=function(a,b,c){this._areas[a]&&(b.id=a,this._areas[a].set(b,c),this._areas[a].focus())},a.imageSelectAreas.prototype._add=function(a,b){var c=this.newArea();this.set(c,a,b)},a.imageSelectAreas.prototype.add=function(b){var c=this;this.blurAll(),a.isArray(b)?a.each(b,function(a,b){c._add(b)}):this._add(b),this._refresh(),this.options.allowSelect||this.options.allowMove||this.options.allowResize||this.options.allowDelete||this.blurAll()},a.imageSelectAreas.prototype.reset=function(){var a=this;this._eachArea(function(b,c){a.remove(c)}),this._refresh()},a.imageSelectAreas.prototype.destroy=function(){this.reset(),this.$holder.remove(),this.$overlay.remove(),this.$trigger.remove(),this.$image.css("width","").css("position","").unwrap(),this.$image.removeData("mainImageSelectAreas"),this.$image.off("changing changed loaded")},a.imageSelectAreas.prototype.areas=function(){var a=[];return this._eachArea(function(b){a.push(b.getData())}),a},a.imageSelectAreas.prototype.relativeAreas=function(){for(var b=this.areas(),c=[],d=this.ratio,e=function(a){return Math.floor(a/d)},f=0;f<b.length;f++)c[f]=a.extend({},b[f]),c[f].x=e(c[f].x),c[f].y=e(c[f].y),c[f].width=e(c[f].width),c[f].height=e(c[f].height);return c},a.imageSelectAreas.prototype.blurAll=function(){this._eachArea(function(a){a.blur()})},a.imageSelectAreas.prototype.contains=function(a){var b=!1;return this._eachArea(function(c){if(c.contains(a))return b=!0,!1}),b},a.selectAreas=function(b,c){var d=a(b);if(!d.data("mainImageSelectAreas")){var e=new a.imageSelectAreas;e.init(b,c),d.data("mainImageSelectAreas",e),d.trigger("loaded")}return d.data("mainImageSelectAreas")},a.fn.selectAreas=function(b){if(a.imageSelectAreas.prototype[b]){var c=a.imageSelectAreas.prototype[b].apply(a.selectAreas(this),Array.prototype.slice.call(arguments,1));return"undefined"==typeof c?this:c}return"object"!=typeof b&&b?void a.error("Method "+b+" does not exist on jQuery.selectAreas"):(this.each(function(){var c=this,d=new Image;d.onload=function(){a.selectAreas(c,b)},d.src=c.src}),this)}}(jQuery);