src/widgets/Layer.js

   1 /*!
   2  * Ext JS Library 3.2.1
   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     isVisible : function(){
 249         return this.visible;
 250     },
 251
 252     // private
 253     showAction : function(){
 254         this.visible = true; // track visibility to prevent getStyle calls
 255         if(this.useDisplay === true){
 256             this.setDisplayed('');
 257         }else if(this.lastXY){
 258             supr.setXY.call(this, this.lastXY);
 259         }else if(this.lastLT){
 260             supr.setLeftTop.call(this, this.lastLT[0], this.lastLT[1]);
 261         }
 262     },
 263
 264     // private
 265     hideAction : function(){
 266         this.visible = false;
 267         if(this.useDisplay === true){
 268             this.setDisplayed(false);
 269         }else{
 270             this.setLeftTop(-10000,-10000);
 271         }
 272     },
 273
 274     // overridden Element method
 275     setVisible : function(v, a, d, c, e){
 276         if(v){
 277             this.showAction();
 278         }
 279         if(a && v){
 280             var cb = function(){
 281                 this.sync(true);
 282                 if(c){
 283                     c();
 284                 }
 285             }.createDelegate(this);
 286             supr.setVisible.call(this, true, true, d, cb, e);
 287         }else{
 288             if(!v){
 289                 this.hideUnders(true);
 290             }
 291             var cb = c;
 292             if(a){
 293                 cb = function(){
 294                     this.hideAction();
 295                     if(c){
 296                         c();
 297                     }
 298                 }.createDelegate(this);
 299             }
 300             supr.setVisible.call(this, v, a, d, cb, e);
 301             if(v){
 302                 this.sync(true);
 303             }else if(!a){
 304                 this.hideAction();
 305             }
 306         }
 307         return this;
 308     },
 309
 310     storeXY : function(xy){
 311         delete this.lastLT;
 312         this.lastXY = xy;
 313     },
 314
 315     storeLeftTop : function(left, top){
 316         delete this.lastXY;
 317         this.lastLT = [left, top];
 318     },
 319
 320     // private
 321     beforeFx : function(){
 322         this.beforeAction();
 323         return Ext.Layer.superclass.beforeFx.apply(this, arguments);
 324     },
 325
 326     // private
 327     afterFx : function(){
 328         Ext.Layer.superclass.afterFx.apply(this, arguments);
 329         this.sync(this.isVisible());
 330     },
 331
 332     // private
 333     beforeAction : function(){
 334         if(!this.updating && this.shadow){
 335             this.shadow.hide();
 336         }
 337     },
 338
 339     // overridden Element method
 340     setLeft : function(left){
 341         this.storeLeftTop(left, this.getTop(true));
 342         supr.setLeft.apply(this, arguments);
 343         this.sync();
 344         return this;
 345     },
 346
 347     setTop : function(top){
 348         this.storeLeftTop(this.getLeft(true), top);
 349         supr.setTop.apply(this, arguments);
 350         this.sync();
 351         return this;
 352     },
 353
 354     setLeftTop : function(left, top){
 355         this.storeLeftTop(left, top);
 356         supr.setLeftTop.apply(this, arguments);
 357         this.sync();
 358         return this;
 359     },
 360
 361     setXY : function(xy, a, d, c, e){
 362         this.fixDisplay();
 363         this.beforeAction();
 364         this.storeXY(xy);
 365         var cb = this.createCB(c);
 366         supr.setXY.call(this, xy, a, d, cb, e);
 367         if(!a){
 368             cb();
 369         }
 370         return this;
 371     },
 372
 373     // private
 374     createCB : function(c){
 375         var el = this;
 376         return function(){
 377             el.constrainXY();
 378             el.sync(true);
 379             if(c){
 380                 c();
 381             }
 382         };
 383     },
 384
 385     // overridden Element method
 386     setX : function(x, a, d, c, e){
 387         this.setXY([x, this.getY()], a, d, c, e);
 388         return this;
 389     },
 390
 391     // overridden Element method
 392     setY : function(y, a, d, c, e){
 393         this.setXY([this.getX(), y], a, d, c, e);
 394         return this;
 395     },
 396
 397     // overridden Element method
 398     setSize : function(w, h, a, d, c, e){
 399         this.beforeAction();
 400         var cb = this.createCB(c);
 401         supr.setSize.call(this, w, h, a, d, cb, e);
 402         if(!a){
 403             cb();
 404         }
 405         return this;
 406     },
 407
 408     // overridden Element method
 409     setWidth : function(w, a, d, c, e){
 410         this.beforeAction();
 411         var cb = this.createCB(c);
 412         supr.setWidth.call(this, w, a, d, cb, e);
 413         if(!a){
 414             cb();
 415         }
 416         return this;
 417     },
 418
 419     // overridden Element method
 420     setHeight : function(h, a, d, c, e){
 421         this.beforeAction();
 422         var cb = this.createCB(c);
 423         supr.setHeight.call(this, h, a, d, cb, e);
 424         if(!a){
 425             cb();
 426         }
 427         return this;
 428     },
 429
 430     // overridden Element method
 431     setBounds : function(x, y, w, h, a, d, c, e){
 432         this.beforeAction();
 433         var cb = this.createCB(c);
 434         if(!a){
 435             this.storeXY([x, y]);
 436             supr.setXY.call(this, [x, y]);
 437             supr.setSize.call(this, w, h, a, d, cb, e);
 438             cb();
 439         }else{
 440             supr.setBounds.call(this, x, y, w, h, a, d, cb, e);
 441         }
 442         return this;
 443     },
 444
 445     /**
 446      * Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer z-index is automatically
 447      * incremented by two more than the value passed in so that it always shows above any shadow or shim (the shadow
 448      * element, if any, will be assigned z-index + 1, and the shim element, if any, will be assigned the unmodified z-index).
 449      * @param {Number} zindex The new z-index to set
 450      * @return {this} The Layer
 451      */
 452     setZIndex : function(zindex){
 453         this.zindex = zindex;
 454         this.setStyle('z-index', zindex + 2);
 455         if(this.shadow){
 456             this.shadow.setZIndex(zindex + 1);
 457         }
 458         if(this.shim){
 459             this.shim.setStyle('z-index', zindex);
 460         }
 461         return this;
 462     }
 463 });
 464 })();