X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/source/widgets/Resizable.js diff --git a/source/widgets/Resizable.js b/source/widgets/Resizable.js deleted file mode 100644 index a6ab52f0..00000000 --- a/source/widgets/Resizable.js +++ /dev/null @@ -1,699 +0,0 @@ -/* - * Ext JS Library 2.2.1 - * Copyright(c) 2006-2009, Ext JS, LLC. - * licensing@extjs.com - * - * http://extjs.com/license - */ - -/** - * @class Ext.Resizable - * @extends Ext.util.Observable - *

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 to the id of the element), or set wrap:true in your config and - * the element will be wrapped for you automatically.

- *

Here is the list of valid resize handles:

- * 
-Value   Description
-------  -------------------
- 'n'     north
- 's'     south
- 'e'     east
- 'w'     west
- 'nw'    northwest
- 'sw'    southwest
- 'se'    southeast
- 'ne'    northeast
- 'all'   all
-
- *

Here's an example showing the creation of a typical Resizable:

- * 

-var resizer = new Ext.Resizable("element-id", {
-    handles: 'all',
-    minWidth: 200,
-    minHeight: 100,
-    maxWidth: 500,
-    maxHeight: 400,
-    pinned: true
-});
-resizer.on("resize", myHandler);
-
- *

To hide a particular handle, set its display to none in CSS, or through script:
- * resizer.east.setDisplayed(false);

- * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false) - * @cfg {Array/String} adjustments String "auto" or an array [width, height] with values to be added to the - * resize operation's new size (defaults to [0, 0]) - * @cfg {Number} minWidth The minimum width for the element (defaults to 5) - * @cfg {Number} minHeight The minimum height for the element (defaults to 5) - * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000) - * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000) - * @cfg {Boolean} enabled False to disable resizing (defaults to true) - * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false) - * @cfg {Number} width The width of the element in pixels (defaults to null) - * @cfg {Number} height The height of the element in pixels (defaults to null) - * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false) - * @cfg {Number} duration Animation duration if animate = true (defaults to .35) - * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false) - * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined) - * @cfg {Boolean} multiDirectional Deprecated. The old style of adding multi-direction resize handles, deprecated - * in favor of the handles config option (defaults to false) - * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false) - * @cfg {String} easing Animation easing if animate = true (defaults to 'easingOutStrong') - * @cfg {Number} widthIncrement The increment to snap the width resize in pixels (dynamic must be true, defaults to 0) - * @cfg {Number} heightIncrement The increment to snap the height resize in pixels (dynamic must be true, defaults to 0) - * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the - * user mouses over the resizable borders. This is only applied at config time. (defaults to false) - * @cfg {Boolean} preserveRatio True to preserve the original ratio between height and width during resize (defaults to false) - * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false) - * @cfg {Number} minX The minimum allowed page X for the element (only used for west resizing, defaults to 0) - * @cfg {Number} minY The minimum allowed page Y for the element (only used for north resizing, defaults to 0) - * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false) - * @constructor - * Create a new resizable component - * @param {Mixed} el The id or element to resize - * @param {Object} config configuration options - */ -Ext.Resizable = function(el, config){ - this.el = Ext.get(el); - - if(config && config.wrap){ - config.resizeChild = this.el; - this.el = this.el.wrap(typeof config.wrap == "object" ? config.wrap : {cls:"xresizable-wrap"}); - 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(); - this.el.setSize(csize.width, csize.height); - } - if(config.pinned && !config.adjustments){ - config.adjustments = "auto"; - } - } - - /** - * The proxy Element that is resized in place of the real Element during the resize operation. - * This may be queried using {@link Ext.Element#getBox} to provide the new area to resize to. - * Read only. - * @type Ext.Element. - * @property proxy - */ - this.proxy = this.el.createProxy({tag: "div", cls: "x-resizable-proxy", id: this.el.id + "-rzproxy"}, Ext.getBody()); - this.proxy.unselectable(); - this.proxy.enableDisplayMode('block'); - - Ext.apply(this, config); - - if(this.pinned){ - this.disableTrackOver = true; - this.el.addClass("x-resizable-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 = 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 Ext.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent); - } - } - // legacy - this.corner = this.southeast; - - if(this.handles.indexOf("n") != -1 || this.handles.indexOf("w") != -1){ - this.updateBox = true; - } - - this.activeHandle = null; - - if(this.resizeChild){ - if(typeof this.resizeChild == "boolean"){ - this.resizeChild = Ext.get(this.el.dom.firstChild, true); - }else{ - this.resizeChild = Ext.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.position("relative"); - 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.addEvents( - "beforeresize", - "resize" - ); - - if(this.width !== null && this.height !== null){ - this.resizeTo(this.width, this.height); - }else{ - this.updateChildSize(); - } - if(Ext.isIE){ - this.el.dom.style.zoom = 1; - } - Ext.Resizable.superclass.constructor.call(this); -}; - -Ext.extend(Ext.Resizable, Ext.util.Observable, { - resizeChild : false, - adjustments : [0, 0], - minWidth : 5, - minHeight : 5, - maxWidth : 10000, - maxHeight : 10000, - enabled : true, - animate : false, - duration : .35, - dynamic : false, - handles : false, - multiDirectional : false, - disableTrackOver : false, - easing : 'easeOutStrong', - widthIncrement : 0, - heightIncrement : 0, - pinned : false, - width : null, - height : null, - preserveRatio : false, - transparent: false, - minX: 0, - minY: 0, - draggable: false, - - /** - * @cfg {Mixed} constrainTo Constrain the resize to a particular element - */ - /** - * @cfg {Ext.lib.Region} resizeRegion Constrain the resize to a particular region - */ - - /** - * @event beforeresize - * Fired before resize is allowed. Set enabled to false to cancel resize. - * @param {Ext.Resizable} this - * @param {Ext.EventObject} e The mousedown event - */ - /** - * @event resize - * Fired after a resize. - * @param {Ext.Resizable} this - * @param {Number} width The new width - * @param {Number} height The new height - * @param {Ext.EventObject} e The mouseup event - */ - - /** - * 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); - }, - - // private - startSizing : function(e, handle){ - this.fireEvent("beforeresize", this, e); - if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler - - if(!this.overlay){ - this.overlay = this.el.createProxy({tag: "div", cls: "x-resizable-overlay", html: " "}, Ext.getBody()); - this.overlay.unselectable(); - this.overlay.enableDisplayMode("block"); - this.overlay.on("mousemove", this.onMouseMove, this); - this.overlay.on("mouseup", this.onMouseUp, this); - } - this.overlay.setStyle("cursor", handle.el.getStyle("cursor")); - - 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.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true)); - this.overlay.show(); - - if(this.constrainTo) { - var ct = Ext.get(this.constrainTo); - this.resizeRegion = ct.getRegion().adjust( - ct.getFrameWidth('t'), - ct.getFrameWidth('l'), - -ct.getFrameWidth('b'), - -ct.getFrameWidth('r') - ); - } - - this.proxy.setStyle('visibility', 'hidden'); // workaround display none - this.proxy.show(); - this.proxy.setBox(this.startBox); - if(!this.dynamic){ - this.proxy.setStyle('visibility', 'visible'); - } - } - }, - - // private - onMouseDown : function(handle, e){ - if(this.enabled){ - e.stopEvent(); - this.activeHandle = handle; - this.startSizing(e, handle); - } - }, - - // private - onMouseUp : function(e){ - var size = this.resizeElement(); - this.resizing = false; - this.handleOut(); - this.overlay.hide(); - this.proxy.hide(); - this.fireEvent("resize", this, size.width, size.height, e); - }, - - // private - 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(Ext.isIE){ - setTimeout(function(){ - if(el.dom.offsetWidth){ - var b = el.getSize(true); - child.setSize(b.width+adj[0], b.height+adj[1]); - } - }, 10); - } - } - }, - - // private - 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); - }, - - /** - *

Performs resizing of the associated Element. This method is called internally by this - * class, and should not be called by user code.

- *

If a Resizable is being used to resize an Element which encapsulates a more complex UI - * component such as a Panel, this method may be overridden by specifying an implementation - * as a config option to provide appropriate behaviour at the end of the resize operation on - * mouseup, for example resizing the Panel, and relaying the Panel's content.

- *

The new area to be resized to is available by examining the state of the {@link #proxy} - * Element. Example: -


-new Ext.Panel({
-    title: 'Resize me',
-    x: 100,
-    y: 100,
-    renderTo: Ext.getBody(),
-    floating: true,
-    frame: true,
-    width: 400,
-    height: 200,
-    listeners: {
-        render: function(p) {
-            new Ext.Resizable(p.getEl(), {
-                handles: 'all',
-                pinned: true,
-                transparent: true,
-                resizeElement: function() {
-                    var box = this.proxy.getBox();
-                    p.updateBox(box);
-                    if (p.layout) {
-                        p.doLayout();
-                    }
-                    return box;
-                }
-           });
-       }
-    }
-}).show();
-
- */ - resizeElement : function(){ - var box = this.proxy.getBox(); - if(this.updateBox){ - 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(); - if(!this.dynamic){ - this.proxy.hide(); - } - return box; - }, - - // private - constrain : function(v, diff, m, mx){ - if(v - diff < m){ - diff = v - m; - }else if(v - diff > mx){ - diff = mx - v; - } - return diff; - }, - - // private - onMouseMove : function(e){ - if(this.enabled){ - try{// try catch so if something goes wrong the user doesn't get hung - - if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) { - return; - } - - //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){} - } - }, - - // private - handleOver : function(){ - if(this.enabled){ - this.el.addClass("x-resizable-over"); - } - }, - - // private - handleOut : function(){ - if(!this.resizing){ - this.el.removeClass("x-resizable-over"); - } - }, - - /** - * Returns the element this component is bound to. - * @return {Ext.Element} - */ - getEl : function(){ - return this.el; - }, - - /** - * Returns the resizeChild element (or null). - * @return {Ext.Element} - */ - getResizeChild : function(){ - return this.resizeChild; - }, - - /** - * Destroys this resizable. If the element was wrapped and - * removeEl is not true then the element remains. - * @param {Boolean} removeEl (optional) true to remove the element from the DOM - */ - destroy : function(removeEl){ - if(this.dd){ - this.dd.destroy(); - } - if(this.overlay){ - Ext.destroy(this.overlay); - this.overlay = null; - } - Ext.destroy(this.proxy); - this.proxy = null; - - var ps = Ext.Resizable.positions; - for(var k in ps){ - if(typeof ps[k] != "function" && this[ps[k]]){ - this[ps[k]].destroy(); - } - } - if(removeEl){ - this.el.update(""); - Ext.destroy(this.el); - this.el = null; - } - }, - - syncHandleHeight : function(){ - var h = this.el.getHeight(true); - if(this.west){ - this.west.el.setHeight(h); - } - if(this.east){ - this.east.el.setHeight(h); - } - } -}); - -// private -// hash to map config positions to true positions -Ext.Resizable.positions = { - n: "north", s: "south", e: "east", w: "west", se: "southeast", sw: "southwest", nw: "northwest", ne: "northeast" -}; - -// private -Ext.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){ - if(!this.tpl){ - // only initialize the template if resizable is used - var tpl = Ext.DomHelper.createTemplate( - {tag: "div", cls: "x-resizable-handle x-resizable-handle-{0}"} - ); - tpl.compile(); - 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.on("mousedown", this.onMouseDown, this); - if(!disableTrackOver){ - this.el.on("mouseover", this.onMouseOver, this); - this.el.on("mouseout", this.onMouseOut, this); - } -}; - -// private -Ext.Resizable.Handle.prototype = { - // private - afterResize : function(rz){ - // do nothing - }, - // private - onMouseDown : function(e){ - this.rz.onMouseDown(this, e); - }, - // private - onMouseOver : function(e){ - this.rz.handleOver(this, e); - }, - // private - onMouseOut : function(e){ - this.rz.handleOut(this, e); - }, - // private - destroy : function(){ - Ext.destroy(this.el); - this.el = null; - } -}; - - -