src/widgets/Layer.js

   1 /*!
   2  * Ext JS Library 3.2.2
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   8  * @class Ext.Layer
   9  * @extends Ext.Element
  10  * An extended {@link Ext.Element} object that supports a shadow and shim, constrain to viewport and
  11  * automatic maintaining of shadow/shim positions.
  12  * @cfg {Boolean} shim False to disable the iframe shim in browsers which need one (defaults to true)
  13  * @cfg {String/Boolean} shadow True to automatically create an {@link Ext.Shadow}, or a string indicating the
  14  * shadow's display {@link Ext.Shadow#mode}. False to disable the shadow. (defaults to false)
  15  * @cfg {Object} dh DomHelper object config to create element with (defaults to {tag: 'div', cls: 'x-layer'}).
  16  * @cfg {Boolean} constrain False to disable constrain to viewport (defaults to true)
  17  * @cfg {String} cls CSS class to add to the element
  18  * @cfg {Number} zindex Starting z-index (defaults to 11000)
  19  * @cfg {Number} shadowOffset Number of pixels to offset the shadow (defaults to 4)
  20  * @cfg {Boolean} useDisplay
  21  * Defaults to use css offsets to hide the Layer. Specify <tt>true</tt>
  22  * to use css style <tt>'display:none;'</tt> to hide the Layer.
  23  * @constructor
  24  * @param {Object} config An object with config options.
  25  * @param {String/HTMLElement} existingEl (optional) Uses an existing DOM element. If the element is not found it creates it.
  26  */
  27 (function(){
  28 Ext.Layer = function(config, existingEl){
  29     config = config || {};
  30     var dh = Ext.DomHelper;
  31     var cp = config.parentEl, pel = cp ? Ext.getDom(cp) : document.body;
  32     if(existingEl){
  33         this.dom = Ext.getDom(existingEl);
  34     }
  35     if(!this.dom){
  36         var o = config.dh || {tag: 'div', cls: 'x-layer'};
  37         this.dom = dh.append(pel, o);
  38     }
  39     if(config.cls){
  40         this.addClass(config.cls);
  41     }
  42     this.constrain = config.constrain !== false;
  43     this.setVisibilityMode(Ext.Element.VISIBILITY);
  44     if(config.id){
  45         this.id = this.dom.id = config.id;
  46     }else{
  47         this.id = Ext.id(this.dom);
  48     }
  49     this.zindex = config.zindex || this.getZIndex();
  50     this.position('absolute', this.zindex);
  51     if(config.shadow){
  52         this.shadowOffset = config.shadowOffset || 4;
  53         this.shadow = new Ext.Shadow({
  54             offset : this.shadowOffset,
  55             mode : config.shadow
  56         });
  57     }else{
  58         this.shadowOffset = 0;
  59     }
  60     this.useShim = config.shim !== false && Ext.useShims;
  61     this.useDisplay = config.useDisplay;
  62     this.hide();
  63 };
  64
  65 var supr = Ext.Element.prototype;
  66
  67 // shims are shared among layer to keep from having 100 iframes
  68 var shims = [];
  69
  70 Ext.extend(Ext.Layer, Ext.Element, {
  71
  72     getZIndex : function(){
  73         return this.zindex || parseInt((this.getShim() || this).getStyle('z-index'), 10) || 11000;
  74     },
  75
  76     getShim : function(){
  77         if(!this.useShim){
  78             return null;
  79         }
  80         if(this.shim){
  81             return this.shim;
  82         }
  83         var shim = shims.shift();
  84         if(!shim){
  85             shim = this.createShim();
  86             shim.enableDisplayMode('block');
  87             shim.dom.style.display = 'none';
  88             shim.dom.style.visibility = 'visible';
  89         }
  90         var pn = this.dom.parentNode;
  91         if(shim.dom.parentNode != pn){
  92             pn.insertBefore(shim.dom, this.dom);
  93         }
  94         shim.setStyle('z-index', this.getZIndex()-2);
  95         this.shim = shim;
  96         return shim;
  97     },
  98
  99     hideShim : function(){
 100         if(this.shim){
 101             this.shim.setDisplayed(false);
 102             shims.push(this.shim);
 103             delete this.shim;
 104         }
 105     },
 106
 107     disableShadow : function(){
 108         if(this.shadow){
 109             this.shadowDisabled = true;
 110             this.shadow.hide();
 111             this.lastShadowOffset = this.shadowOffset;
 112             this.shadowOffset = 0;
 113         }
 114     },
 115
 116     enableShadow : function(show){
 117         if(this.shadow){
 118             this.shadowDisabled = false;
 119             this.shadowOffset = this.lastShadowOffset;
 120             delete this.lastShadowOffset;
 121             if(show){
 122                 this.sync(true);
 123             }
 124         }
 125     },
 126
 127     // private
 128     // this code can execute repeatedly in milliseconds (i.e. during a drag) so
 129     // code size was sacrificed for effeciency (e.g. no getBox/setBox, no XY calls)
 130     sync : function(doShow){
 131         var shadow = this.shadow;
 132         if(!this.updating && this.isVisible() && (shadow || this.useShim)){
 133             var shim = this.getShim(),
 134                 w = this.getWidth(),
 135                 h = this.getHeight(),
 136                 l = this.getLeft(true),
 137                 t = this.getTop(true);
 138
 139             if(shadow && !this.shadowDisabled){
 140                 if(doShow && !shadow.isVisible()){
 141                     shadow.show(this);
 142                 }else{
 143                     shadow.realign(l, t, w, h);
 144                 }
 145                 if(shim){
 146                     if(doShow){
 147                        shim.show();
 148                     }
 149                     // fit the shim behind the shadow, so it is shimmed too
 150                     var shadowAdj = shadow.el.getXY(), shimStyle = shim.dom.style,
 151                         shadowSize = shadow.el.getSize();
 152                     shimStyle.left = (shadowAdj[0])+'px';
 153                     shimStyle.top = (shadowAdj[1])+'px';
 154                     shimStyle.width = (shadowSize.width)+'px';
 155                     shimStyle.height = (shadowSize.height)+'px';
 156                 }
 157             }else if(shim){
 158                 if(doShow){
 159                    shim.show();
 160                 }
 161                 shim.setSize(w, h);
 162                 shim.setLeftTop(l, t);
 163             }
 164         }
 165     },
 166
 167     // private
 168     destroy : function(){
 169         this.hideShim();
 170         if(this.shadow){
 171             this.shadow.hide();
 172         }
 173         this.removeAllListeners();
 174         Ext.removeNode(this.dom);
 175         delete this.dom;
 176     },
 177
 178     remove : function(){
 179         this.destroy();
 180     },
 181
 182     // private
 183     beginUpdate : function(){
 184         this.updating = true;
 185     },
 186
 187     // private
 188     endUpdate : function(){
 189         this.updating = false;
 190         this.sync(true);
 191     },
 192
 193     // private
 194     hideUnders : function(negOffset){
 195         if(this.shadow){
 196             this.shadow.hide();
 197         }
 198         this.hideShim();
 199     },
 200
 201     // private
 202     constrainXY : function(){
 203         if(this.constrain){
 204             var vw = Ext.lib.Dom.getViewWidth(),
 205                 vh = Ext.lib.Dom.getViewHeight();
 206             var s = Ext.getDoc().getScroll();
 207
 208             var xy = this.getXY();
 209             var x = xy[0], y = xy[1];
 210             var so = this.shadowOffset;
 211             var w = this.dom.offsetWidth+so, h = this.dom.offsetHeight+so;
 212             // only move it if it needs it
 213             var moved = false;
 214             // first validate right/bottom
 215             if((x + w) > vw+s.left){
 216                 x = vw - w - so;
 217                 moved = true;
 218             }
 219             if((y + h) > vh+s.top){
 220                 y = vh - h - so;
 221                 moved = true;
 222             }
 223             // then make sure top/left isn't negative
 224             if(x < s.left){
 225                 x = s.left;
 226                 moved = true;
 227             }
 228             if(y < s.top){
 229                 y = s.top;
 230                 moved = true;
 231             }
 232             if(moved){
 233                 if(this.avoidY){
 234                     var ay = this.avoidY;
 235                     if(y <= ay && (y+h) >= ay){
 236                         y = ay-h-5;
 237                     }
 238                 }
 239                 xy = [x, y];
 240                 this.storeXY(xy);
 241                 supr.setXY.call(this, xy);
 242                 this.sync();
 243             }
 244         }
 245         return this;
 246     },
 247
 248     getConstrainOffset : function(){
 249         return this.shadowOffset;
 250     },
 251
 252     isVisible : function(){
 253         return this.visible;
 254     },
 255
 256     // private
 257     showAction : function(){
 258         this.visible = true; // track visibility to prevent getStyle calls
 259         if(this.useDisplay === true){
 260             this.setDisplayed('');
 261         }else if(this.lastXY){
 262             supr.setXY.call(this, this.lastXY);
 263         }else if(this.lastLT){
 264             supr.setLeftTop.call(this, this.lastLT[0], this.lastLT[1]);
 265         }
 266     },
 267
 268     // private
 269     hideAction : function(){
 270         this.visible = false;
 271         if(this.useDisplay === true){
 272             this.setDisplayed(false);
 273         }else{
 274             this.setLeftTop(-10000,-10000);
 275         }
 276     },
 277
 278     // overridden Element method
 279     setVisible : function(v, a, d, c, e){
 280         if(v){
 281             this.showAction();
 282         }
 283         if(a && v){
 284             var cb = function(){
 285                 this.sync(true);
 286                 if(c){
 287                     c();
 288                 }
 289             }.createDelegate(this);
 290             supr.setVisible.call(this, true, true, d, cb, e);
 291         }else{
 292             if(!v){
 293                 this.hideUnders(true);
 294             }
 295             var cb = c;
 296             if(a){
 297                 cb = function(){
 298                     this.hideAction();
 299                     if(c){
 300                         c();
 301                     }
 302                 }.createDelegate(this);
 303             }
 304             supr.setVisible.call(this, v, a, d, cb, e);
 305             if(v){
 306                 this.sync(true);
 307             }else if(!a){
 308                 this.hideAction();
 309             }
 310         }
 311         return this;
 312     },
 313
 314     storeXY : function(xy){
 315         delete this.lastLT;
 316         this.lastXY = xy;
 317     },
 318
 319     storeLeftTop : function(left, top){
 320         delete this.lastXY;
 321         this.lastLT = [left, top];
 322     },
 323
 324     // private
 325     beforeFx : function(){
 326         this.beforeAction();
 327         return Ext.Layer.superclass.beforeFx.apply(this, arguments);
 328     },
 329
 330     // private
 331     afterFx : function(){
 332         Ext.Layer.superclass.afterFx.apply(this, arguments);
 333         this.sync(this.isVisible());
 334     },
 335
 336     // private
 337     beforeAction : function(){
 338         if(!this.updating && this.shadow){
 339             this.shadow.hide();
 340         }
 341     },
 342
 343     // overridden Element method
 344     setLeft : function(left){
 345         this.storeLeftTop(left, this.getTop(true));
 346         supr.setLeft.apply(this, arguments);
 347         this.sync();
 348         return this;
 349     },
 350
 351     setTop : function(top){
 352         this.storeLeftTop(this.getLeft(true), top);
 353         supr.setTop.apply(this, arguments);
 354         this.sync();
 355         return this;
 356     },
 357
 358     setLeftTop : function(left, top){
 359         this.storeLeftTop(left, top);
 360         supr.setLeftTop.apply(this, arguments);
 361         this.sync();
 362         return this;
 363     },
 364
 365     setXY : function(xy, a, d, c, e){
 366         this.fixDisplay();
 367         this.beforeAction();
 368         this.storeXY(xy);
 369         var cb = this.createCB(c);
 370         supr.setXY.call(this, xy, a, d, cb, e);
 371         if(!a){
 372             cb();
 373         }
 374         return this;
 375     },
 376
 377     // private
 378     createCB : function(c){
 379         var el = this;
 380         return function(){
 381             el.constrainXY();
 382             el.sync(true);
 383             if(c){
 384                 c();
 385             }
 386         };
 387     },
 388
 389     // overridden Element method
 390     setX : function(x, a, d, c, e){
 391         this.setXY([x, this.getY()], a, d, c, e);
 392         return this;
 393     },
 394
 395     // overridden Element method
 396     setY : function(y, a, d, c, e){
 397         this.setXY([this.getX(), y], a, d, c, e);
 398         return this;
 399     },
 400
 401     // overridden Element method
 402     setSize : function(w, h, a, d, c, e){
 403         this.beforeAction();
 404         var cb = this.createCB(c);
 405         supr.setSize.call(this, w, h, a, d, cb, e);
 406         if(!a){
 407             cb();
 408         }
 409         return this;
 410     },
 411
 412     // overridden Element method
 413     setWidth : function(w, a, d, c, e){
 414         this.beforeAction();
 415         var cb = this.createCB(c);
 416         supr.setWidth.call(this, w, a, d, cb, e);
 417         if(!a){
 418             cb();
 419         }
 420         return this;
 421     },
 422
 423     // overridden Element method
 424     setHeight : function(h, a, d, c, e){
 425         this.beforeAction();
 426         var cb = this.createCB(c);
 427         supr.setHeight.call(this, h, a, d, cb, e);
 428         if(!a){
 429             cb();
 430         }
 431         return this;
 432     },
 433
 434     // overridden Element method
 435     setBounds : function(x, y, w, h, a, d, c, e){
 436         this.beforeAction();
 437         var cb = this.createCB(c);
 438         if(!a){
 439             this.storeXY([x, y]);
 440             supr.setXY.call(this, [x, y]);
 441             supr.setSize.call(this, w, h, a, d, cb, e);
 442             cb();
 443         }else{
 444             supr.setBounds.call(this, x, y, w, h, a, d, cb, e);
 445         }
 446         return this;
 447     },
 448
 449     /**
 450      * Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer z-index is automatically
 451      * incremented by two more than the value passed in so that it always shows above any shadow or shim (the shadow
 452      * element, if any, will be assigned z-index + 1, and the shim element, if any, will be assigned the unmodified z-index).
 453      * @param {Number} zindex The new z-index to set
 454      * @return {this} The Layer
 455      */
 456     setZIndex : function(zindex){
 457         this.zindex = zindex;
 458         this.setStyle('z-index', zindex + 2);
 459         if(this.shadow){
 460             this.shadow.setZIndex(zindex + 1);
 461         }
 462         if(this.shim){
 463             this.shim.setStyle('z-index', zindex);
 464         }
 465         return this;
 466     }
 467 });
 468 })();