3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * @class Ext.ux.Spotlight
17 * UX used to provide a spotlight around a specified component/element.
19 Ext.define('Ext.ux.Spotlight', {
24 * The baseCls for the spotlight elements
26 baseCls: 'x-spotlight',
29 * @cfg animate {Boolean} True to animate the spotlight change
35 * @cfg duration {Integer} The duration of the animation, in milliseconds
41 * @cfg easing {String} The type of easing for the spotlight animatation
48 * True if the spotlight is active on the element
53 * Create all the elements for the spotlight
55 createElements: function() {
56 var body = Ext.getBody();
58 this.right = body.createChild({
61 this.left = body.createChild({
64 this.top = body.createChild({
67 this.bottom = body.createChild({
71 this.all = Ext.create('Ext.CompositeElement', [this.right, this.left, this.top, this.bottom]);
77 show: function(el, callback, scope) {
78 //get the target element
79 this.el = Ext.get(el);
81 //create the elements if they don't already exist
83 this.createElements();
87 //if the spotlight is not active, show it
88 this.all.setDisplayed('');
90 Ext.EventManager.onWindowResize(this.syncSize, this);
91 this.applyBounds(this.animate, false);
93 //if the spotlight is currently active, just move it
94 this.applyBounds(false, false);
101 hide: function(callback, scope) {
102 Ext.EventManager.removeResizeListener(this.syncSize, this);
104 this.applyBounds(this.animate, true);
108 * Resizes the spotlight with the window size.
110 syncSize: function() {
111 this.applyBounds(false, false);
115 * Resizes the spotlight depending on the arguments
116 * @param {Boolean} animate True to animate the changing of the bounds
117 * @param {Boolean} animate True to reverse the animation
119 applyBounds: function(animate, reverse) {
121 box = me.el.getBox();
123 //get the current view width and height
124 var viewWidth = Ext.Element.getViewWidth(true);
125 var viewHeight = Ext.Element.getViewHeight(true);
131 //where the element should start (if animation)
136 width: (viewWidth - box.right),
153 y: (box.y + box.height),
155 height: (viewHeight - (box.y + box.height)) + 'px'
159 //where the element needs to finish
164 width: (viewWidth - box.right) + 'px',
165 height: (viewHeight - box.y) + 'px'
171 height: (box.y + box.height) + 'px'
176 width: (viewWidth - box.x) + 'px',
181 y: (box.y + box.height),
182 width: (box.x + box.width) + 'px',
183 height: (viewHeight - (box.y + box.height)) + 'px'
187 //reverse the objects
189 var clone = Ext.clone(from);
197 Ext.each(['right', 'left', 'top', 'bottom'], function(side) {
198 me[side].setBox(from[side]);
200 duration: me.duration,
207 Ext.each(['right', 'left', 'top', 'bottom'], function(side) {
208 me[side].setBox(Ext.apply(from[side], to[side]));
215 * Removes all the elements for the spotlight
217 destroy: function() {
218 Ext.destroy(this.right, this.left, this.top, this.bottom);