Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / examples / ux / Spotlight.js
diff --git a/examples/ux/Spotlight.js b/examples/ux/Spotlight.js
new file mode 100644 (file)
index 0000000..3610728
--- /dev/null
@@ -0,0 +1,146 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Ext.ux.Spotlight = function(config){\r
+    Ext.apply(this, config);\r
+}\r
+Ext.ux.Spotlight.prototype = {\r
+    active : false,\r
+    animate : true,\r
+    duration: .25,\r
+    easing:'easeNone',\r
+\r
+    // private\r
+    animated : false,\r
+\r
+    createElements : function(){\r
+        var bd = Ext.getBody();\r
+\r
+        this.right = bd.createChild({cls:'x-spotlight'});\r
+        this.left = bd.createChild({cls:'x-spotlight'});\r
+        this.top = bd.createChild({cls:'x-spotlight'});\r
+        this.bottom = bd.createChild({cls:'x-spotlight'});\r
+\r
+        this.all = new Ext.CompositeElement([this.right, this.left, this.top, this.bottom]);\r
+    },\r
+\r
+    show : function(el, callback, scope){\r
+        if(this.animated){\r
+            this.show.defer(50, this, [el, callback, scope]);\r
+            return;\r
+        }\r
+        this.el = Ext.get(el);\r
+        if(!this.right){\r
+            this.createElements();\r
+        }\r
+        if(!this.active){\r
+            this.all.setDisplayed('');\r
+            this.applyBounds(true, false);\r
+            this.active = true;\r
+            Ext.EventManager.onWindowResize(this.syncSize, this);\r
+            this.applyBounds(false, this.animate, false, callback, scope);\r
+        }else{\r
+            this.applyBounds(false, false, false, callback, scope); // all these booleans look hideous\r
+        }\r
+    },\r
+\r
+    hide : function(callback, scope){\r
+        if(this.animated){\r
+            this.hide.defer(50, this, [callback, scope]);\r
+            return;\r
+        }\r
+        Ext.EventManager.removeResizeListener(this.syncSize, this);\r
+        this.applyBounds(true, this.animate, true, callback, scope);\r
+    },\r
+\r
+    doHide : function(){\r
+        this.active = false;\r
+        this.all.setDisplayed(false);\r
+    },\r
+\r
+    syncSize : function(){\r
+        this.applyBounds(false, false);\r
+    },\r
+\r
+    applyBounds : function(basePts, anim, doHide, callback, scope){\r
+\r
+        var rg = this.el.getRegion();\r
+\r
+        var dw = Ext.lib.Dom.getViewWidth(true);\r
+        var dh = Ext.lib.Dom.getViewHeight(true);\r
+\r
+        var c = 0, cb = false;\r
+        if(anim){\r
+            cb = {\r
+                callback: function(){\r
+                    c++;\r
+                    if(c == 4){\r
+                        this.animated = false;\r
+                        if(doHide){\r
+                            this.doHide();\r
+                        }\r
+                        Ext.callback(callback, scope, [this]);\r
+                    }\r
+                },\r
+                scope: this,\r
+                duration: this.duration,\r
+                easing: this.easing\r
+            };\r
+            this.animated = true;\r
+        }\r
+\r
+        this.right.setBounds(\r
+                rg.right,\r
+                basePts ? dh : rg.top,\r
+                dw - rg.right,\r
+                basePts ? 0 : (dh - rg.top),\r
+                cb);\r
+\r
+        this.left.setBounds(\r
+                0,\r
+                0,\r
+                rg.left,\r
+                basePts ? 0 : rg.bottom,\r
+                cb);\r
+\r
+        this.top.setBounds(\r
+                basePts ? dw : rg.left,\r
+                0,\r
+                basePts ? 0 : dw - rg.left,\r
+                rg.top,\r
+                cb);\r
+\r
+        this.bottom.setBounds(\r
+                0,\r
+                rg.bottom,\r
+                basePts ? 0 : rg.right,\r
+                dh - rg.bottom,\r
+                cb);\r
+\r
+        if(!anim){\r
+            if(doHide){\r
+                this.doHide();\r
+            }\r
+            if(callback){\r
+                Ext.callback(callback, scope, [this]);\r
+            }\r
+        }\r
+    },\r
+\r
+    destroy : function(){\r
+        this.doHide();\r
+        Ext.destroy(\r
+            this.right,\r
+            this.left,\r
+            this.top,\r
+            this.bottom);\r
+        delete this.el;\r
+        delete this.all;\r
+    }\r
+};\r
+\r
+//backwards compat\r
+Ext.Spotlight = Ext.ux.Spotlight;
\ No newline at end of file