docs/source/Spotlight.html

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