-
var Sd = {
-
Version: '0.2'
-
};
-
-
Sd.Resizable = Class.create();
-
Sd.Resizable.prototype = {
-
initialize: function(element){
-
var options = {
-
observer: false
-
// it needs observer.mixW, observer.minH, observer.onChangeSize
-
}.extend(arguments[1] || {});
-
-
this.element = $(element);
-
this.active = false;
-
this.resizingW = false;
-
this.resizingH = false;
-
this.observer = options.observer;
-
this.minW = (this.observer.minW) ? this.observer.minW : 40;
-
this.minH = (this.observer.minH) ? this.observer.minH : 40;
-
-
this.resizewindow = document.createElement('div');
-
this.resizewindow.id=this.element.id+'_resizewindow';
-
var props= {
-
border:'1px solid blue',background:'transparent', overflow:'hidden', position:'relative',
-
padding:'0px',visibility:'hidden'
-
};
-
for( i in props ){
-
this.resizewindow.style[i]=props[i];
-
}
-
this.element.parentNode.appendChild(this.resizewindow);
-
-
Event.observe(this.element, "mousedown", this.startResize.bindAsEventListener(this));
-
Event.observe(document, "mouseup", this.endResize.bindAsEventListener(this));
-
Event.observe(document, "mousemove", this.updateResize.bindAsEventListener(this));
-
},
-
startResize: function(event){
-
if(!Event.isLeftClick(event)) { return ; }
-
-
var cursor=this.element.style.cursor;
-
if( cursor=='nwresize'){
-
this.resizingW=this.resizingH=true;
-
}else if(cursor=='wresize'){
-
this.resizingW=true;this.resizingH=false;
-
}else if(cursor=='nresize'){
-
this.resizingW=false;this.resizingH=true;
-
}else{
-
return;
-
}
-
-
Position.clone(this.element.id,this.resizewindow.id);
-
this.resizewindow.style.zIndex= '10';
-
this.element.style.zIndex= '1';
-
this.resizewindow.style.visibility='visible';
-
this.originalX=event.clientX;
-
this.originalY=event.clientY;
-
this.originalW=this.resizewindow.clientWidth;
-
this.originalH=this.resizewindow.clientHeight;
-
-
Event.stop(event);
-
},
-
endResize: function(event){
-
if(this.resizingW || this.resizingH){
-
this.resizewindow.style.visibility='hidden';
-
if(this.observer.onChangeSize){
-
this.observer.onChangeSize(this.resizewindow.clientWidth,this.resizewindow.clientHeight);
-
} else {
-
this.element.style.width=this.resizewindow.clientWidth+'px';
-
this.element.style.height=this.resizewindow.clientHeight+'px';
-
}
-
this.resizingH=this.resizingW=false;
-
Event.stop(event);
-
}
-
},
-
updateResize:function(event){
-
if(this.resizingW || this.resizingH){
-
this.draw(event);
-
return;
-
}
-
var x= ( event.clientX parseInt(this.element.style.left || 0 ));
-
var y= ( event.clientY parseInt(this.element.style.top || 0 ));
-
var cursor;
-
-
if(( x> ( this.element.clientWidth 2 )) && ( y> ( this.element.clientHeight 2 ))){
-
cursor='nwresize';
-
Event.stop(event);
-
} else if( x> ( this.element.clientWidth 2 )){
-
cursor='wresize';
-
Event.stop(event);
-
} else if( y> ( this.element.clientHeight 2 )){
-
cursor='nresize';
-
Event.stop(event);
-
} else {
-
cursor='auto';
-
}
-
this.element.style.cursor=cursor;
-
},
-
draw:function(event){
-
if(this.resizingW){
-
if((this.originalW+(event.clientXthis.originalX))>this.minW)
-
this.resizewindow.style.width = (this.originalW+(event.clientXthis.originalX)) + 'px';
-
}
-
if(this.resizingH){
-
if((this.originalH+(event.clientYthis.originalY))>this.minH)
-
this.resizewindow.style.height = (this.originalH+(event.clientYthis.originalY)) + 'px';
-
}
-
Event.stop(event);
-
}
-
};