587 lines
21 KiB
JavaScript
587 lines
21 KiB
JavaScript
/**
|
|
* @class YAHOO.ext.Resizable
|
|
* @extends YAHOO.ext.util.Observable
|
|
* <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
|
|
* and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
|
|
* the textarea in a div and set "resizeChild" to true (or the id of the textarea), <b>or</b> set wrap:true in your config and
|
|
* the element will be wrapped for you automatically.</p><br/>
|
|
* Here's a Resizable with every possible config option and it's default value:
|
|
<pre><code>
|
|
var resizer = new YAHOO.ext.Resizable('element-id', {
|
|
resizeChild : false,
|
|
adjustments : [0, 0],
|
|
minWidth : 5,
|
|
minHeight : 5,
|
|
maxWidth : 10000,
|
|
maxHeight : 10000,
|
|
enabled : true,
|
|
wrap: false, // true to wrap the element
|
|
width: null, // initial size
|
|
height: null, // initial size
|
|
animate : false,
|
|
duration : .35,
|
|
dynamic : false,
|
|
handles : false,
|
|
multiDirectional : false,
|
|
disableTrackOver : false,
|
|
easing : YAHOO.util.Easing ? YAHOO.util.Easing.easeOutStrong : null,
|
|
widthIncrement : 0,
|
|
heightIncrement : 0,
|
|
pinned : false,
|
|
width : null,
|
|
height : null,
|
|
preserveRatio : false,
|
|
transparent: false,
|
|
minX: 0,
|
|
minY: 0,
|
|
draggable: false
|
|
});
|
|
resizer.on('resize', myHandler);
|
|
</code></pre>
|
|
* <p>
|
|
* To hide a particular handle, set it's display to none in CSS, or through script:<br>
|
|
* resizer.east.setDisplayed(false);
|
|
* </p>
|
|
* @constructor
|
|
* Create a new resizable component
|
|
* @param {String/HTMLElement/YAHOO.ext.Element} el The id or element to resize
|
|
* @param {Object} config configuration options
|
|
*/
|
|
YAHOO.ext.Resizable = function(el, config){
|
|
this.el = getEl(el);
|
|
|
|
if(config && config.wrap){
|
|
config.resizeChild = this.el;
|
|
this.el = this.el.wrap(typeof config.wrap == 'object' ? config.wrap : null);
|
|
this.el.id = this.el.dom.id = config.resizeChild.id + '-rzwrap';
|
|
this.el.setStyle('overflow', 'hidden');
|
|
this.el.setPositioning(config.resizeChild.getPositioning());
|
|
config.resizeChild.clearPositioning();
|
|
if(!config.width || !config.height){
|
|
var csize = config.resizeChild.getSize();
|
|
//csize.width -= config.adjustments[0];
|
|
//csize.height -= config.adjustments[1];
|
|
this.el.setSize(csize.width, csize.height);
|
|
}
|
|
if(config.pinned && !config.adjustments){
|
|
config.adjustments = 'auto';
|
|
}
|
|
}
|
|
|
|
this.proxy = this.el.createProxy({tag: 'div', cls: 'yresizable-proxy', id: this.el.id + '-rzproxy'})
|
|
this.proxy.unselectable();
|
|
|
|
// the overlay traps mouse events while dragging and fixes iframe issue
|
|
this.overlay = this.el.createProxy({tag: 'div', cls: 'yresizable-overlay', html: ' '});
|
|
this.overlay.unselectable();
|
|
this.overlay.enableDisplayMode('block');
|
|
this.overlay.mon('mousemove', this.onMouseMove, this, true);
|
|
this.overlay.mon('mouseup', this.onMouseUp, this, true);
|
|
|
|
YAHOO.ext.util.Config.apply(this, config, {
|
|
/** True to resizeSize the first child or id/element to resize @type YAHOO.ext.Element */
|
|
resizeChild : false,
|
|
/** String "auto" or an array [width, height] with values to be <b>added</b> to the resize operation's new size. @type Array/String */
|
|
adjustments : [0, 0],
|
|
/** The minimum width for the element @type Number */
|
|
minWidth : 5,
|
|
/** The minimum height for the element @type Number */
|
|
minHeight : 5,
|
|
/** The maximum width for the element @type Number */
|
|
maxWidth : 10000,
|
|
/** The maximum height for the element @type Number */
|
|
maxHeight : 10000,
|
|
/** false to disable resizing @type Boolean */
|
|
enabled : true,
|
|
/** True to animate the resize (not compatible with dynamic sizing) @type Boolean */
|
|
animate : false,
|
|
/** Animation duration @type Float */
|
|
duration : .35,
|
|
/** True to resize the element while dragging instead of using a proxy @type Boolean */
|
|
dynamic : false,
|
|
// these 3 are only available at config time
|
|
/** String consisting of the resize handles to display. Valid handles are
|
|
* n (north), s (south) e (east), w (west), ne (northeast), nw (northwest), se (southeast), sw (southwest)
|
|
* and all (which applies them all). If this is blank it defaults to "e,s,se". Handles can be delimited using
|
|
* a space, comma or semi-colon. This is only applied at config time. @type String*/
|
|
handles : false,
|
|
multiDirectional : false,
|
|
/** true to disable mouse tracking. This is only applied at config time. @type Boolean*/
|
|
disableTrackOver : false,
|
|
/** Animation easing @type YAHOO.util.Easing */
|
|
easing : YAHOO.util.Easing ? YAHOO.util.Easing.easeOutStrong : null,
|
|
/** The increment to snap the width resize in pixels (dynamic must be true) @type Number */
|
|
widthIncrement : 0,
|
|
/** The increment to snap the height resize in pixels (dynamic must be true) @type Number */
|
|
heightIncrement : 0,
|
|
/** true to pin the resize handles. This is only applied at config time. @type Boolean*/
|
|
pinned : false,
|
|
/** The initial width for the element @type Number */
|
|
width : null,
|
|
/** The initial height for the element @type Number */
|
|
height : null,
|
|
/** true to preserve the initial size ratio. @type Boolean*/
|
|
preserveRatio : false,
|
|
/** true for transparent handles. This is only applied at config time. @type Boolean*/
|
|
transparent: false,
|
|
/** The minimum allowed page X for the element (only used for west resizing, defaults to 0) @type Number */
|
|
minX: 0,
|
|
/** The minimum allowed page Y for the element (only used for north resizing, defaults to 0) @type Number */
|
|
minY: 0,
|
|
/** convenience to initialize drag drop. @type Boolean*/
|
|
draggable: false
|
|
});
|
|
|
|
if(this.pinned){
|
|
this.disableTrackOver = true;
|
|
this.el.addClass('yresizable-pinned');
|
|
}
|
|
// if the element isn't positioned, make it relative
|
|
var position = this.el.getStyle('position');
|
|
if(position != 'absolute' && position != 'fixed'){
|
|
this.el.setStyle('position', 'relative');
|
|
}
|
|
if(!this.handles){ // no handles passed, must be legacy style
|
|
this.handles = 's,e,se';
|
|
if(this.multiDirectional){
|
|
this.handles += ',n,w';
|
|
}
|
|
}
|
|
if(this.handles == 'all'){
|
|
this.handles = 'n s e w ne nw se sw';
|
|
}
|
|
var hs = this.handles.split(/\s*?[,;]\s*?| /);
|
|
var ps = YAHOO.ext.Resizable.positions;
|
|
for(var i = 0, len = hs.length; i < len; i++){
|
|
if(hs[i] && ps[hs[i]]){
|
|
var pos = ps[hs[i]];
|
|
this[pos] = new YAHOO.ext.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent);
|
|
}
|
|
}
|
|
// legacy
|
|
this.corner = this.southeast;
|
|
|
|
this.activeHandle = null;
|
|
|
|
if(this.resizeChild){
|
|
if(typeof this.resizeChild == 'boolean'){
|
|
this.resizeChild = YAHOO.ext.Element.get(this.el.dom.firstChild, true);
|
|
}else{
|
|
this.resizeChild = YAHOO.ext.Element.get(this.resizeChild, true);
|
|
}
|
|
}
|
|
|
|
if(this.adjustments == 'auto'){
|
|
var rc = this.resizeChild;
|
|
var hw = this.west, he = this.east, hn = this.north, hs = this.south;
|
|
if(rc && (hw || hn)){
|
|
rc.setRelativePositioned();
|
|
rc.setLeft(hw ? hw.el.getWidth() : 0);
|
|
rc.setTop(hn ? hn.el.getHeight() : 0);
|
|
}
|
|
this.adjustments = [
|
|
(he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
|
|
(hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
|
|
];
|
|
}
|
|
|
|
if(this.draggable){
|
|
this.dd = this.dynamic ?
|
|
this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
|
|
this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
|
|
}
|
|
|
|
// public events
|
|
this.events = {
|
|
/**
|
|
* @event beforeresize
|
|
* Fired before resize is allowed. Set enabled to false to cancel resize.
|
|
* @param {YAHOO.ext.Resizable} this
|
|
* @param {YAHOO.ext.EventObject} e The mousedown event
|
|
*/
|
|
'beforeresize' : new YAHOO.util.CustomEvent(),
|
|
/**
|
|
* @event resize
|
|
* Fired after a resize.
|
|
* @param {YAHOO.ext.Resizable} this
|
|
* @param {Number} width The new width
|
|
* @param {Number} height The new height
|
|
* @param {YAHOO.ext.EventObject} e The mouseup event
|
|
*/
|
|
'resize' : new YAHOO.util.CustomEvent()
|
|
};
|
|
|
|
if(this.width !== null && this.height !== null){
|
|
this.resizeTo(this.width, this.height);
|
|
}else{
|
|
this.updateChildSize();
|
|
}
|
|
};
|
|
|
|
YAHOO.extendX(YAHOO.ext.Resizable, YAHOO.ext.util.Observable, {
|
|
/**
|
|
* Perform a manual resize
|
|
* @param {Number} width
|
|
* @param {Number} height
|
|
*/
|
|
resizeTo : function(width, height){
|
|
this.el.setSize(width, height);
|
|
this.updateChildSize();
|
|
this.fireEvent('resize', this, width, height, null);
|
|
},
|
|
|
|
startSizing : function(e){
|
|
this.fireEvent('beforeresize', this, e);
|
|
if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
|
|
this.resizing = true;
|
|
this.startBox = this.el.getBox();
|
|
this.startPoint = e.getXY();
|
|
this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
|
|
(this.startBox.y + this.startBox.height) - this.startPoint[1]];
|
|
this.proxy.setBox(this.startBox);
|
|
|
|
this.overlay.setSize(YAHOO.util.Dom.getDocumentWidth(), YAHOO.util.Dom.getDocumentHeight());
|
|
this.overlay.show();
|
|
|
|
if(!this.dynamic){
|
|
this.proxy.show();
|
|
}
|
|
}
|
|
},
|
|
|
|
onMouseDown : function(handle, e){
|
|
if(this.enabled){
|
|
e.stopEvent();
|
|
this.activeHandle = handle;
|
|
this.overlay.setStyle('cursor', handle.el.getStyle('cursor'));
|
|
this.startSizing(e);
|
|
}
|
|
},
|
|
|
|
onMouseUp : function(e){
|
|
var size = this.resizeElement();
|
|
this.resizing = false;
|
|
this.handleOut();
|
|
this.overlay.hide();
|
|
this.fireEvent('resize', this, size.width, size.height, e);
|
|
},
|
|
|
|
updateChildSize : function(){
|
|
if(this.resizeChild){
|
|
var el = this.el;
|
|
var child = this.resizeChild;
|
|
var adj = this.adjustments;
|
|
if(el.dom.offsetWidth){
|
|
var b = el.getSize(true);
|
|
child.setSize(b.width+adj[0], b.height+adj[1]);
|
|
}
|
|
// Second call here for IE
|
|
// The first call enables instant resizing and
|
|
// the second call corrects scroll bars if they
|
|
// exist
|
|
if(YAHOO.ext.util.Browser.isIE){
|
|
setTimeout(function(){
|
|
if(el.dom.offsetWidth){
|
|
var b = el.getSize(true);
|
|
child.setSize(b.width+adj[0], b.height+adj[1]);
|
|
}
|
|
}, 10);
|
|
}
|
|
}
|
|
},
|
|
|
|
snap : function(value, inc, min){
|
|
if(!inc || !value) return value;
|
|
var newValue = value;
|
|
var m = value % inc;
|
|
if(m > 0){
|
|
if(m > (inc/2)){
|
|
newValue = value + (inc-m);
|
|
}else{
|
|
newValue = value - m;
|
|
}
|
|
}
|
|
return Math.max(min, newValue);
|
|
},
|
|
|
|
resizeElement : function(){
|
|
var box = this.proxy.getBox();
|
|
//box.width = this.snap(box.width, this.widthIncrement);
|
|
//box.height = this.snap(box.height, this.heightIncrement);
|
|
//if(this.multiDirectional){
|
|
this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
|
|
//}else{
|
|
// this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
|
|
//}
|
|
this.updateChildSize();
|
|
this.proxy.hide();
|
|
return box;
|
|
},
|
|
|
|
constrain : function(v, diff, m, mx){
|
|
if(v - diff < m){
|
|
diff = v - m;
|
|
}else if(v - diff > mx){
|
|
diff = mx - v;
|
|
}
|
|
return diff;
|
|
},
|
|
|
|
onMouseMove : function(e){
|
|
if(this.enabled){
|
|
try{// try catch so if something goes wrong the user doesn't get hung
|
|
|
|
//var curXY = this.startPoint;
|
|
var curSize = this.curSize || this.startBox;
|
|
var x = this.startBox.x, y = this.startBox.y;
|
|
var ox = x, oy = y;
|
|
var w = curSize.width, h = curSize.height;
|
|
var ow = w, oh = h;
|
|
var mw = this.minWidth, mh = this.minHeight;
|
|
var mxw = this.maxWidth, mxh = this.maxHeight;
|
|
var wi = this.widthIncrement;
|
|
var hi = this.heightIncrement;
|
|
|
|
var eventXY = e.getXY();
|
|
var diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0]));
|
|
var diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1]));
|
|
|
|
var pos = this.activeHandle.position;
|
|
|
|
switch(pos){
|
|
case 'east':
|
|
w += diffX;
|
|
w = Math.min(Math.max(mw, w), mxw);
|
|
break;
|
|
case 'south':
|
|
h += diffY;
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
break;
|
|
case 'southeast':
|
|
w += diffX;
|
|
h += diffY;
|
|
w = Math.min(Math.max(mw, w), mxw);
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
break;
|
|
case 'north':
|
|
diffY = this.constrain(h, diffY, mh, mxh);
|
|
y += diffY;
|
|
h -= diffY;
|
|
break;
|
|
case 'west':
|
|
diffX = this.constrain(w, diffX, mw, mxw);
|
|
x += diffX;
|
|
w -= diffX;
|
|
break;
|
|
case 'northeast':
|
|
w += diffX;
|
|
w = Math.min(Math.max(mw, w), mxw);
|
|
diffY = this.constrain(h, diffY, mh, mxh);
|
|
y += diffY;
|
|
h -= diffY;
|
|
break;
|
|
case 'northwest':
|
|
diffX = this.constrain(w, diffX, mw, mxw);
|
|
diffY = this.constrain(h, diffY, mh, mxh);
|
|
y += diffY;
|
|
h -= diffY;
|
|
x += diffX;
|
|
w -= diffX;
|
|
break;
|
|
case 'southwest':
|
|
diffX = this.constrain(w, diffX, mw, mxw);
|
|
h += diffY;
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
x += diffX;
|
|
w -= diffX;
|
|
break;
|
|
}
|
|
|
|
var sw = this.snap(w, wi, mw);
|
|
var sh = this.snap(h, hi, mh);
|
|
if(sw != w || sh != h){
|
|
switch(pos){
|
|
case 'northeast':
|
|
y -= sh - h;
|
|
break;
|
|
case 'north':
|
|
y -= sh - h;
|
|
break;
|
|
case 'southwest':
|
|
x -= sw - w;
|
|
break;
|
|
case 'west':
|
|
x -= sw - w;
|
|
break;
|
|
case 'northwest':
|
|
x -= sw - w;
|
|
y -= sh - h;
|
|
break;
|
|
}
|
|
w = sw;
|
|
h = sh;
|
|
}
|
|
|
|
if(this.preserveRatio){
|
|
switch(pos){
|
|
case 'southeast':
|
|
case 'east':
|
|
h = oh * (w/ow);
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
w = ow * (h/oh);
|
|
break;
|
|
case 'south':
|
|
w = ow * (h/oh);
|
|
w = Math.min(Math.max(mw, w), mxw);
|
|
h = oh * (w/ow);
|
|
break;
|
|
case 'northeast':
|
|
w = ow * (h/oh);
|
|
w = Math.min(Math.max(mw, w), mxw);
|
|
h = oh * (w/ow);
|
|
break;
|
|
case 'north':
|
|
var tw = w;
|
|
w = ow * (h/oh);
|
|
w = Math.min(Math.max(mw, w), mxw);
|
|
h = oh * (w/ow);
|
|
x += (tw - w) / 2;
|
|
break;
|
|
case 'southwest':
|
|
h = oh * (w/ow);
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
var tw = w;
|
|
w = ow * (h/oh);
|
|
x += tw - w;
|
|
break;
|
|
case 'west':
|
|
var th = h;
|
|
h = oh * (w/ow);
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
y += (th - h) / 2;
|
|
var tw = w;
|
|
w = ow * (h/oh);
|
|
x += tw - w;
|
|
break;
|
|
case 'northwest':
|
|
var tw = w;
|
|
var th = h;
|
|
h = oh * (w/ow);
|
|
h = Math.min(Math.max(mh, h), mxh);
|
|
w = ow * (h/oh);
|
|
y += th - h;
|
|
x += tw - w;
|
|
break;
|
|
|
|
}
|
|
}
|
|
this.proxy.setBounds(x, y, w, h);
|
|
if(this.dynamic){
|
|
this.resizeElement();
|
|
}
|
|
}catch(e){}
|
|
}
|
|
},
|
|
|
|
handleOver : function(){
|
|
if(this.enabled){
|
|
this.el.addClass('yresizable-over');
|
|
}
|
|
},
|
|
|
|
handleOut : function(){
|
|
if(!this.resizing){
|
|
this.el.removeClass('yresizable-over');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the element this component is bound to.
|
|
* @return {YAHOO.ext.Element}
|
|
*/
|
|
getEl : function(){
|
|
return this.el;
|
|
},
|
|
|
|
/**
|
|
* Returns the resizeChild element (or null).
|
|
* @return {YAHOO.ext.Element}
|
|
*/
|
|
getResizeChild : function(){
|
|
return this.resizeChild;
|
|
},
|
|
|
|
/**
|
|
* Destroys this resizable. If the element was wrapped and
|
|
* removeEl is not true then the wrap remains.
|
|
* @param {Boolean} removeEl (optional) true to remove the element from the DOM
|
|
*/
|
|
destroy : function(removeEl){
|
|
this.proxy.remove();
|
|
this.overlay.removeAllListeners();
|
|
this.overlay.remove();
|
|
var ps = YAHOO.ext.Resizable.positions;
|
|
for(var k in ps){
|
|
if(typeof ps[k] != 'function' && this[ps[k]]){
|
|
var h = this[ps[k]];
|
|
h.el.removeAllListeners();
|
|
h.el.remove();
|
|
}
|
|
}
|
|
if(removeEl){
|
|
this.el.update('');
|
|
this.el.remove();
|
|
}
|
|
}
|
|
});
|
|
|
|
// hash to map config positions to true positions
|
|
YAHOO.ext.Resizable.positions = {
|
|
n: 'north', s: 'south', e: 'east', w: 'west', se: 'southeast', sw: 'southwest', nw: 'northwest', ne: 'northeast'
|
|
};
|
|
|
|
|
|
YAHOO.ext.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){
|
|
if(!this.tpl){
|
|
// only initialize the template if resizable is used
|
|
var tpl = YAHOO.ext.DomHelper.createTemplate(
|
|
{tag: 'div', cls: 'yresizable-handle yresizable-handle-{0}', html: ' '}
|
|
);
|
|
tpl.compile();
|
|
YAHOO.ext.Resizable.Handle.prototype.tpl = tpl;
|
|
}
|
|
this.position = pos;
|
|
this.rz = rz;
|
|
this.el = this.tpl.append(rz.el.dom, [this.position], true);
|
|
this.el.unselectable();
|
|
if(transparent){
|
|
this.el.setOpacity(0);
|
|
}
|
|
this.el.mon('mousedown', this.onMouseDown, this, true);
|
|
if(!disableTrackOver){
|
|
this.el.mon('mouseover', this.onMouseOver, this, true);
|
|
this.el.mon('mouseout', this.onMouseOut, this, true);
|
|
}
|
|
};
|
|
|
|
YAHOO.ext.Resizable.Handle.prototype = {
|
|
afterResize : function(rz){
|
|
// do nothing
|
|
},
|
|
|
|
onMouseDown : function(e){
|
|
this.rz.onMouseDown(this, e);
|
|
},
|
|
|
|
onMouseOver : function(e){
|
|
this.rz.handleOver(this, e);
|
|
},
|
|
|
|
onMouseOut : function(e){
|
|
this.rz.handleOut(this, e);
|
|
}
|
|
};
|
|
|
|
|
|
|