eliminate Cropper conflicts with jQuery
This commit is contained in:
Zach Prezkuta
parent
032cb5f6a3
commit
127b7a589e
72 changed files with 1659 additions and 1817 deletions
|
|
@ -13,554 +13,556 @@
|
|||
* http://www.opensource.org/licenses/bsd-license.php
|
||||
*
|
||||
* See scriptaculous.js for full scriptaculous licence
|
||||
*
|
||||
* Modified 2013/06/01 Zach P to change $() to $PR() for eliminating conflicts with jQuery
|
||||
*/
|
||||
|
||||
var CropDraggable=Class.create();
|
||||
Object.extend(Object.extend(CropDraggable.prototype,Draggable.prototype),{initialize:function(_1){
|
||||
this.options=Object.extend({drawMethod:function(){
|
||||
}},arguments[1]||{});
|
||||
this.element=$(_1);
|
||||
this.handle=this.element;
|
||||
this.delta=this.currentDelta();
|
||||
this.dragging=false;
|
||||
this.eventMouseDown=this.initDrag.bindAsEventListener(this);
|
||||
Event.observe(this.handle,"mousedown",this.eventMouseDown);
|
||||
Draggables.register(this);
|
||||
},draw:function(_2){
|
||||
var _3=Position.cumulativeOffset(this.element);
|
||||
var d=this.currentDelta();
|
||||
_3[0]-=d[0];
|
||||
_3[1]-=d[1];
|
||||
var p=[0,1].map(function(i){
|
||||
return (_2[i]-_3[i]-this.offset[i]);
|
||||
}.bind(this));
|
||||
this.options.drawMethod(p);
|
||||
}});
|
||||
var Cropper={};
|
||||
Cropper.Img=Class.create();
|
||||
Cropper.Img.prototype={initialize:function(_7,_8){
|
||||
this.options=Object.extend({ratioDim:{x:0,y:0},minWidth:0,minHeight:0,displayOnInit:false,onEndCrop:Prototype.emptyFunction,captureKeys:true,onloadCoords:null,maxWidth:0,maxHeight:0},_8||{});
|
||||
this.img=$(_7);
|
||||
this.clickCoords={x:0,y:0};
|
||||
this.dragging=false;
|
||||
this.resizing=false;
|
||||
this.isWebKit=/Konqueror|Safari|KHTML/.test(navigator.userAgent);
|
||||
this.isIE=/MSIE/.test(navigator.userAgent);
|
||||
this.isOpera8=/Opera\s[1-8]/.test(navigator.userAgent);
|
||||
this.ratioX=0;
|
||||
this.ratioY=0;
|
||||
this.attached=false;
|
||||
this.fixedWidth=(this.options.maxWidth>0&&(this.options.minWidth>=this.options.maxWidth));
|
||||
this.fixedHeight=(this.options.maxHeight>0&&(this.options.minHeight>=this.options.maxHeight));
|
||||
if(typeof this.img=="undefined"){
|
||||
return;
|
||||
}
|
||||
$A(document.getElementsByTagName("script")).each(function(s){
|
||||
if(s.src.match(/cropper\.js/)){
|
||||
var _a=s.src.replace(/cropper\.js(.*)?/,"");
|
||||
var _b=document.createElement("link");
|
||||
_b.rel="stylesheet";
|
||||
_b.type="text/css";
|
||||
_b.href=_a+"cropper.css";
|
||||
_b.media="screen";
|
||||
document.getElementsByTagName("head")[0].appendChild(_b);
|
||||
}
|
||||
});
|
||||
if(this.options.ratioDim.x>0&&this.options.ratioDim.y>0){
|
||||
var _c=this.getGCD(this.options.ratioDim.x,this.options.ratioDim.y);
|
||||
this.ratioX=this.options.ratioDim.x/_c;
|
||||
this.ratioY=this.options.ratioDim.y/_c;
|
||||
}
|
||||
this.subInitialize();
|
||||
if(this.img.complete||this.isWebKit){
|
||||
this.onLoad();
|
||||
}else{
|
||||
Event.observe(this.img,"load",this.onLoad.bindAsEventListener(this));
|
||||
}
|
||||
},getGCD:function(a,b){
|
||||
if(b==0){
|
||||
return a;
|
||||
}
|
||||
return this.getGCD(b,a%b);
|
||||
},onLoad:function(){
|
||||
var _f="imgCrop_";
|
||||
var _10=this.img.parentNode;
|
||||
var _11="";
|
||||
if(this.isOpera8){
|
||||
_11=" opera8";
|
||||
}
|
||||
this.imgWrap=Builder.node("div",{"class":_f+"wrap"+_11});
|
||||
this.north=Builder.node("div",{"class":_f+"overlay "+_f+"north"},[Builder.node("span")]);
|
||||
this.east=Builder.node("div",{"class":_f+"overlay "+_f+"east"},[Builder.node("span")]);
|
||||
this.south=Builder.node("div",{"class":_f+"overlay "+_f+"south"},[Builder.node("span")]);
|
||||
this.west=Builder.node("div",{"class":_f+"overlay "+_f+"west"},[Builder.node("span")]);
|
||||
var _12=[this.north,this.east,this.south,this.west];
|
||||
this.dragArea=Builder.node("div",{"class":_f+"dragArea"},_12);
|
||||
this.handleN=Builder.node("div",{"class":_f+"handle "+_f+"handleN"});
|
||||
this.handleNE=Builder.node("div",{"class":_f+"handle "+_f+"handleNE"});
|
||||
this.handleE=Builder.node("div",{"class":_f+"handle "+_f+"handleE"});
|
||||
this.handleSE=Builder.node("div",{"class":_f+"handle "+_f+"handleSE"});
|
||||
this.handleS=Builder.node("div",{"class":_f+"handle "+_f+"handleS"});
|
||||
this.handleSW=Builder.node("div",{"class":_f+"handle "+_f+"handleSW"});
|
||||
this.handleW=Builder.node("div",{"class":_f+"handle "+_f+"handleW"});
|
||||
this.handleNW=Builder.node("div",{"class":_f+"handle "+_f+"handleNW"});
|
||||
this.selArea=Builder.node("div",{"class":_f+"selArea"},[Builder.node("div",{"class":_f+"marqueeHoriz "+_f+"marqueeNorth"},[Builder.node("span")]),Builder.node("div",{"class":_f+"marqueeVert "+_f+"marqueeEast"},[Builder.node("span")]),Builder.node("div",{"class":_f+"marqueeHoriz "+_f+"marqueeSouth"},[Builder.node("span")]),Builder.node("div",{"class":_f+"marqueeVert "+_f+"marqueeWest"},[Builder.node("span")]),this.handleN,this.handleNE,this.handleE,this.handleSE,this.handleS,this.handleSW,this.handleW,this.handleNW,Builder.node("div",{"class":_f+"clickArea"})]);
|
||||
this.imgWrap.appendChild(this.img);
|
||||
this.imgWrap.appendChild(this.dragArea);
|
||||
this.dragArea.appendChild(this.selArea);
|
||||
this.dragArea.appendChild(Builder.node("div",{"class":_f+"clickArea"}));
|
||||
_10.appendChild(this.imgWrap);
|
||||
this.startDragBind=this.startDrag.bindAsEventListener(this);
|
||||
Event.observe(this.dragArea,"mousedown",this.startDragBind);
|
||||
this.onDragBind=this.onDrag.bindAsEventListener(this);
|
||||
Event.observe(document,"mousemove",this.onDragBind);
|
||||
this.endCropBind=this.endCrop.bindAsEventListener(this);
|
||||
Event.observe(document,"mouseup",this.endCropBind);
|
||||
this.resizeBind=this.startResize.bindAsEventListener(this);
|
||||
this.handles=[this.handleN,this.handleNE,this.handleE,this.handleSE,this.handleS,this.handleSW,this.handleW,this.handleNW];
|
||||
this.registerHandles(true);
|
||||
if(this.options.captureKeys){
|
||||
this.keysBind=this.handleKeys.bindAsEventListener(this);
|
||||
Event.observe(document,"keypress",this.keysBind);
|
||||
}
|
||||
new CropDraggable(this.selArea,{drawMethod:this.moveArea.bindAsEventListener(this)});
|
||||
this.setParams();
|
||||
},registerHandles:function(_13){
|
||||
for(var i=0;i<this.handles.length;i++){
|
||||
var _15=$(this.handles[i]);
|
||||
if(_13){
|
||||
var _16=false;
|
||||
if(this.fixedWidth&&this.fixedHeight){
|
||||
_16=true;
|
||||
}else{
|
||||
if(this.fixedWidth||this.fixedHeight){
|
||||
var _17=_15.className.match(/([S|N][E|W])$/);
|
||||
var _18=_15.className.match(/(E|W)$/);
|
||||
var _19=_15.className.match(/(N|S)$/);
|
||||
if(_17){
|
||||
_16=true;
|
||||
}else{
|
||||
if(this.fixedWidth&&_18){
|
||||
_16=true;
|
||||
}else{
|
||||
if(this.fixedHeight&&_19){
|
||||
_16=true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if(_16){
|
||||
_15.hide();
|
||||
}else{
|
||||
Event.observe(_15,"mousedown",this.resizeBind);
|
||||
}
|
||||
}else{
|
||||
_15.show();
|
||||
Event.stopObserving(_15,"mousedown",this.resizeBind);
|
||||
}
|
||||
}
|
||||
},setParams:function(){
|
||||
this.imgW=this.img.width;
|
||||
this.imgH=this.img.height;
|
||||
$(this.north).setStyle({height:0});
|
||||
$(this.east).setStyle({width:0,height:0});
|
||||
$(this.south).setStyle({height:0});
|
||||
$(this.west).setStyle({width:0,height:0});
|
||||
$(this.imgWrap).setStyle({"width":this.imgW+"px","height":this.imgH+"px"});
|
||||
$(this.selArea).hide();
|
||||
var _1a={x1:0,y1:0,x2:0,y2:0};
|
||||
var _1b=false;
|
||||
if(this.options.onloadCoords!=null){
|
||||
_1a=this.cloneCoords(this.options.onloadCoords);
|
||||
_1b=true;
|
||||
}else{
|
||||
if(this.options.ratioDim.x>0&&this.options.ratioDim.y>0){
|
||||
_1a.x1=Math.ceil((this.imgW-this.options.ratioDim.x)/2);
|
||||
_1a.y1=Math.ceil((this.imgH-this.options.ratioDim.y)/2);
|
||||
_1a.x2=_1a.x1+this.options.ratioDim.x;
|
||||
_1a.y2=_1a.y1+this.options.ratioDim.y;
|
||||
_1b=true;
|
||||
}
|
||||
}
|
||||
this.setAreaCoords(_1a,false,false,1);
|
||||
if(this.options.displayOnInit&&_1b){
|
||||
this.selArea.show();
|
||||
this.drawArea();
|
||||
this.endCrop();
|
||||
}
|
||||
this.attached=true;
|
||||
},remove:function(){
|
||||
if(this.attached){
|
||||
this.attached=false;
|
||||
this.imgWrap.parentNode.insertBefore(this.img,this.imgWrap);
|
||||
this.imgWrap.parentNode.removeChild(this.imgWrap);
|
||||
Event.stopObserving(this.dragArea,"mousedown",this.startDragBind);
|
||||
Event.stopObserving(document,"mousemove",this.onDragBind);
|
||||
Event.stopObserving(document,"mouseup",this.endCropBind);
|
||||
this.registerHandles(false);
|
||||
if(this.options.captureKeys){
|
||||
Event.stopObserving(document,"keypress",this.keysBind);
|
||||
}
|
||||
}
|
||||
},reset:function(){
|
||||
if(!this.attached){
|
||||
this.onLoad();
|
||||
}else{
|
||||
this.setParams();
|
||||
}
|
||||
this.endCrop();
|
||||
},handleKeys:function(e){
|
||||
var dir={x:0,y:0};
|
||||
if(!this.dragging){
|
||||
switch(e.keyCode){
|
||||
case (37):
|
||||
dir.x=-1;
|
||||
break;
|
||||
case (38):
|
||||
dir.y=-1;
|
||||
break;
|
||||
case (39):
|
||||
dir.x=1;
|
||||
break;
|
||||
case (40):
|
||||
dir.y=1;
|
||||
break;
|
||||
}
|
||||
if(dir.x!=0||dir.y!=0){
|
||||
if(e.shiftKey){
|
||||
dir.x*=10;
|
||||
dir.y*=10;
|
||||
}
|
||||
this.moveArea([this.areaCoords.x1+dir.x,this.areaCoords.y1+dir.y]);
|
||||
Event.stop(e);
|
||||
}
|
||||
}
|
||||
},calcW:function(){
|
||||
return (this.areaCoords.x2-this.areaCoords.x1);
|
||||
},calcH:function(){
|
||||
return (this.areaCoords.y2-this.areaCoords.y1);
|
||||
},moveArea:function(_1e){
|
||||
this.setAreaCoords({x1:_1e[0],y1:_1e[1],x2:_1e[0]+this.calcW(),y2:_1e[1]+this.calcH()},true,false);
|
||||
this.drawArea();
|
||||
},cloneCoords:function(_1f){
|
||||
return {x1:_1f.x1,y1:_1f.y1,x2:_1f.x2,y2:_1f.y2};
|
||||
},setAreaCoords:function(_20,_21,_22,_23,_24){
|
||||
if(_21){
|
||||
var _25=_20.x2-_20.x1;
|
||||
var _26=_20.y2-_20.y1;
|
||||
if(_20.x1<0){
|
||||
_20.x1=0;
|
||||
_20.x2=_25;
|
||||
}
|
||||
if(_20.y1<0){
|
||||
_20.y1=0;
|
||||
_20.y2=_26;
|
||||
}
|
||||
if(_20.x2>this.imgW){
|
||||
_20.x2=this.imgW;
|
||||
_20.x1=this.imgW-_25;
|
||||
}
|
||||
if(_20.y2>this.imgH){
|
||||
_20.y2=this.imgH;
|
||||
_20.y1=this.imgH-_26;
|
||||
}
|
||||
}else{
|
||||
if(_20.x1<0){
|
||||
_20.x1=0;
|
||||
}
|
||||
if(_20.y1<0){
|
||||
_20.y1=0;
|
||||
}
|
||||
if(_20.x2>this.imgW){
|
||||
_20.x2=this.imgW;
|
||||
}
|
||||
if(_20.y2>this.imgH){
|
||||
_20.y2=this.imgH;
|
||||
}
|
||||
if(_23!=null){
|
||||
if(this.ratioX>0){
|
||||
this.applyRatio(_20,{x:this.ratioX,y:this.ratioY},_23,_24);
|
||||
}else{
|
||||
if(_22){
|
||||
this.applyRatio(_20,{x:1,y:1},_23,_24);
|
||||
}
|
||||
}
|
||||
var _27=[this.options.minWidth,this.options.minHeight];
|
||||
var _28=[this.options.maxWidth,this.options.maxHeight];
|
||||
if(_27[0]>0||_27[1]>0||_28[0]>0||_28[1]>0){
|
||||
var _29={a1:_20.x1,a2:_20.x2};
|
||||
var _2a={a1:_20.y1,a2:_20.y2};
|
||||
var _2b={min:0,max:this.imgW};
|
||||
var _2c={min:0,max:this.imgH};
|
||||
if((_27[0]!=0||_27[1]!=0)&&_22){
|
||||
if(_27[0]>0){
|
||||
_27[1]=_27[0];
|
||||
}else{
|
||||
if(_27[1]>0){
|
||||
_27[0]=_27[1];
|
||||
}
|
||||
}
|
||||
}
|
||||
if((_28[0]!=0||_28[0]!=0)&&_22){
|
||||
if(_28[0]>0&&_28[0]<=_28[1]){
|
||||
_28[1]=_28[0];
|
||||
}else{
|
||||
if(_28[1]>0&&_28[1]<=_28[0]){
|
||||
_28[0]=_28[1];
|
||||
}
|
||||
}
|
||||
}
|
||||
if(_27[0]>0){
|
||||
this.applyDimRestriction(_29,_27[0],_23.x,_2b,"min");
|
||||
}
|
||||
if(_27[1]>1){
|
||||
this.applyDimRestriction(_2a,_27[1],_23.y,_2c,"min");
|
||||
}
|
||||
if(_28[0]>0){
|
||||
this.applyDimRestriction(_29,_28[0],_23.x,_2b,"max");
|
||||
}
|
||||
if(_28[1]>1){
|
||||
this.applyDimRestriction(_2a,_28[1],_23.y,_2c,"max");
|
||||
}
|
||||
_20={x1:_29.a1,y1:_2a.a1,x2:_29.a2,y2:_2a.a2};
|
||||
}
|
||||
}
|
||||
}
|
||||
this.areaCoords=_20;
|
||||
},applyDimRestriction:function(_2d,val,_2f,_30,_31){
|
||||
var _32;
|
||||
if(_31=="min"){
|
||||
_32=((_2d.a2-_2d.a1)<val);
|
||||
}else{
|
||||
_32=((_2d.a2-_2d.a1)>val);
|
||||
}
|
||||
if(_32){
|
||||
if(_2f==1){
|
||||
_2d.a2=_2d.a1+val;
|
||||
}else{
|
||||
_2d.a1=_2d.a2-val;
|
||||
}
|
||||
if(_2d.a1<_30.min){
|
||||
_2d.a1=_30.min;
|
||||
_2d.a2=val;
|
||||
}else{
|
||||
if(_2d.a2>_30.max){
|
||||
_2d.a1=_30.max-val;
|
||||
_2d.a2=_30.max;
|
||||
}
|
||||
}
|
||||
}
|
||||
},applyRatio:function(_33,_34,_35,_36){
|
||||
var _37;
|
||||
if(_36=="N"||_36=="S"){
|
||||
_37=this.applyRatioToAxis({a1:_33.y1,b1:_33.x1,a2:_33.y2,b2:_33.x2},{a:_34.y,b:_34.x},{a:_35.y,b:_35.x},{min:0,max:this.imgW});
|
||||
_33.x1=_37.b1;
|
||||
_33.y1=_37.a1;
|
||||
_33.x2=_37.b2;
|
||||
_33.y2=_37.a2;
|
||||
}else{
|
||||
_37=this.applyRatioToAxis({a1:_33.x1,b1:_33.y1,a2:_33.x2,b2:_33.y2},{a:_34.x,b:_34.y},{a:_35.x,b:_35.y},{min:0,max:this.imgH});
|
||||
_33.x1=_37.a1;
|
||||
_33.y1=_37.b1;
|
||||
_33.x2=_37.a2;
|
||||
_33.y2=_37.b2;
|
||||
}
|
||||
},applyRatioToAxis:function(_38,_39,_3a,_3b){
|
||||
var _3c=Object.extend(_38,{});
|
||||
var _3d=_3c.a2-_3c.a1;
|
||||
var _3e=Math.floor(_3d*_39.b/_39.a);
|
||||
var _3f;
|
||||
var _40;
|
||||
var _41=null;
|
||||
if(_3a.b==1){
|
||||
_3f=_3c.b1+_3e;
|
||||
if(_3f>_3b.max){
|
||||
_3f=_3b.max;
|
||||
_41=_3f-_3c.b1;
|
||||
}
|
||||
_3c.b2=_3f;
|
||||
}else{
|
||||
_3f=_3c.b2-_3e;
|
||||
if(_3f<_3b.min){
|
||||
_3f=_3b.min;
|
||||
_41=_3f+_3c.b2;
|
||||
}
|
||||
_3c.b1=_3f;
|
||||
}
|
||||
if(_41!=null){
|
||||
_40=Math.floor(_41*_39.a/_39.b);
|
||||
if(_3a.a==1){
|
||||
_3c.a2=_3c.a1+_40;
|
||||
}else{
|
||||
_3c.a1=_3c.a1=_3c.a2-_40;
|
||||
}
|
||||
}
|
||||
return _3c;
|
||||
},drawArea:function(){
|
||||
var _42=this.calcW();
|
||||
var _43=this.calcH();
|
||||
var px="px";
|
||||
var _45=[this.areaCoords.x1+px,this.areaCoords.y1+px,_42+px,_43+px,this.areaCoords.x2+px,this.areaCoords.y2+px,(this.img.width-this.areaCoords.x2)+px,(this.img.height-this.areaCoords.y2)+px];
|
||||
var _46=this.selArea.style;
|
||||
_46.left=_45[0];
|
||||
_46.top=_45[1];
|
||||
_46.width=_45[2];
|
||||
_46.height=_45[3];
|
||||
var _47=Math.ceil((_42-6)/2)+px;
|
||||
var _48=Math.ceil((_43-6)/2)+px;
|
||||
this.handleN.style.left=_47;
|
||||
this.handleE.style.top=_48;
|
||||
this.handleS.style.left=_47;
|
||||
this.handleW.style.top=_48;
|
||||
this.north.style.height=_45[1];
|
||||
var _49=this.east.style;
|
||||
_49.top=_45[1];
|
||||
_49.height=_45[3];
|
||||
_49.left=_45[4];
|
||||
_49.width=_45[6];
|
||||
var _4a=this.south.style;
|
||||
_4a.top=_45[5];
|
||||
_4a.height=_45[7];
|
||||
var _4b=this.west.style;
|
||||
_4b.top=_45[1];
|
||||
_4b.height=_45[3];
|
||||
_4b.width=_45[0];
|
||||
this.subDrawArea();
|
||||
this.forceReRender();
|
||||
},forceReRender:function(){
|
||||
if(this.isIE||this.isWebKit){
|
||||
var n=document.createTextNode(" ");
|
||||
var d,el,fixEL,i;
|
||||
if(this.isIE){
|
||||
fixEl=this.selArea;
|
||||
}else{
|
||||
if(this.isWebKit){
|
||||
fixEl=document.getElementsByClassName("imgCrop_marqueeSouth",this.imgWrap)[0];
|
||||
d=Builder.node("div","");
|
||||
d.style.visibility="hidden";
|
||||
var _4e=["SE","S","SW"];
|
||||
for(i=0;i<_4e.length;i++){
|
||||
el=document.getElementsByClassName("imgCrop_handle"+_4e[i],this.selArea)[0];
|
||||
if(el.childNodes.length){
|
||||
el.removeChild(el.childNodes[0]);
|
||||
}
|
||||
el.appendChild(d);
|
||||
}
|
||||
}
|
||||
}
|
||||
fixEl.appendChild(n);
|
||||
fixEl.removeChild(n);
|
||||
}
|
||||
},startResize:function(e){
|
||||
this.startCoords=this.cloneCoords(this.areaCoords);
|
||||
this.resizing=true;
|
||||
this.resizeHandle=Event.element(e).classNames().toString().replace(/([^N|NE|E|SE|S|SW|W|NW])+/,"");
|
||||
Event.stop(e);
|
||||
},startDrag:function(e){
|
||||
this.selArea.show();
|
||||
this.clickCoords=this.getCurPos(e);
|
||||
this.setAreaCoords({x1:this.clickCoords.x,y1:this.clickCoords.y,x2:this.clickCoords.x,y2:this.clickCoords.y},false,false,null);
|
||||
this.dragging=true;
|
||||
this.onDrag(e);
|
||||
Event.stop(e);
|
||||
},getCurPos:function(e){
|
||||
var el=this.imgWrap,wrapOffsets=Position.cumulativeOffset(el);
|
||||
while(el.nodeName!="BODY"){
|
||||
wrapOffsets[1]-=el.scrollTop||0;
|
||||
wrapOffsets[0]-=el.scrollLeft||0;
|
||||
el=el.parentNode;
|
||||
}
|
||||
return curPos={x:Event.pointerX(e)-wrapOffsets[0],y:Event.pointerY(e)-wrapOffsets[1]};
|
||||
},onDrag:function(e){
|
||||
if(this.dragging||this.resizing){
|
||||
var _54=null;
|
||||
var _55=this.getCurPos(e);
|
||||
var _56=this.cloneCoords(this.areaCoords);
|
||||
var _57={x:1,y:1};
|
||||
if(this.dragging){
|
||||
if(_55.x<this.clickCoords.x){
|
||||
_57.x=-1;
|
||||
}
|
||||
if(_55.y<this.clickCoords.y){
|
||||
_57.y=-1;
|
||||
}
|
||||
this.transformCoords(_55.x,this.clickCoords.x,_56,"x");
|
||||
this.transformCoords(_55.y,this.clickCoords.y,_56,"y");
|
||||
}else{
|
||||
if(this.resizing){
|
||||
_54=this.resizeHandle;
|
||||
if(_54.match(/E/)){
|
||||
this.transformCoords(_55.x,this.startCoords.x1,_56,"x");
|
||||
if(_55.x<this.startCoords.x1){
|
||||
_57.x=-1;
|
||||
}
|
||||
}else{
|
||||
if(_54.match(/W/)){
|
||||
this.transformCoords(_55.x,this.startCoords.x2,_56,"x");
|
||||
if(_55.x<this.startCoords.x2){
|
||||
_57.x=-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
if(_54.match(/N/)){
|
||||
this.transformCoords(_55.y,this.startCoords.y2,_56,"y");
|
||||
if(_55.y<this.startCoords.y2){
|
||||
_57.y=-1;
|
||||
}
|
||||
}else{
|
||||
if(_54.match(/S/)){
|
||||
this.transformCoords(_55.y,this.startCoords.y1,_56,"y");
|
||||
if(_55.y<this.startCoords.y1){
|
||||
_57.y=-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.setAreaCoords(_56,false,e.shiftKey,_57,_54);
|
||||
this.drawArea();
|
||||
Event.stop(e);
|
||||
}
|
||||
},transformCoords:function(_58,_59,_5a,_5b){
|
||||
var _5c=[_58,_59];
|
||||
if(_58>_59){
|
||||
_5c.reverse();
|
||||
}
|
||||
_5a[_5b+"1"]=_5c[0];
|
||||
_5a[_5b+"2"]=_5c[1];
|
||||
},endCrop:function(){
|
||||
this.dragging=false;
|
||||
this.resizing=false;
|
||||
this.options.onEndCrop(this.areaCoords,{width:this.calcW(),height:this.calcH()});
|
||||
},subInitialize:function(){
|
||||
},subDrawArea:function(){
|
||||
}};
|
||||
Cropper.ImgWithPreview=Class.create();
|
||||
Object.extend(Object.extend(Cropper.ImgWithPreview.prototype,Cropper.Img.prototype),{subInitialize:function(){
|
||||
this.hasPreviewImg=false;
|
||||
if(typeof (this.options.previewWrap)!="undefined"&&this.options.minWidth>0&&this.options.minHeight>0){
|
||||
this.previewWrap=$(this.options.previewWrap);
|
||||
this.previewImg=this.img.cloneNode(false);
|
||||
this.previewImg.id="imgCrop_"+this.previewImg.id;
|
||||
this.options.displayOnInit=true;
|
||||
this.hasPreviewImg=true;
|
||||
this.previewWrap.addClassName("imgCrop_previewWrap");
|
||||
this.previewWrap.setStyle({width:this.options.minWidth+"px",height:this.options.minHeight+"px"});
|
||||
this.previewWrap.appendChild(this.previewImg);
|
||||
}
|
||||
},subDrawArea:function(){
|
||||
if(this.hasPreviewImg){
|
||||
var _5d=this.calcW();
|
||||
var _5e=this.calcH();
|
||||
var _5f={x:this.imgW/_5d,y:this.imgH/_5e};
|
||||
var _60={x:_5d/this.options.minWidth,y:_5e/this.options.minHeight};
|
||||
var _61={w:Math.ceil(this.options.minWidth*_5f.x)+"px",h:Math.ceil(this.options.minHeight*_5f.y)+"px",x:"-"+Math.ceil(this.areaCoords.x1/_60.x)+"px",y:"-"+Math.ceil(this.areaCoords.y1/_60.y)+"px"};
|
||||
var _62=this.previewImg.style;
|
||||
_62.width=_61.w;
|
||||
_62.height=_61.h;
|
||||
_62.left=_61.x;
|
||||
_62.top=_61.y;
|
||||
}
|
||||
}});
|
||||
var CropDraggable=Class.create();
|
||||
Object.extend(Object.extend(CropDraggable.prototype,Draggable.prototype),{initialize:function(_1){
|
||||
this.options=Object.extend({drawMethod:function(){
|
||||
}},arguments[1]||{});
|
||||
this.element=$PR(_1);
|
||||
this.handle=this.element;
|
||||
this.delta=this.currentDelta();
|
||||
this.dragging=false;
|
||||
this.eventMouseDown=this.initDrag.bindAsEventListener(this);
|
||||
Event.observe(this.handle,"mousedown",this.eventMouseDown);
|
||||
Draggables.register(this);
|
||||
},draw:function(_2){
|
||||
var _3=Position.cumulativeOffset(this.element);
|
||||
var d=this.currentDelta();
|
||||
_3[0]-=d[0];
|
||||
_3[1]-=d[1];
|
||||
var p=[0,1].map(function(i){
|
||||
return (_2[i]-_3[i]-this.offset[i]);
|
||||
}.bind(this));
|
||||
this.options.drawMethod(p);
|
||||
}});
|
||||
var Cropper={};
|
||||
Cropper.Img=Class.create();
|
||||
Cropper.Img.prototype={initialize:function(_7,_8){
|
||||
this.options=Object.extend({ratioDim:{x:0,y:0},minWidth:0,minHeight:0,displayOnInit:false,onEndCrop:Prototype.emptyFunction,captureKeys:true,onloadCoords:null,maxWidth:0,maxHeight:0},_8||{});
|
||||
this.img=$PR(_7);
|
||||
this.clickCoords={x:0,y:0};
|
||||
this.dragging=false;
|
||||
this.resizing=false;
|
||||
this.isWebKit=/Konqueror|Safari|KHTML/.test(navigator.userAgent);
|
||||
this.isIE=/MSIE/.test(navigator.userAgent);
|
||||
this.isOpera8=/Opera\s[1-8]/.test(navigator.userAgent);
|
||||
this.ratioX=0;
|
||||
this.ratioY=0;
|
||||
this.attached=false;
|
||||
this.fixedWidth=(this.options.maxWidth>0&&(this.options.minWidth>=this.options.maxWidth));
|
||||
this.fixedHeight=(this.options.maxHeight>0&&(this.options.minHeight>=this.options.maxHeight));
|
||||
if(typeof this.img=="undefined"){
|
||||
return;
|
||||
}
|
||||
$A(document.getElementsByTagName("script")).each(function(s){
|
||||
if(s.src.match(/cropper\.js/)){
|
||||
var _a=s.src.replace(/cropper\.js(.*)?/,"");
|
||||
var _b=document.createElement("link");
|
||||
_b.rel="stylesheet";
|
||||
_b.type="text/css";
|
||||
_b.href=_a+"cropper.css";
|
||||
_b.media="screen";
|
||||
document.getElementsByTagName("head")[0].appendChild(_b);
|
||||
}
|
||||
});
|
||||
if(this.options.ratioDim.x>0&&this.options.ratioDim.y>0){
|
||||
var _c=this.getGCD(this.options.ratioDim.x,this.options.ratioDim.y);
|
||||
this.ratioX=this.options.ratioDim.x/_c;
|
||||
this.ratioY=this.options.ratioDim.y/_c;
|
||||
}
|
||||
this.subInitialize();
|
||||
if(this.img.complete||this.isWebKit){
|
||||
this.onLoad();
|
||||
}else{
|
||||
Event.observe(this.img,"load",this.onLoad.bindAsEventListener(this));
|
||||
}
|
||||
},getGCD:function(a,b){
|
||||
if(b==0){
|
||||
return a;
|
||||
}
|
||||
return this.getGCD(b,a%b);
|
||||
},onLoad:function(){
|
||||
var _f="imgCrop_";
|
||||
var _10=this.img.parentNode;
|
||||
var _11="";
|
||||
if(this.isOpera8){
|
||||
_11=" opera8";
|
||||
}
|
||||
this.imgWrap=Builder.node("div",{"class":_f+"wrap"+_11});
|
||||
this.north=Builder.node("div",{"class":_f+"overlay "+_f+"north"},[Builder.node("span")]);
|
||||
this.east=Builder.node("div",{"class":_f+"overlay "+_f+"east"},[Builder.node("span")]);
|
||||
this.south=Builder.node("div",{"class":_f+"overlay "+_f+"south"},[Builder.node("span")]);
|
||||
this.west=Builder.node("div",{"class":_f+"overlay "+_f+"west"},[Builder.node("span")]);
|
||||
var _12=[this.north,this.east,this.south,this.west];
|
||||
this.dragArea=Builder.node("div",{"class":_f+"dragArea"},_12);
|
||||
this.handleN=Builder.node("div",{"class":_f+"handle "+_f+"handleN"});
|
||||
this.handleNE=Builder.node("div",{"class":_f+"handle "+_f+"handleNE"});
|
||||
this.handleE=Builder.node("div",{"class":_f+"handle "+_f+"handleE"});
|
||||
this.handleSE=Builder.node("div",{"class":_f+"handle "+_f+"handleSE"});
|
||||
this.handleS=Builder.node("div",{"class":_f+"handle "+_f+"handleS"});
|
||||
this.handleSW=Builder.node("div",{"class":_f+"handle "+_f+"handleSW"});
|
||||
this.handleW=Builder.node("div",{"class":_f+"handle "+_f+"handleW"});
|
||||
this.handleNW=Builder.node("div",{"class":_f+"handle "+_f+"handleNW"});
|
||||
this.selArea=Builder.node("div",{"class":_f+"selArea"},[Builder.node("div",{"class":_f+"marqueeHoriz "+_f+"marqueeNorth"},[Builder.node("span")]),Builder.node("div",{"class":_f+"marqueeVert "+_f+"marqueeEast"},[Builder.node("span")]),Builder.node("div",{"class":_f+"marqueeHoriz "+_f+"marqueeSouth"},[Builder.node("span")]),Builder.node("div",{"class":_f+"marqueeVert "+_f+"marqueeWest"},[Builder.node("span")]),this.handleN,this.handleNE,this.handleE,this.handleSE,this.handleS,this.handleSW,this.handleW,this.handleNW,Builder.node("div",{"class":_f+"clickArea"})]);
|
||||
this.imgWrap.appendChild(this.img);
|
||||
this.imgWrap.appendChild(this.dragArea);
|
||||
this.dragArea.appendChild(this.selArea);
|
||||
this.dragArea.appendChild(Builder.node("div",{"class":_f+"clickArea"}));
|
||||
_10.appendChild(this.imgWrap);
|
||||
this.startDragBind=this.startDrag.bindAsEventListener(this);
|
||||
Event.observe(this.dragArea,"mousedown",this.startDragBind);
|
||||
this.onDragBind=this.onDrag.bindAsEventListener(this);
|
||||
Event.observe(document,"mousemove",this.onDragBind);
|
||||
this.endCropBind=this.endCrop.bindAsEventListener(this);
|
||||
Event.observe(document,"mouseup",this.endCropBind);
|
||||
this.resizeBind=this.startResize.bindAsEventListener(this);
|
||||
this.handles=[this.handleN,this.handleNE,this.handleE,this.handleSE,this.handleS,this.handleSW,this.handleW,this.handleNW];
|
||||
this.registerHandles(true);
|
||||
if(this.options.captureKeys){
|
||||
this.keysBind=this.handleKeys.bindAsEventListener(this);
|
||||
Event.observe(document,"keypress",this.keysBind);
|
||||
}
|
||||
new CropDraggable(this.selArea,{drawMethod:this.moveArea.bindAsEventListener(this)});
|
||||
this.setParams();
|
||||
},registerHandles:function(_13){
|
||||
for(var i=0;i<this.handles.length;i++){
|
||||
var _15=$PR(this.handles[i]);
|
||||
if(_13){
|
||||
var _16=false;
|
||||
if(this.fixedWidth&&this.fixedHeight){
|
||||
_16=true;
|
||||
}else{
|
||||
if(this.fixedWidth||this.fixedHeight){
|
||||
var _17=_15.className.match(/([S|N][E|W])$/);
|
||||
var _18=_15.className.match(/(E|W)$/);
|
||||
var _19=_15.className.match(/(N|S)$/);
|
||||
if(_17){
|
||||
_16=true;
|
||||
}else{
|
||||
if(this.fixedWidth&&_18){
|
||||
_16=true;
|
||||
}else{
|
||||
if(this.fixedHeight&&_19){
|
||||
_16=true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if(_16){
|
||||
_15.hide();
|
||||
}else{
|
||||
Event.observe(_15,"mousedown",this.resizeBind);
|
||||
}
|
||||
}else{
|
||||
_15.show();
|
||||
Event.stopObserving(_15,"mousedown",this.resizeBind);
|
||||
}
|
||||
}
|
||||
},setParams:function(){
|
||||
this.imgW=this.img.width;
|
||||
this.imgH=this.img.height;
|
||||
$PR(this.north).setStyle({height:0});
|
||||
$PR(this.east).setStyle({width:0,height:0});
|
||||
$PR(this.south).setStyle({height:0});
|
||||
$PR(this.west).setStyle({width:0,height:0});
|
||||
$PR(this.imgWrap).setStyle({"width":this.imgW+"px","height":this.imgH+"px"});
|
||||
$PR(this.selArea).hide();
|
||||
var _1a={x1:0,y1:0,x2:0,y2:0};
|
||||
var _1b=false;
|
||||
if(this.options.onloadCoords!=null){
|
||||
_1a=this.cloneCoords(this.options.onloadCoords);
|
||||
_1b=true;
|
||||
}else{
|
||||
if(this.options.ratioDim.x>0&&this.options.ratioDim.y>0){
|
||||
_1a.x1=Math.ceil((this.imgW-this.options.ratioDim.x)/2);
|
||||
_1a.y1=Math.ceil((this.imgH-this.options.ratioDim.y)/2);
|
||||
_1a.x2=_1a.x1+this.options.ratioDim.x;
|
||||
_1a.y2=_1a.y1+this.options.ratioDim.y;
|
||||
_1b=true;
|
||||
}
|
||||
}
|
||||
this.setAreaCoords(_1a,false,false,1);
|
||||
if(this.options.displayOnInit&&_1b){
|
||||
this.selArea.show();
|
||||
this.drawArea();
|
||||
this.endCrop();
|
||||
}
|
||||
this.attached=true;
|
||||
},remove:function(){
|
||||
if(this.attached){
|
||||
this.attached=false;
|
||||
this.imgWrap.parentNode.insertBefore(this.img,this.imgWrap);
|
||||
this.imgWrap.parentNode.removeChild(this.imgWrap);
|
||||
Event.stopObserving(this.dragArea,"mousedown",this.startDragBind);
|
||||
Event.stopObserving(document,"mousemove",this.onDragBind);
|
||||
Event.stopObserving(document,"mouseup",this.endCropBind);
|
||||
this.registerHandles(false);
|
||||
if(this.options.captureKeys){
|
||||
Event.stopObserving(document,"keypress",this.keysBind);
|
||||
}
|
||||
}
|
||||
},reset:function(){
|
||||
if(!this.attached){
|
||||
this.onLoad();
|
||||
}else{
|
||||
this.setParams();
|
||||
}
|
||||
this.endCrop();
|
||||
},handleKeys:function(e){
|
||||
var dir={x:0,y:0};
|
||||
if(!this.dragging){
|
||||
switch(e.keyCode){
|
||||
case (37):
|
||||
dir.x=-1;
|
||||
break;
|
||||
case (38):
|
||||
dir.y=-1;
|
||||
break;
|
||||
case (39):
|
||||
dir.x=1;
|
||||
break;
|
||||
case (40):
|
||||
dir.y=1;
|
||||
break;
|
||||
}
|
||||
if(dir.x!=0||dir.y!=0){
|
||||
if(e.shiftKey){
|
||||
dir.x*=10;
|
||||
dir.y*=10;
|
||||
}
|
||||
this.moveArea([this.areaCoords.x1+dir.x,this.areaCoords.y1+dir.y]);
|
||||
Event.stop(e);
|
||||
}
|
||||
}
|
||||
},calcW:function(){
|
||||
return (this.areaCoords.x2-this.areaCoords.x1);
|
||||
},calcH:function(){
|
||||
return (this.areaCoords.y2-this.areaCoords.y1);
|
||||
},moveArea:function(_1e){
|
||||
this.setAreaCoords({x1:_1e[0],y1:_1e[1],x2:_1e[0]+this.calcW(),y2:_1e[1]+this.calcH()},true,false);
|
||||
this.drawArea();
|
||||
},cloneCoords:function(_1f){
|
||||
return {x1:_1f.x1,y1:_1f.y1,x2:_1f.x2,y2:_1f.y2};
|
||||
},setAreaCoords:function(_20,_21,_22,_23,_24){
|
||||
if(_21){
|
||||
var _25=_20.x2-_20.x1;
|
||||
var _26=_20.y2-_20.y1;
|
||||
if(_20.x1<0){
|
||||
_20.x1=0;
|
||||
_20.x2=_25;
|
||||
}
|
||||
if(_20.y1<0){
|
||||
_20.y1=0;
|
||||
_20.y2=_26;
|
||||
}
|
||||
if(_20.x2>this.imgW){
|
||||
_20.x2=this.imgW;
|
||||
_20.x1=this.imgW-_25;
|
||||
}
|
||||
if(_20.y2>this.imgH){
|
||||
_20.y2=this.imgH;
|
||||
_20.y1=this.imgH-_26;
|
||||
}
|
||||
}else{
|
||||
if(_20.x1<0){
|
||||
_20.x1=0;
|
||||
}
|
||||
if(_20.y1<0){
|
||||
_20.y1=0;
|
||||
}
|
||||
if(_20.x2>this.imgW){
|
||||
_20.x2=this.imgW;
|
||||
}
|
||||
if(_20.y2>this.imgH){
|
||||
_20.y2=this.imgH;
|
||||
}
|
||||
if(_23!=null){
|
||||
if(this.ratioX>0){
|
||||
this.applyRatio(_20,{x:this.ratioX,y:this.ratioY},_23,_24);
|
||||
}else{
|
||||
if(_22){
|
||||
this.applyRatio(_20,{x:1,y:1},_23,_24);
|
||||
}
|
||||
}
|
||||
var _27=[this.options.minWidth,this.options.minHeight];
|
||||
var _28=[this.options.maxWidth,this.options.maxHeight];
|
||||
if(_27[0]>0||_27[1]>0||_28[0]>0||_28[1]>0){
|
||||
var _29={a1:_20.x1,a2:_20.x2};
|
||||
var _2a={a1:_20.y1,a2:_20.y2};
|
||||
var _2b={min:0,max:this.imgW};
|
||||
var _2c={min:0,max:this.imgH};
|
||||
if((_27[0]!=0||_27[1]!=0)&&_22){
|
||||
if(_27[0]>0){
|
||||
_27[1]=_27[0];
|
||||
}else{
|
||||
if(_27[1]>0){
|
||||
_27[0]=_27[1];
|
||||
}
|
||||
}
|
||||
}
|
||||
if((_28[0]!=0||_28[0]!=0)&&_22){
|
||||
if(_28[0]>0&&_28[0]<=_28[1]){
|
||||
_28[1]=_28[0];
|
||||
}else{
|
||||
if(_28[1]>0&&_28[1]<=_28[0]){
|
||||
_28[0]=_28[1];
|
||||
}
|
||||
}
|
||||
}
|
||||
if(_27[0]>0){
|
||||
this.applyDimRestriction(_29,_27[0],_23.x,_2b,"min");
|
||||
}
|
||||
if(_27[1]>1){
|
||||
this.applyDimRestriction(_2a,_27[1],_23.y,_2c,"min");
|
||||
}
|
||||
if(_28[0]>0){
|
||||
this.applyDimRestriction(_29,_28[0],_23.x,_2b,"max");
|
||||
}
|
||||
if(_28[1]>1){
|
||||
this.applyDimRestriction(_2a,_28[1],_23.y,_2c,"max");
|
||||
}
|
||||
_20={x1:_29.a1,y1:_2a.a1,x2:_29.a2,y2:_2a.a2};
|
||||
}
|
||||
}
|
||||
}
|
||||
this.areaCoords=_20;
|
||||
},applyDimRestriction:function(_2d,val,_2f,_30,_31){
|
||||
var _32;
|
||||
if(_31=="min"){
|
||||
_32=((_2d.a2-_2d.a1)<val);
|
||||
}else{
|
||||
_32=((_2d.a2-_2d.a1)>val);
|
||||
}
|
||||
if(_32){
|
||||
if(_2f==1){
|
||||
_2d.a2=_2d.a1+val;
|
||||
}else{
|
||||
_2d.a1=_2d.a2-val;
|
||||
}
|
||||
if(_2d.a1<_30.min){
|
||||
_2d.a1=_30.min;
|
||||
_2d.a2=val;
|
||||
}else{
|
||||
if(_2d.a2>_30.max){
|
||||
_2d.a1=_30.max-val;
|
||||
_2d.a2=_30.max;
|
||||
}
|
||||
}
|
||||
}
|
||||
},applyRatio:function(_33,_34,_35,_36){
|
||||
var _37;
|
||||
if(_36=="N"||_36=="S"){
|
||||
_37=this.applyRatioToAxis({a1:_33.y1,b1:_33.x1,a2:_33.y2,b2:_33.x2},{a:_34.y,b:_34.x},{a:_35.y,b:_35.x},{min:0,max:this.imgW});
|
||||
_33.x1=_37.b1;
|
||||
_33.y1=_37.a1;
|
||||
_33.x2=_37.b2;
|
||||
_33.y2=_37.a2;
|
||||
}else{
|
||||
_37=this.applyRatioToAxis({a1:_33.x1,b1:_33.y1,a2:_33.x2,b2:_33.y2},{a:_34.x,b:_34.y},{a:_35.x,b:_35.y},{min:0,max:this.imgH});
|
||||
_33.x1=_37.a1;
|
||||
_33.y1=_37.b1;
|
||||
_33.x2=_37.a2;
|
||||
_33.y2=_37.b2;
|
||||
}
|
||||
},applyRatioToAxis:function(_38,_39,_3a,_3b){
|
||||
var _3c=Object.extend(_38,{});
|
||||
var _3d=_3c.a2-_3c.a1;
|
||||
var _3e=Math.floor(_3d*_39.b/_39.a);
|
||||
var _3f;
|
||||
var _40;
|
||||
var _41=null;
|
||||
if(_3a.b==1){
|
||||
_3f=_3c.b1+_3e;
|
||||
if(_3f>_3b.max){
|
||||
_3f=_3b.max;
|
||||
_41=_3f-_3c.b1;
|
||||
}
|
||||
_3c.b2=_3f;
|
||||
}else{
|
||||
_3f=_3c.b2-_3e;
|
||||
if(_3f<_3b.min){
|
||||
_3f=_3b.min;
|
||||
_41=_3f+_3c.b2;
|
||||
}
|
||||
_3c.b1=_3f;
|
||||
}
|
||||
if(_41!=null){
|
||||
_40=Math.floor(_41*_39.a/_39.b);
|
||||
if(_3a.a==1){
|
||||
_3c.a2=_3c.a1+_40;
|
||||
}else{
|
||||
_3c.a1=_3c.a1=_3c.a2-_40;
|
||||
}
|
||||
}
|
||||
return _3c;
|
||||
},drawArea:function(){
|
||||
var _42=this.calcW();
|
||||
var _43=this.calcH();
|
||||
var px="px";
|
||||
var _45=[this.areaCoords.x1+px,this.areaCoords.y1+px,_42+px,_43+px,this.areaCoords.x2+px,this.areaCoords.y2+px,(this.img.width-this.areaCoords.x2)+px,(this.img.height-this.areaCoords.y2)+px];
|
||||
var _46=this.selArea.style;
|
||||
_46.left=_45[0];
|
||||
_46.top=_45[1];
|
||||
_46.width=_45[2];
|
||||
_46.height=_45[3];
|
||||
var _47=Math.ceil((_42-6)/2)+px;
|
||||
var _48=Math.ceil((_43-6)/2)+px;
|
||||
this.handleN.style.left=_47;
|
||||
this.handleE.style.top=_48;
|
||||
this.handleS.style.left=_47;
|
||||
this.handleW.style.top=_48;
|
||||
this.north.style.height=_45[1];
|
||||
var _49=this.east.style;
|
||||
_49.top=_45[1];
|
||||
_49.height=_45[3];
|
||||
_49.left=_45[4];
|
||||
_49.width=_45[6];
|
||||
var _4a=this.south.style;
|
||||
_4a.top=_45[5];
|
||||
_4a.height=_45[7];
|
||||
var _4b=this.west.style;
|
||||
_4b.top=_45[1];
|
||||
_4b.height=_45[3];
|
||||
_4b.width=_45[0];
|
||||
this.subDrawArea();
|
||||
this.forceReRender();
|
||||
},forceReRender:function(){
|
||||
if(this.isIE||this.isWebKit){
|
||||
var n=document.createTextNode(" ");
|
||||
var d,el,fixEL,i;
|
||||
if(this.isIE){
|
||||
fixEl=this.selArea;
|
||||
}else{
|
||||
if(this.isWebKit){
|
||||
fixEl=document.getElementsByClassName("imgCrop_marqueeSouth",this.imgWrap)[0];
|
||||
d=Builder.node("div","");
|
||||
d.style.visibility="hidden";
|
||||
var _4e=["SE","S","SW"];
|
||||
for(i=0;i<_4e.length;i++){
|
||||
el=document.getElementsByClassName("imgCrop_handle"+_4e[i],this.selArea)[0];
|
||||
if(el.childNodes.length){
|
||||
el.removeChild(el.childNodes[0]);
|
||||
}
|
||||
el.appendChild(d);
|
||||
}
|
||||
}
|
||||
}
|
||||
fixEl.appendChild(n);
|
||||
fixEl.removeChild(n);
|
||||
}
|
||||
},startResize:function(e){
|
||||
this.startCoords=this.cloneCoords(this.areaCoords);
|
||||
this.resizing=true;
|
||||
this.resizeHandle=Event.element(e).classNames().toString().replace(/([^N|NE|E|SE|S|SW|W|NW])+/,"");
|
||||
Event.stop(e);
|
||||
},startDrag:function(e){
|
||||
this.selArea.show();
|
||||
this.clickCoords=this.getCurPos(e);
|
||||
this.setAreaCoords({x1:this.clickCoords.x,y1:this.clickCoords.y,x2:this.clickCoords.x,y2:this.clickCoords.y},false,false,null);
|
||||
this.dragging=true;
|
||||
this.onDrag(e);
|
||||
Event.stop(e);
|
||||
},getCurPos:function(e){
|
||||
var el=this.imgWrap,wrapOffsets=Position.cumulativeOffset(el);
|
||||
while(el.nodeName!="BODY"){
|
||||
wrapOffsets[1]-=el.scrollTop||0;
|
||||
wrapOffsets[0]-=el.scrollLeft||0;
|
||||
el=el.parentNode;
|
||||
}
|
||||
return curPos={x:Event.pointerX(e)-wrapOffsets[0],y:Event.pointerY(e)-wrapOffsets[1]};
|
||||
},onDrag:function(e){
|
||||
if(this.dragging||this.resizing){
|
||||
var _54=null;
|
||||
var _55=this.getCurPos(e);
|
||||
var _56=this.cloneCoords(this.areaCoords);
|
||||
var _57={x:1,y:1};
|
||||
if(this.dragging){
|
||||
if(_55.x<this.clickCoords.x){
|
||||
_57.x=-1;
|
||||
}
|
||||
if(_55.y<this.clickCoords.y){
|
||||
_57.y=-1;
|
||||
}
|
||||
this.transformCoords(_55.x,this.clickCoords.x,_56,"x");
|
||||
this.transformCoords(_55.y,this.clickCoords.y,_56,"y");
|
||||
}else{
|
||||
if(this.resizing){
|
||||
_54=this.resizeHandle;
|
||||
if(_54.match(/E/)){
|
||||
this.transformCoords(_55.x,this.startCoords.x1,_56,"x");
|
||||
if(_55.x<this.startCoords.x1){
|
||||
_57.x=-1;
|
||||
}
|
||||
}else{
|
||||
if(_54.match(/W/)){
|
||||
this.transformCoords(_55.x,this.startCoords.x2,_56,"x");
|
||||
if(_55.x<this.startCoords.x2){
|
||||
_57.x=-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
if(_54.match(/N/)){
|
||||
this.transformCoords(_55.y,this.startCoords.y2,_56,"y");
|
||||
if(_55.y<this.startCoords.y2){
|
||||
_57.y=-1;
|
||||
}
|
||||
}else{
|
||||
if(_54.match(/S/)){
|
||||
this.transformCoords(_55.y,this.startCoords.y1,_56,"y");
|
||||
if(_55.y<this.startCoords.y1){
|
||||
_57.y=-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.setAreaCoords(_56,false,e.shiftKey,_57,_54);
|
||||
this.drawArea();
|
||||
Event.stop(e);
|
||||
}
|
||||
},transformCoords:function(_58,_59,_5a,_5b){
|
||||
var _5c=[_58,_59];
|
||||
if(_58>_59){
|
||||
_5c.reverse();
|
||||
}
|
||||
_5a[_5b+"1"]=_5c[0];
|
||||
_5a[_5b+"2"]=_5c[1];
|
||||
},endCrop:function(){
|
||||
this.dragging=false;
|
||||
this.resizing=false;
|
||||
this.options.onEndCrop(this.areaCoords,{width:this.calcW(),height:this.calcH()});
|
||||
},subInitialize:function(){
|
||||
},subDrawArea:function(){
|
||||
}};
|
||||
Cropper.ImgWithPreview=Class.create();
|
||||
Object.extend(Object.extend(Cropper.ImgWithPreview.prototype,Cropper.Img.prototype),{subInitialize:function(){
|
||||
this.hasPreviewImg=false;
|
||||
if(typeof (this.options.previewWrap)!="undefined"&&this.options.minWidth>0&&this.options.minHeight>0){
|
||||
this.previewWrap=$PR(this.options.previewWrap);
|
||||
this.previewImg=this.img.cloneNode(false);
|
||||
this.previewImg.id="imgCrop_"+this.previewImg.id;
|
||||
this.options.displayOnInit=true;
|
||||
this.hasPreviewImg=true;
|
||||
this.previewWrap.addClassName("imgCrop_previewWrap");
|
||||
this.previewWrap.setStyle({width:this.options.minWidth+"px",height:this.options.minHeight+"px"});
|
||||
this.previewWrap.appendChild(this.previewImg);
|
||||
}
|
||||
},subDrawArea:function(){
|
||||
if(this.hasPreviewImg){
|
||||
var _5d=this.calcW();
|
||||
var _5e=this.calcH();
|
||||
var _5f={x:this.imgW/_5d,y:this.imgH/_5e};
|
||||
var _60={x:_5d/this.options.minWidth,y:_5e/this.options.minHeight};
|
||||
var _61={w:Math.ceil(this.options.minWidth*_5f.x)+"px",h:Math.ceil(this.options.minHeight*_5f.y)+"px",x:"-"+Math.ceil(this.areaCoords.x1/_60.x)+"px",y:"-"+Math.ceil(this.areaCoords.y1/_60.y)+"px"};
|
||||
var _62=this.previewImg.style;
|
||||
_62.width=_61.w;
|
||||
_62.height=_61.h;
|
||||
_62.left=_61.x;
|
||||
_62.top=_61.y;
|
||||
}
|
||||
}});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue