/******************************************************************************** * Classe : CropCrop - Version 1.10 * * Croppeur d'image SIMPLE et sans superflux (ni fichier additionnels * * * * Auteur: Lejosne Arnaud, Développeur. * * * * Date : nuit du 23 au 24 Janvier 2010 * * * * Arnaud Lejosne - Tous droits réservés * * * ********************************************************************************/ var CropCrop = new Class({ Implements: [Events, Options], options : { coords:{x:100,y:100,w:150,h:150}, minimum:{w:50,h:50}, prop:false /* Events : dblclick : lors du double click sur la selection move : lors du deplacement de la selection */ }, initialize: function(cropContainer,imageUrl,options) { this.setOptions(options); this.cropContainer = cropContainer; this.cropContainer.setStyle('position','relative'); this.image = new Asset.image(imageUrl,{'onload':this.initCrop.bind(this)}); this.cropContainer.adopt(this.image); }, initCrop: function(image){ if(this.options.coords.w > image.width) this.options.coords.w = image.width; if(this.options.coords.h > image.height) this.options.coords.h = image.height; this.propRatio = this.options.coords.w/this.options.coords.h; this.fireEvent('imageLoaded',image); this.cropRectangle = new Element('div',{styles:{width:this.options.coords.w,height:this.options.coords.h,left:this.options.coords.x,top:this.options.coords.y,position:'absolute',cursor:'pointer','background-image':'url(blank.gif)',opacity:0.1}}); this.topLeft = new Element('div',{styles:{'background-color':'#CCCCCC',border:'1px solid #000000',width:10,height:10,position:'absolute',top:this.options.coords.y-5,left:this.options.coords.x-5,'z-index':10,cursor:'nw-resize'}}); this.topRight = new Element('div',{styles:{'background-color':'#CCCCCC',border:'1px solid #000000',width:10,height:10,position:'absolute',top:this.options.coords.y-5,left:this.options.coords.x+this.options.coords.w-5,'z-index':10,cursor:'ne-resize'}}); this.bottomLeft = new Element('div',{styles:{'background-color':'#CCCCCC',border:'1px solid #000000',width:10,height:10,position:'absolute',top:this.options.coords.y+this.options.coords.h-5,left:this.options.coords.x-5,'z-index':10,cursor:'sw-resize'}}); this.bottomRight = new Element('div',{styles:{'background-color':'#CCCCCC',border:'1px solid #000000',width:10,height:10,position:'absolute',top:this.options.coords.y+this.options.coords.h-5,left:this.options.coords.w+this.options.coords.x-5,'z-index':10,cursor:'se-resize'}}); var bottomHeight = image.height-this.options.coords.y-this.options.coords.h; var rightWidth = image.width-this.options.coords.x-this.options.coords.w; this.topFrame = new Element('div',{styles:{width:image.width-this.options.coords.x,left:this.options.coords.x,height:this.options.coords.y,position:'absolute',opacity:0.6,top:0,'background-color':'black'}}); this.leftFrame = new Element('div',{styles:{height:image.height-bottomHeight,width:this.options.coords.x,position:'absolute',opacity:0.6,top:0,'background-color':'black'}}); this.bottomFrame = new Element('div',{styles:{height:bottomHeight,top:image.height-bottomHeight,width:image.width-rightWidth,position:'absolute',opacity:0.6,'background-color':'black'}}); this.rightFrame = new Element('div',{styles:{width:rightWidth,top:this.options.coords.y,left:image.width-rightWidth,height:image.height-this.options.coords.y,position:'absolute',opacity:0.6,'background-color':'black'}}); this.cropContainer.adopt(this.topLeft,this.topRight, this.bottomLeft,this.bottomRight,this.cropRectangle,this.topFrame,this.leftFrame,this.rightFrame,this.bottomFrame); this.mainDragInstance = new Drag(this.cropRectangle,{limit:{x:[0,image.width-this.options.coords.w],y:[0,image.height-this.options.coords.h]},onDrag:this.cropMove.bind(this)}); this.topLeftDragInstance = new Drag(this.topLeft,{limit:{x:[-5,this.options.coords.x+this.options.coords.w-5],y:[-5,this.options.coords.y+this.options.coords.h-5]},onDrag:this.resizeTopLeft.bind(this)}); this.topRightDragInstance = new Drag(this.topRight,{limit:{x:[this.options.coords.x-5,image.width-5],y:[-5,this.options.coords.y+this.options.coords.h-5]},onDrag:this.resizeTopRight.bind(this)}); this.bottomRightDragInstance = new Drag(this.bottomRight,{limit:{x:[this.options.coords.x-5,image.width-5],y:[this.options.coords.y-5,image.height-5]},onDrag:this.resizeBottomRight.bind(this)}); this.bottomLeftDragInstance = new Drag(this.bottomLeft,{limit:{x:[-5,this.options.coords.x+this.options.coords.w-5],y:[this.options.coords.y-5,image.height-5]},onDrag:this.resizeBottomLeft.bind(this)}); this.cropRectangle.addEvent('dblclick',function(){this.fireEvent('dblclick',this.getCoords());}.bind(this)); }, cropMove:function(r){ this.topLeft.setStyles({top:parseInt(this.cropRectangle.getStyle('top'))-5,left:parseInt(this.cropRectangle.getStyle('left'))-5}); this.topRight.setStyles({top:parseInt(this.cropRectangle.getStyle('top'))-5,left:parseInt(this.cropRectangle.getStyle('left'))+parseInt(this.cropRectangle.getStyle('width'))-5}); this.bottomLeft.setStyles({top:parseInt(this.cropRectangle.getStyle('top'))+parseInt(this.cropRectangle.getStyle('height'))-5,left:parseInt(this.cropRectangle.getStyle('left'))-5}); this.bottomRight.setStyles({top:parseInt(this.cropRectangle.getStyle('top'))+parseInt(this.cropRectangle.getStyle('height'))-5,left:parseInt(this.cropRectangle.getStyle('left'))+parseInt(this.cropRectangle.getStyle('width'))-5}); this.refixShadow(); this.reinitHandles(); }, refixShadow:function(){ bottomHeight = this.image.height-parseInt(this.cropRectangle.getStyle('top'))-parseInt(this.cropRectangle.getStyle('height')); rightWidth = this.image.width-parseInt(this.cropRectangle.getStyle('left'))-parseInt(this.cropRectangle.getStyle('width')); this.topFrame.setStyles({width:this.image.width-parseInt(this.cropRectangle.getStyle('left')),left:this.cropRectangle.getStyle('left'),height:this.cropRectangle.getStyle('top')}) this.leftFrame.setStyles({height:this.image.height-bottomHeight,width:parseInt(this.cropRectangle.getStyle('left'))}); this.bottomFrame.setStyles({height:bottomHeight,top:this.image.height-bottomHeight,width:this.image.width-rightWidth}); this.rightFrame.setStyles({width:rightWidth,top:parseInt(this.cropRectangle.getStyle('top')),left:this.image.width-rightWidth,height:this.image.height-parseInt(this.cropRectangle.getStyle('top'))}); this.fireEvent('move',[this.getCoords(), this.image]); }, reinitHandles:function(){ this.topLeftDragInstance.detach(); this.topLeftDragInstance = new Drag(this.topLeft,{limit:{x:[-5,parseInt(this.cropRectangle.getStyle('left'))+parseInt(this.cropRectangle.getStyle('width'))-5],y:[-5,parseInt(this.cropRectangle.getStyle('top'))+parseInt(this.cropRectangle.getStyle('height'))-5]},onDrag:this.resizeTopLeft.bind(this)}); this.topRightDragInstance.detach(); this.topRightDragInstance = new Drag(this.topRight,{limit:{x:[parseInt(this.cropRectangle.getStyle('left'))-5,this.image.width-5],y:[-5,parseInt(this.cropRectangle.getStyle('top'))+parseInt(this.cropRectangle.getStyle('height'))-5]},onDrag:this.resizeTopRight.bind(this)}); this.bottomRightDragInstance.detach(); this.bottomRightDragInstance = new Drag(this.bottomRight,{limit:{x:[parseInt(this.cropRectangle.getStyle('left'))-5,this.image.width-5],y:[parseInt(this.cropRectangle.getStyle('top'))-5,this.image.height-5]},onDrag:this.resizeBottomRight.bind(this)}); this.bottomLeftDragInstance.detach(); this.bottomLeftDragInstance = new Drag(this.bottomLeft,{limit:{x:[-5,parseInt(this.cropRectangle.getStyle('left'))+parseInt(this.cropRectangle.getStyle('width'))-5],y:[parseInt(this.cropRectangle.getStyle('top'))-5,this.image.height-5]},onDrag:this.resizeBottomLeft.bind(this)}); this.mainDragInstance.detach(); this.mainDragInstance = new Drag(this.cropRectangle,{limit:{x:[0,this.image.width-parseInt(this.cropRectangle.getStyle('width'))],y:[0,this.image.height-parseInt(this.cropRectangle.getStyle('height'))]},onDrag:this.cropMove.bind(this)}); }, resizeTopLeft:function(handle){ var newWidth = parseInt(this.topRight.getStyle('left'))-parseInt(handle.getStyle('left')); var newHeight = parseInt(this.bottomLeft.getStyle('top'))-parseInt(handle.getStyle('top')); if(this.options.prop){ newHeight = newWidth*this.propRatio; handle.setStyle('top',parseInt(this.bottomLeft.getStyle('top'))-newHeight); } if(newWidth