examples/ux/Spotlight.js

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