Ik heb een mootools event nu zou ik graag willen dat dit event helemaal gecancelt word als ik er dubbel op click.
Dus dat de hele class gestopt word of gereload word zo dat ik op nieuw kan beginnen met het event.
Dit is het onload script.
window.addEvent('load',function(){
$('myElement').addEvent('click', function(){
var photo_tag_user_list = $("photo_tag_user_list");
photo_tag_user_list.style.display = 'block';
var crop5 = new MooCrop('crop_example5');
var indicator = new Element('span',{
'styles' : {
'position' : 'absolute',
'display' : 'none',
'padding' : '40px',
'opacity' : '.7',
'background' : '#ffffff',
'border' : '1px solid #525252',
'font-size' : '11px'
}
}).injectInside(crop5.wrapper);
crop5.addEvent('onDblClk', function(img,crop,bound){
});
crop5.addEvent('onCrop' , function(imgsrc,crop,bound,handle){
var photo_tag_user_list = $("photo_tag_user_list");
var tags_users_left = new Fx.Tween(photo_tag_user_list).start('margin-left',+crop.left+crop.width+40);
var tags_users_top = new Fx.Tween(photo_tag_user_list).start('margin-top',+crop.top+crop.height+30);
});
});
});
en dit is de class die gestopt moet worden of gerestart
var MooCrop = new Class({
calculateHandles : true,
current : {},
options : {
maskColor : 'black',
maskOpacity : '.4',
handleColor : 'blue',
handleWidth : '8px',
handleHeight : '8px',
cropBorder : '1px dashed blue',
min : { 'width' : 50, 'height' : 50 },
showMask : true, // false to remove, helps on slow machines
showHandles : false // hide handles on drag
},
initialize: function(el, options){
this.setOptions(options);
this.img = $(el);
//correct change for mootools 1.2,
/* for mootools 1.1
if ( this.img.getTag() != 'img') return false;
*/
if ( this.img.get('tag') != 'img') return false;
this.resizeFunc = this.refresh.bindWithEvent(this);
this.removeFunc = this.removeListener.bind(this);
this.buildOverlay();
this.setup();
},
setup: function(){
$(this.cropArea).setStyles({
'width': this.options.min.width,
'height': this.options.min.height,
'top' : (this.img.height - this.options.min.height)/2,
'left': (this.img.width - this.options.min.width) / 2
});
this.current.crop = this.crop = this.getCropArea();
this.handleWidthOffset = this.options.handleWidth.toInt() / 2;
this.handleHeightOffset = this.options.handleHeight.toInt() /2;
this.fixBoxModel();
this.drawMasks();
this.positionHandles();
},
getCropArea : function(){
var crop = this.cropArea.getCoordinates();
crop.left -= this.offsets.x; crop.right -= this.offsets.x; // calculate relative (horizontal)
crop.top -= this.offsets.y; crop.bottom -= this.offsets.y; // calculate relative (vertical)
return crop;
},
fixBoxModel : function(){
var diff = this.boxDiff = (this.crop.width - this.options.min.width)/2;
var b = this.bounds = { 'top' : diff, 'left' : diff,
'right' : this.img.width+(diff*2), 'bottom' : this.img.height+(diff*2),
'width' : this.options.min.width+(diff*2), 'height' : this.options.min.height+(diff*2) };
this.wrapper.setStyles({
'width' : b.right, 'height' : b.bottom,
'background' : 'url('+this.img.src+') no-repeat '+diff+'px '+diff+'px'
});
this.north.setStyle('width',b.right);
this.south.setStyle('width',b.right);
},
activate : function(event,handle){
event.stop();
this.current = { 'x' : event.page.x, 'y' : event.page.y, 'handle' : handle, 'crop' : this.current.crop };
//alert(this.current.x);
if(this.current.handle == 'NESW' && !this.options.showHandles) this.hideHandles();
this.fireEvent('onBegin',[this.img.src,this.getCropInfo(),this.bounds,handle]);
document.addEvent('mousemove', this.resizeFunc);
document.addEvent('mouseup', this.removeFunc);
},
removeListener : function(){
if( this.current.handle == 'NESW' && !this.options.showHandles) this.showHandles();
document.removeEvent('mousemove', this.resizeFunc);
document.removeEvent('mouseup', this.removeFunc);
this.crop = this.current.crop;
this.fireEvent('onComplete',[this.img.src,this.getCropInfo(),this.bounds,this.current.handle]);
},
refresh : function(event){
var b = this.bounds;
var c = this.crop;
var handle = this.current.handle;
var styles = {}; //saving bytes
var dragging = (handle.length > 2) ? true : false;
//set sign
if(handle.contains("NW") || handle.contains("SE")){
sign = 1;
} else {
sign = -1;
}
//deal with single direction drags
var force_adjust;
var sign;
if(handle.length == 1 ){
if(handle.contains("S")){
sign = -1;
force_adjust = "W";
}
if(handle.contains("N")){
sign = -1;
force_adjust = "E";
}
if(handle.contains("E")){
sign = 1;
force_adjust = "S";
}
if(handle.contains("W")){
sign = 1;
force_adjust = "N";
}
}
//calculate dimensions
if( this.options.maintainAspectRatio && !dragging ){
var aspectratio = (this.options.min.width/this.options.min.height);
if(handle.length=1 && (handle.contains('N') || handle.contains('S')) ){
var ydiff = this.current.y - event.page.y;
var xdiff = sign * ydiff * aspectratio;
} else {
var xdiff = this.current.x - event.page.x;
var ydiff = sign * xdiff / aspectratio;
}
} else {
var xdiff = this.current.x - event.page.x;
var ydiff = this.current.y - event.page.y;
}
if( handle.contains("S") || force_adjust == "S" ){//SOUTH
if(c.bottom - ydiff > b.bottom ) return false;//ydiff = c.bottom - b.bottom; // box south
if(!dragging){
if( (c.height - ydiff) < b.height ) ydiff = c.height - b.height; // size south
styles['height'] = c.height - ydiff; // South handles only
}
}
if( handle.contains("N") || force_adjust == "N" ){//NORTH
if(c.top - ydiff < b.top ) return false; //box north
if(!dragging){
if( (c.height + ydiff ) < b.height ) return false;//ydiff = b.height - c.height; // size north
styles['height'] = c.height + ydiff; // North handles only
}
styles['top'] = c.top - ydiff; // both Drag and N handles
}
if( handle.contains("E") || force_adjust == "E" ){//EAST
if(c.right - xdiff > b.right) return false; //xdiff = c.right - b.right; //box east
if(!dragging){
if( (c.width - xdiff) < b.width ) xdiff = c.width - b.width; // size east
styles['width'] = c.width - xdiff;
}
}
if( handle.contains("W") || force_adjust == "W" ){//WEST
if(c.left - xdiff < b.left) return false; //xdiff = c.left; //box west
if(!dragging){
if( (c.width + xdiff) < b.width ) xdiff = b.width - c.width; //size west
styles['width'] = c.width + xdiff;
}
styles['left'] = c.left - xdiff; // both Drag and W handles
}
var preCssStyles = $merge(styles);
if( $defined(styles.width)) styles.width -= this.boxDiff*2;
if( $defined(styles.height)) styles.height -= this.boxDiff*2;
this.cropArea.setStyles(styles);
this.getCurrentCoords(preCssStyles);
this.drawMasks();
this.positionHandles();
this.fireEvent('onCrop',[this.img.src,this.getCropInfo(),b,handle]);
},
getCurrentCoords : function(changed){
var current = $merge(this.crop);
if($defined(changed.left)){
current.left = changed.left;
if($defined(changed.width)) current.width = changed.width;
else current.right = current.left + current.width;
}
if($defined(changed.top)){
current.top = changed.top;
if($defined(changed.height)) current.height = changed.height;
else current.bottom = current.top + current.height;
}
if($defined(changed.width) && !$defined(changed.left)){
current.width = changed.width; current.right = current.left + current.width;
}
if($defined(changed.height) && !$defined(changed.top)){
current.height = changed.height; current.bottom = current.top + current.height;
}
this.current.crop = current;
},
drawMasks : function(){
if(!this.options.showMask) return;
var b = this.bounds; var c = this.current.crop; var handle = this.current.handle;
this.north.setStyle('height', c.top + 'px' );
this.south.setStyle('height', b.bottom - c.bottom + 'px');
this.east.setStyles({ height: c.height + 'px', width: b.right - c.right + 'px', top: c.top + 'px', left: c.right + 'px'});
this.west.setStyles({ height: c.height + 'px', width: c.left + 'px', top: c.top + 'px'});
},
positionHandles: function(){
if(!this.calculateHandles) return;
var c = this.current.crop; var wOffset = this.handleWidthOffset; var hOffset = this.handleHeightOffset;
this.handles.get('N').setStyles({'left' : c.width / 2 - wOffset + 'px', 'top' : - hOffset + 'px'});
this.handles.get('NE').setStyles({'left' : c.width - wOffset + 'px', 'top' : - hOffset + 'px'});
this.handles.get('E').setStyles({ 'left' : c.width - wOffset + 'px', 'top' : c.height / 2 - hOffset + 'px'});
this.handles.get('SE').setStyles({'left' : c.width - wOffset + 'px', 'top' : c.height - hOffset + 'px'});
this.handles.get('S').setStyles({'left' : c.width / 2 - wOffset + 'px', 'top' : c.height - hOffset + 'px'});
this.handles.get('SW').setStyles({'left' : - wOffset + 'px', 'top' : c.height - hOffset + 'px'});
this.handles.get('W').setStyles({'left' : - wOffset + 'px', 'top' : c.height / 2 - hOffset + 'px'});
this.handles.get('NW').setStyles({'left' : - wOffset + 'px', 'top' : - hOffset + 'px'});
},
hideHandles: function(){
this.calculateHandles = false;
this.handles.each(function(handle){
handle.setStyle('display','none');
});
},
showHandles: function(){
this.calculateHandles = true;
this.positionHandles();
this.handles.each(function(handle){
handle.setStyle('display','block');
});
},
buildOverlay: function(){
var o = this.options;
this.wrapper = new Element("div", {
'styles' : {'position' : 'relative', 'width' : this.img.width, 'height' : this.img.height, 'background' : 'url('+this.img.src+') no-repeat' , 'float' : this.img.getStyle('float') }
}).injectBefore(this.img);
this.img.setStyle('display','none');
this.offsets = { x : this.wrapper.getLeft(), y : this.wrapper.getTop() };
if(this.options.showMask){ // optional masks
var maskStyles = { 'position' : 'absolute', 'overflow' : 'hidden', 'background-color' : o.maskColor, 'opacity' : o.maskOpacity};
this.north = new Element("div", {'styles' : maskStyles}).injectInside(this.wrapper);
this.south = new Element("div", {'styles' : $merge(maskStyles,{'bottom':'0px'})}).injectInside(this.wrapper);
this.east = new Element("div", {'styles' : maskStyles}).injectInside(this.wrapper);
this.west = new Element("div", {'styles' : maskStyles}).injectInside(this.wrapper);
}
this.cropArea = new Element("div", { 'styles' : { 'position' : 'absolute', 'top' : '0px', 'left' : '0px', 'border' : o.cropBorder, 'cursor' : 'move' },
'events' : {
'dblclick' : function(){ this.fireEvent('onDblClk',[this.img.src,this.getCropInfo(),this.bounds]),this.hideHandles(),this.maskStyles}.bind(this),
'mousedown' : this.activate.bindWithEvent(this,'NESW')}
}).injectInside(this.wrapper);
this.handles = new Hash();
['N','NE','E','SE','S','SW','W','NW'].each(function(handle){
this.handles.set(handle, new Element("div", {
'styles' : { 'position' : 'absolute', 'background-color' : o.handleColor,
'width' : o.handleWidth, 'height' : o.handleHeight, 'overflow' : 'hidden', 'cursor' : (handle.toLowerCase()+'-resize')},
'events' : {'mousedown' : this.activate.bindWithEvent(this,handle)}
}).injectInside(this.cropArea));
},this);
},
getCropInfo : function(){
var c = $merge(this.current.crop);
c.width -= this.boxDiff*2; c.height -= this.boxDiff*2;
return c;
},
removeOverlay: function(){
this.wrapper.remove();
this.img.setStyle('display','block');
},
Implements : [Options,Events],
});