4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
13 * @class Roo.Resizable
14 * @extends Roo.util.Observable
15 * <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
16 * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
17 * the textarea in a div and set "resizeChild" to true (or to the id of the element), <b>or</b> set wrap:true in your config and
18 * the element will be wrapped for you automatically.</p>
19 * <p>Here is the list of valid resize handles:</p>
22 ------ -------------------
34 * <p>Here's an example showing the creation of a typical Resizable:</p>
36 var resizer = new Roo.Resizable("element-id", {
44 resizer.on("resize", myHandler);
46 * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
47 * resizer.east.setDisplayed(false);</p>
48 * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
49 * @cfg {Array/String} adjustments String "auto" or an array [width, height] with values to be <b>added</b> to the
50 * resize operation's new size (defaults to [0, 0])
51 * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
52 * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
53 * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
54 * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
55 * @cfg {Boolean} enabled False to disable resizing (defaults to true)
56 * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
57 * @cfg {Number} width The width of the element in pixels (defaults to null)
58 * @cfg {Number} height The height of the element in pixels (defaults to null)
59 * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
60 * @cfg {Number} duration Animation duration if animate = true (defaults to .35)
61 * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
62 * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined)
63 * @cfg {Boolean} multiDirectional <b>Deprecated</b>. The old style of adding multi-direction resize handles, deprecated
64 * in favor of the handles config option (defaults to false)
65 * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
66 * @cfg {String} easing Animation easing if animate = true (defaults to 'easingOutStrong')
67 * @cfg {Number} widthIncrement The increment to snap the width resize in pixels (dynamic must be true, defaults to 0)
68 * @cfg {Number} heightIncrement The increment to snap the height resize in pixels (dynamic must be true, defaults to 0)
69 * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
70 * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
71 * @cfg {Boolean} preserveRatio True to preserve the original ratio between height and width during resize (defaults to false)
72 * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
73 * @cfg {Number} minX The minimum allowed page X for the element (only used for west resizing, defaults to 0)
74 * @cfg {Number} minY The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
75 * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
77 * Create a new resizable component
78 * @param {String/HTMLElement/Roo.Element} el The id or element to resize
79 * @param {Object} config configuration options
81 Roo.Resizable = function(el, config)
83 this.el = Roo.get(el);
85 if(config && config.wrap){
86 config.resizeChild = this.el;
87 this.el = this.el.wrap(typeof config.wrap == "object" ? config.wrap : {cls:"xresizable-wrap"});
88 this.el.id = this.el.dom.id = config.resizeChild.id + "-rzwrap";
89 this.el.setStyle("overflow", "hidden");
90 this.el.setPositioning(config.resizeChild.getPositioning());
91 config.resizeChild.clearPositioning();
92 if(!config.width || !config.height){
93 var csize = config.resizeChild.getSize();
94 this.el.setSize(csize.width, csize.height);
96 if(config.pinned && !config.adjustments){
97 config.adjustments = "auto";
101 this.proxy = this.el.createProxy({tag: "div", cls: "x-resizable-proxy", id: this.el.id + "-rzproxy"});
102 this.proxy.unselectable();
103 this.proxy.enableDisplayMode('block');
105 Roo.apply(this, config);
108 this.disableTrackOver = true;
109 this.el.addClass("x-resizable-pinned");
111 // if the element isn't positioned, make it relative
112 var position = this.el.getStyle("position");
113 if(position != "absolute" && position != "fixed"){
114 this.el.setStyle("position", "relative");
116 if(!this.handles){ // no handles passed, must be legacy style
117 this.handles = 's,e,se';
118 if(this.multiDirectional){
119 this.handles += ',n,w';
122 if(this.handles == "all"){
123 this.handles = "n s e w ne nw se sw";
125 var hs = this.handles.split(/\s*?[,;]\s*?| /);
126 var ps = Roo.Resizable.positions;
127 for(var i = 0, len = hs.length; i < len; i++){
128 if(hs[i] && ps[hs[i]]){
130 this[pos] = new Roo.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent);
134 this.corner = this.southeast;
136 // updateBox = the box can move..
137 if(this.handles.indexOf("n") != -1 || this.handles.indexOf("w") != -1 || this.handles.indexOf("hd") != -1) {
138 this.updateBox = true;
141 this.activeHandle = null;
143 if(this.resizeChild){
144 if(typeof this.resizeChild == "boolean"){
145 this.resizeChild = Roo.get(this.el.dom.firstChild, true);
147 this.resizeChild = Roo.get(this.resizeChild, true);
151 if(this.adjustments == "auto"){
152 var rc = this.resizeChild;
153 var hw = this.west, he = this.east, hn = this.north, hs = this.south;
154 if(rc && (hw || hn)){
155 rc.position("relative");
156 rc.setLeft(hw ? hw.el.getWidth() : 0);
157 rc.setTop(hn ? hn.el.getHeight() : 0);
160 (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
161 (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
166 this.dd = this.dynamic ?
167 this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
168 this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
174 * @event beforeresize
175 * Fired before resize is allowed. Set enabled to false to cancel resize.
176 * @param {Roo.Resizable} this
177 * @param {Roo.EventObject} e The mousedown event
179 "beforeresize" : true,
183 * @param {Roo.Resizable} this
184 * @param {Number} x The new x position
185 * @param {Number} y The new y position
186 * @param {Number} w The new w width
187 * @param {Number} h The new h hight
188 * @param {Roo.EventObject} e The mouseup event
193 * Fired after a resize.
194 * @param {Roo.Resizable} this
195 * @param {Number} width The new width
196 * @param {Number} height The new height
197 * @param {Roo.EventObject} e The mouseup event
202 if(this.width !== null && this.height !== null){
203 this.resizeTo(this.width, this.height);
205 this.updateChildSize();
208 this.el.dom.style.zoom = 1;
210 Roo.Resizable.superclass.constructor.call(this);
213 Roo.extend(Roo.Resizable, Roo.util.Observable, {
215 adjustments : [0, 0],
225 multiDirectional : false,
226 disableTrackOver : false,
227 easing : 'easeOutStrong',
233 preserveRatio : false,
240 * @cfg {String/HTMLElement/Element} constrainTo Constrain the resize to a particular element
242 constrainTo: undefined,
244 * @cfg {Roo.lib.Region} resizeRegion Constrain the resize to a particular region
246 resizeRegion: undefined,
250 * Perform a manual resize
251 * @param {Number} width
252 * @param {Number} height
254 resizeTo : function(width, height){
255 this.el.setSize(width, height);
256 this.updateChildSize();
257 this.fireEvent("resize", this, width, height, null);
261 startSizing : function(e, handle){
262 this.fireEvent("beforeresize", this, e);
263 if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
266 this.overlay = this.el.createProxy({tag: "div", cls: "x-resizable-overlay", html: " "});
267 this.overlay.unselectable();
268 this.overlay.enableDisplayMode("block");
269 this.overlay.on("mousemove", this.onMouseMove, this);
270 this.overlay.on("mouseup", this.onMouseUp, this);
272 this.overlay.setStyle("cursor", handle.el.getStyle("cursor"));
274 this.resizing = true;
275 this.startBox = this.el.getBox();
276 this.startPoint = e.getXY();
277 this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
278 (this.startBox.y + this.startBox.height) - this.startPoint[1]];
280 this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
283 if(this.constrainTo) {
284 var ct = Roo.get(this.constrainTo);
285 this.resizeRegion = ct.getRegion().adjust(
286 ct.getFrameWidth('t'),
287 ct.getFrameWidth('l'),
288 -ct.getFrameWidth('b'),
289 -ct.getFrameWidth('r')
293 this.proxy.setStyle('visibility', 'hidden'); // workaround display none
295 this.proxy.setBox(this.startBox);
297 this.proxy.setStyle('visibility', 'visible');
303 onMouseDown : function(handle, e){
306 this.activeHandle = handle;
307 this.startSizing(e, handle);
312 onMouseUp : function(e){
313 var size = this.resizeElement();
314 this.resizing = false;
318 this.fireEvent("resize", this, size.width, size.height, e);
322 updateChildSize : function(){
324 if(this.resizeChild){
326 var child = this.resizeChild;
327 var adj = this.adjustments;
328 if(el.dom.offsetWidth){
329 var b = el.getSize(true);
330 child.setSize(b.width+adj[0], b.height+adj[1]);
332 // Second call here for IE
333 // The first call enables instant resizing and
334 // the second call corrects scroll bars if they
337 setTimeout(function(){
338 if(el.dom.offsetWidth){
339 var b = el.getSize(true);
340 child.setSize(b.width+adj[0], b.height+adj[1]);
348 snap : function(value, inc, min){
352 var newValue = value;
356 newValue = value + (inc-m);
358 newValue = value - m;
361 return Math.max(min, newValue);
365 resizeElement : function(){
366 var box = this.proxy.getBox();
368 this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
370 this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
372 this.updateChildSize();
380 constrain : function(v, diff, m, mx){
383 }else if(v - diff > mx){
390 onMouseMove : function(e){
393 try{// try catch so if something goes wrong the user doesn't get hung
395 if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
399 //var curXY = this.startPoint;
400 var curSize = this.curSize || this.startBox;
401 var x = this.startBox.x, y = this.startBox.y;
403 var w = curSize.width, h = curSize.height;
405 var mw = this.minWidth, mh = this.minHeight;
406 var mxw = this.maxWidth, mxh = this.maxHeight;
407 var wi = this.widthIncrement;
408 var hi = this.heightIncrement;
410 var eventXY = e.getXY();
411 var diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0]));
412 var diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1]));
414 var pos = this.activeHandle.position;
419 w = Math.min(Math.max(mw, w), mxw);
424 h = Math.min(Math.max(mh, h), mxh);
429 w = Math.min(Math.max(mw, w), mxw);
430 h = Math.min(Math.max(mh, h), mxh);
433 diffY = this.constrain(h, diffY, mh, mxh);
440 var adiffX = Math.abs(diffX);
441 var sub = (adiffX % wi); // how much
442 if (sub > (wi/2)) { // far enough to snap
443 diffX = (diffX > 0) ? diffX-sub + wi : diffX+sub - wi;
445 // remove difference..
446 diffX = (diffX > 0) ? diffX-sub : diffX+sub;
450 x = Math.max(this.minX, x);
453 diffX = this.constrain(w, diffX, mw, mxw);
459 w = Math.min(Math.max(mw, w), mxw);
460 diffY = this.constrain(h, diffY, mh, mxh);
465 diffX = this.constrain(w, diffX, mw, mxw);
466 diffY = this.constrain(h, diffY, mh, mxh);
473 diffX = this.constrain(w, diffX, mw, mxw);
475 h = Math.min(Math.max(mh, h), mxh);
481 var sw = this.snap(w, wi, mw);
482 var sh = this.snap(h, hi, mh);
483 if(sw != w || sh != h){
506 if(this.preserveRatio){
511 h = Math.min(Math.max(mh, h), mxh);
516 w = Math.min(Math.max(mw, w), mxw);
521 w = Math.min(Math.max(mw, w), mxw);
527 w = Math.min(Math.max(mw, w), mxw);
533 h = Math.min(Math.max(mh, h), mxh);
541 h = Math.min(Math.max(mh, h), mxh);
551 h = Math.min(Math.max(mh, h), mxh);
559 if (pos == 'hdrag') {
562 this.proxy.setBounds(x, y, w, h);
564 this.resizeElement();
568 this.fireEvent("resizing", this, x, y, w, h, e);
572 handleOver : function(){
574 this.el.addClass("x-resizable-over");
579 handleOut : function(){
581 this.el.removeClass("x-resizable-over");
586 * Returns the element this component is bound to.
587 * @return {Roo.Element}
594 * Returns the resizeChild element (or null).
595 * @return {Roo.Element}
597 getResizeChild : function(){
598 return this.resizeChild;
600 groupHandler : function()
605 * Destroys this resizable. If the element was wrapped and
606 * removeEl is not true then the element remains.
607 * @param {Boolean} removeEl (optional) true to remove the element from the DOM
609 destroy : function(removeEl){
612 this.overlay.removeAllListeners();
613 this.overlay.remove();
615 var ps = Roo.Resizable.positions;
617 if(typeof ps[k] != "function" && this[ps[k]]){
619 h.el.removeAllListeners();
631 // hash to map config positions to true positions
632 Roo.Resizable.positions = {
633 n: "north", s: "south", e: "east", w: "west", se: "southeast", sw: "southwest", nw: "northwest", ne: "northeast",
638 Roo.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){
640 // only initialize the template if resizable is used
641 var tpl = Roo.DomHelper.createTemplate(
642 {tag: "div", cls: "x-resizable-handle x-resizable-handle-{0}"}
645 Roo.Resizable.Handle.prototype.tpl = tpl;
649 // show north drag fro topdra
650 var handlepos = pos == 'hdrag' ? 'north' : pos;
652 this.el = this.tpl.append(rz.el.dom, [handlepos], true);
653 if (pos == 'hdrag') {
654 this.el.setStyle('cursor', 'pointer');
656 this.el.unselectable();
658 this.el.setOpacity(0);
660 this.el.on("mousedown", this.onMouseDown, this);
661 if(!disableTrackOver){
662 this.el.on("mouseover", this.onMouseOver, this);
663 this.el.on("mouseout", this.onMouseOut, this);
668 Roo.Resizable.Handle.prototype = {
669 afterResize : function(rz){
674 onMouseDown : function(e){
675 this.rz.onMouseDown(this, e);
678 onMouseOver : function(e){
679 this.rz.handleOver(this, e);
682 onMouseOut : function(e){
683 this.rz.handleOut(this, e);