-/*!
- * Ext JS Library 3.2.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-/**
- * @class Ext.Resizable
- * @extends 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 to the id of the element), <b>or</b> set wrap:true in your config and
- * the element will be wrapped for you automatically.</p>
- * <p>Here is the list of valid resize handles:</p>
- * <pre>
-Value Description
------- -------------------
- 'n' north
- 's' south
- 'e' east
- 'w' west
- 'nw' northwest
- 'sw' southwest
- 'se' southeast
- 'ne' northeast
- 'all' all
-</pre>
- * <p>Here's an example showing the creation of a typical Resizable:</p>
- * <pre><code>
-var resizer = new Ext.Resizable('element-id', {
- handles: 'all',
- minWidth: 200,
- minHeight: 100,
- maxWidth: 500,
- maxHeight: 400,
- pinned: true
-});
-resizer.on('resize', myHandler);
-</code></pre>
- * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
- * resizer.east.setDisplayed(false);</p>
- * @constructor
- * Create a new resizable component
- * @param {Mixed} el The id or element to resize
- * @param {Object} config configuration options
- */
-Ext.Resizable = Ext.extend(Ext.util.Observable, {
-
- constructor: 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, this.handleCls);
- }
- }
- // 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);
- if(this.constrainTo){
- this.dd.constrainTo(this.constrainTo);
- }
- }
-
- this.addEvents(
- /**
- * @event beforeresize
- * Fired before resize is allowed. Set {@link #enabled} to false to cancel resize.
- * @param {Ext.Resizable} this
- * @param {Ext.EventObject} e The mousedown event
- */
- 'beforeresize',
- /**
- * @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
- */
- '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);
- },
-
- /**
- * @cfg {Array/String} adjustments String 'auto' or an array [width, height] with values to be <b>added</b> to the
- * resize operation's new size (defaults to <tt>[0, 0]</tt>)
- */
- adjustments : [0, 0],
- /**
- * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
- */
- animate : false,
- /**
- * @cfg {Mixed} constrainTo Constrain the resize to a particular element
- */
- /**
- * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
- */
- disableTrackOver : false,
- /**
- * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
- */
- draggable: false,
- /**
- * @cfg {Number} duration Animation duration if animate = true (defaults to 0.35)
- */
- duration : 0.35,
- /**
- * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
- */
- dynamic : false,
- /**
- * @cfg {String} easing Animation easing if animate = true (defaults to <tt>'easingOutStrong'</tt>)
- */
- easing : 'easeOutStrong',
- /**
- * @cfg {Boolean} enabled False to disable resizing (defaults to true)
- */
- enabled : true,
- /**
- * @property enabled Writable. False if resizing is disabled.
- * @type Boolean
- */
- /**
- * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined).
- * Specify either <tt>'all'</tt> or any of <tt>'n s e w ne nw se sw'</tt>.
- */
- handles : false,
- /**
- * @cfg {Boolean} multiDirectional <b>Deprecated</b>. Deprecated style of adding multi-direction resize handles.
- */
- multiDirectional : false,
- /**
- * @cfg {Number} height The height of the element in pixels (defaults to null)
- */
- height : null,
- /**
- * @cfg {Number} width The width of the element in pixels (defaults to null)
- */
- width : null,
- /**
- * @cfg {Number} heightIncrement The increment to snap the height resize in pixels
- * (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.
- */
- heightIncrement : 0,
- /**
- * @cfg {Number} widthIncrement The increment to snap the width resize in pixels
- * (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.
- */
- widthIncrement : 0,
- /**
- * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
- */
- minHeight : 5,
- /**
- * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
- */
- minWidth : 5,
- /**
- * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
- */
- maxHeight : 10000,
- /**
- * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
- */
- maxWidth : 10000,
- /**
- * @cfg {Number} minX The minimum x for the element (defaults to 0)
- */
- minX: 0,
- /**
- * @cfg {Number} minY The minimum x for the element (defaults to 0)
- */
- minY: 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)
- */
- pinned : false,
- /**
- * @cfg {Boolean} preserveRatio True to preserve the original ratio between height
- * and width during resize (defaults to false)
- */
- preserveRatio : false,
- /**
- * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
- */
- resizeChild : false,
- /**
- * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
- */
- transparent: false,
- /**
- * @cfg {Ext.lib.Region} resizeRegion Constrain the resize to a particular region
- */
- /**
- * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
- * in favor of the handles config option (defaults to false)
- */
- /**
- * @cfg {String} handleCls A css class to add to each handle. Defaults to <tt>''</tt>.
- */
-
-
- /**
- * Perform a manual resize and fires the 'resize' event.
- * @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({
- scope: this,
- mousemove: this.onMouseMove,
- mouseup: this.onMouseUp
- });
- }
- 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){
- this.activeHandle = null;
- 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);
- },
-
- /**
- * <p>Performs resizing of the associated Element. This method is called internally by this
- * class, and should not be called by user code.</p>
- * <p>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.</p>
- * <p>The new area to be resized to is available by examining the state of the {@link #proxy}
- * Element. Example:
-<pre><code>
-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();
-</code></pre>
- */
- 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();
- }
- if(this.draggable && this.constrainTo){
- this.dd.resetConstraints();
- this.dd.constrainTo(this.constrainTo);
- }
- return box;
- },
-
- // private
- constrain : function(v, diff, m, mx){
- if(v - diff < m){
- diff = v - m;
- }else if(v - diff > mx){
- diff = v - mx;
- }
- return diff;
- },
-
- // private
- onMouseMove : function(e){
- if(this.enabled && this.activeHandle){
- 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,
- x = this.startBox.x, y = this.startBox.y,
- ox = x,
- oy = y,
- w = curSize.width,
- h = curSize.height,
- ow = w,
- oh = h,
- mw = this.minWidth,
- mh = this.minHeight,
- mxw = this.maxWidth,
- mxh = this.maxHeight,
- wi = this.widthIncrement,
- hi = this.heightIncrement,
- eventXY = e.getXY(),
- diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0])),
- diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1])),
- pos = this.activeHandle.position,
- tw,
- th;
-
- 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':
- 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);
- tw = w;
- w = ow * (h/oh);
- x += tw - w;
- break;
- case 'west':
- th = h;
- h = oh * (w/ow);
- h = Math.min(Math.max(mh, h), mxh);
- y += (th - h) / 2;
- tw = w;
- w = ow * (h/oh);
- x += tw - w;
- break;
- case 'northwest':
- tw = w;
- 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(ex){}
- }
- },
-
- // 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){
- Ext.destroy(this.dd, this.overlay, this.proxy);
- this.overlay = null;
- 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;
- }
- this.purgeListeners();
- },
-
- 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'
-};
-
-Ext.Resizable.Handle = Ext.extend(Object, {
- constructor : function(rz, pos, disableTrackOver, transparent, cls){
- 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);
- }
- if(!Ext.isEmpty(cls)){
- this.el.addClass(cls);
- }
- this.el.on('mousedown', this.onMouseDown, this);
- if(!disableTrackOver){
- this.el.on({
- scope: this,
- mouseover: this.onMouseOver,
- mouseout: this.onMouseOut
- });
- }
- },
-
- // 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;
- }
-});
git.ithinksw.org / extjs.git / blobdiff