examples/ux/Spotlight.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 Ext.ux.Spotlight = function(config){
   8     Ext.apply(this, config);
   9 }
  10 Ext.ux.Spotlight.prototype = {
  11     active : false,
  12     animate : true,
  13     duration: .25,
  14     easing:'easeNone',
  15
  16     // private
  17     animated : false,
  18
  19     createElements : function(){
  20         var bd = Ext.getBody();
  21
  22         this.right = bd.createChild({cls:'x-spotlight'});
  23         this.left = bd.createChild({cls:'x-spotlight'});
  24         this.top = bd.createChild({cls:'x-spotlight'});
  25         this.bottom = bd.createChild({cls:'x-spotlight'});
  26
  27         this.all = new Ext.CompositeElement([this.right, this.left, this.top, this.bottom]);
  28     },
  29
  30     show : function(el, callback, scope){
  31         if(this.animated){
  32             this.show.defer(50, this, [el, callback, scope]);
  33             return;
  34         }
  35         this.el = Ext.get(el);
  36         if(!this.right){
  37             this.createElements();
  38         }
  39         if(!this.active){
  40             this.all.setDisplayed('');
  41             this.applyBounds(true, false);
  42             this.active = true;
  43             Ext.EventManager.onWindowResize(this.syncSize, this);
  44             this.applyBounds(false, this.animate, false, callback, scope);
  45         }else{
  46             this.applyBounds(false, false, false, callback, scope); // all these booleans look hideous
  47         }
  48     },
  49
  50     hide : function(callback, scope){
  51         if(this.animated){
  52             this.hide.defer(50, this, [callback, scope]);
  53             return;
  54         }
  55         Ext.EventManager.removeResizeListener(this.syncSize, this);
  56         this.applyBounds(true, this.animate, true, callback, scope);
  57     },
  58
  59     doHide : function(){
  60         this.active = false;
  61         this.all.setDisplayed(false);
  62     },
  63
  64     syncSize : function(){
  65         this.applyBounds(false, false);
  66     },
  67
  68     applyBounds : function(basePts, anim, doHide, callback, scope){
  69
  70         var rg = this.el.getRegion();
  71
  72         var dw = Ext.lib.Dom.getViewWidth(true);
  73         var dh = Ext.lib.Dom.getViewHeight(true);
  74
  75         var c = 0, cb = false;
  76         if(anim){
  77             cb = {
  78                 callback: function(){
  79                     c++;
  80                     if(c == 4){
  81                         this.animated = false;
  82                         if(doHide){
  83                             this.doHide();
  84                         }
  85                         Ext.callback(callback, scope, [this]);
  86                     }
  87                 },
  88                 scope: this,
  89                 duration: this.duration,
  90                 easing: this.easing
  91             };
  92             this.animated = true;
  93         }
  94
  95         this.right.setBounds(
  96                 rg.right,
  97                 basePts ? dh : rg.top,
  98                 dw - rg.right,
  99                 basePts ? 0 : (dh - rg.top),
 100                 cb);
 101
 102         this.left.setBounds(
 103                 0,
 104                 0,
 105                 rg.left,
 106                 basePts ? 0 : rg.bottom,
 107                 cb);
 108
 109         this.top.setBounds(
 110                 basePts ? dw : rg.left,
 111                 0,
 112                 basePts ? 0 : dw - rg.left,
 113                 rg.top,
 114                 cb);
 115
 116         this.bottom.setBounds(
 117                 0,
 118                 rg.bottom,
 119                 basePts ? 0 : rg.right,
 120                 dh - rg.bottom,
 121                 cb);
 122
 123         if(!anim){
 124             if(doHide){
 125                 this.doHide();
 126             }
 127             if(callback){
 128                 Ext.callback(callback, scope, [this]);
 129             }
 130         }
 131     },
 132
 133     destroy : function(){
 134         this.doHide();
 135         Ext.destroy(
 136             this.right,
 137             this.left,
 138             this.top,
 139             this.bottom);
 140         delete this.el;
 141         delete this.all;
 142     }
 143 };
 144
 145 //backwards compat
 146 Ext.Spotlight = Ext.ux.Spotlight;