examples/docs/source/Spotlight.html

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