diff --git a/jquery.selectareas.js b/jquery.selectareas.js index 4665a02..5d21aa5 100755 --- a/jquery.selectareas.js +++ b/jquery.selectareas.js @@ -70,6 +70,11 @@ default: return; } + + var namespace = '.selectareas'; + browserEvent += namespace; + mobileEvent += namespace; + if (handler && jQuery.isFunction(handler)) { $(window.document).on(browserEvent, handler).on(mobileEvent, handler); } else { diff --git a/jquery.selectareas.min.js b/jquery.selectareas.min.js index 8b4a441..30de702 100644 --- a/jquery.selectareas.min.js +++ b/jquery.selectareas.min.js @@ -1 +1 @@ -!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)=0?d.minSize[0]:-d.minSize[0]),Math.abs(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.width0?a.y+o.heighte.width()?e.width():c,d=d<0?0:d>e.height()?e.height():d,[c,d]};if(g=a('
').css({opacity:d.outlineOpacity,position:"absolute"}).insertAfter(f),h=a("
").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('
').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('
')).append(L(a('
'))).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("
").css({position:"relative",width:this.$image.width(),height:this.$image.height()}),this.$image.wrap(this.$holder).css({position:"absolute"}),this.$overlay=a('
').css({opacity:this.options.overlayOpacity,position:"absolute",width:this.$image.width(),height:this.$image.height()}).insertAfter(this.$image),this.$trigger=a("
").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;f0?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)=0?d.minSize[0]:-d.minSize[0]),Math.abs(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.width0?a.y+o.heighte.width()?e.width():c,d=d<0?0:d>e.height()?e.height():d,[c,d]};if(g=a('
').css({opacity:d.outlineOpacity,position:"absolute"}).insertAfter(f),h=a("
").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('
').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('
')).append(L(a('
'))).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("
").css({position:"relative",width:this.$image.width(),height:this.$image.height()}),this.$image.wrap(this.$holder).css({position:"absolute"}),this.$overlay=a('
').css({opacity:this.options.overlayOpacity,position:"absolute",width:this.$image.width(),height:this.$image.height()}).insertAfter(this.$image),this.$trigger=a("
").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