160 lines
No EOL
4.3 KiB
JavaScript
160 lines
No EOL
4.3 KiB
JavaScript
/*
|
|
This file is part of Ext JS 3.4
|
|
|
|
Copyright (c) 2011-2013 Sencha Inc
|
|
|
|
Contact: http://www.sencha.com/contact
|
|
|
|
GNU General Public License Usage
|
|
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.
|
|
|
|
If you are unsure which license is appropriate for your use, please contact the sales department
|
|
at http://www.sencha.com/contact.
|
|
|
|
Build date: 2013-04-03 15:07:25
|
|
*/
|
|
Ext.ux.Spotlight = function(config){
|
|
Ext.apply(this, config);
|
|
}
|
|
Ext.ux.Spotlight.prototype = {
|
|
active : false,
|
|
animate : true,
|
|
duration: .25,
|
|
easing:'easeNone',
|
|
|
|
// private
|
|
animated : false,
|
|
|
|
createElements : function(){
|
|
var bd = Ext.getBody();
|
|
|
|
this.right = bd.createChild({cls:'x-spotlight'});
|
|
this.left = bd.createChild({cls:'x-spotlight'});
|
|
this.top = bd.createChild({cls:'x-spotlight'});
|
|
this.bottom = bd.createChild({cls:'x-spotlight'});
|
|
|
|
this.all = new Ext.CompositeElement([this.right, this.left, this.top, this.bottom]);
|
|
},
|
|
|
|
show : function(el, callback, scope){
|
|
if(this.animated){
|
|
this.show.defer(50, this, [el, callback, scope]);
|
|
return;
|
|
}
|
|
this.el = Ext.get(el);
|
|
if(!this.right){
|
|
this.createElements();
|
|
}
|
|
if(!this.active){
|
|
this.all.setDisplayed('');
|
|
this.applyBounds(true, false);
|
|
this.active = true;
|
|
Ext.EventManager.onWindowResize(this.syncSize, this);
|
|
this.applyBounds(false, this.animate, false, callback, scope);
|
|
}else{
|
|
this.applyBounds(false, false, false, callback, scope); // all these booleans look hideous
|
|
}
|
|
},
|
|
|
|
hide : function(callback, scope){
|
|
if(this.animated){
|
|
this.hide.defer(50, this, [callback, scope]);
|
|
return;
|
|
}
|
|
Ext.EventManager.removeResizeListener(this.syncSize, this);
|
|
this.applyBounds(true, this.animate, true, callback, scope);
|
|
},
|
|
|
|
doHide : function(){
|
|
this.active = false;
|
|
this.all.setDisplayed(false);
|
|
},
|
|
|
|
syncSize : function(){
|
|
this.applyBounds(false, false);
|
|
},
|
|
|
|
applyBounds : function(basePts, anim, doHide, callback, scope){
|
|
|
|
var rg = this.el.getRegion();
|
|
|
|
var dw = Ext.lib.Dom.getViewWidth(true);
|
|
var dh = Ext.lib.Dom.getViewHeight(true);
|
|
|
|
var c = 0, cb = false;
|
|
if(anim){
|
|
cb = {
|
|
callback: function(){
|
|
c++;
|
|
if(c == 4){
|
|
this.animated = false;
|
|
if(doHide){
|
|
this.doHide();
|
|
}
|
|
Ext.callback(callback, scope, [this]);
|
|
}
|
|
},
|
|
scope: this,
|
|
duration: this.duration,
|
|
easing: this.easing
|
|
};
|
|
this.animated = true;
|
|
}
|
|
|
|
this.right.setBounds(
|
|
rg.right,
|
|
basePts ? dh : rg.top,
|
|
dw - rg.right,
|
|
basePts ? 0 : (dh - rg.top),
|
|
cb);
|
|
|
|
this.left.setBounds(
|
|
0,
|
|
0,
|
|
rg.left,
|
|
basePts ? 0 : rg.bottom,
|
|
cb);
|
|
|
|
this.top.setBounds(
|
|
basePts ? dw : rg.left,
|
|
0,
|
|
basePts ? 0 : dw - rg.left,
|
|
rg.top,
|
|
cb);
|
|
|
|
this.bottom.setBounds(
|
|
0,
|
|
rg.bottom,
|
|
basePts ? 0 : rg.right,
|
|
dh - rg.bottom,
|
|
cb);
|
|
|
|
if(!anim){
|
|
if(doHide){
|
|
this.doHide();
|
|
}
|
|
if(callback){
|
|
Ext.callback(callback, scope, [this]);
|
|
}
|
|
}
|
|
},
|
|
|
|
destroy : function(){
|
|
this.doHide();
|
|
Ext.destroy(
|
|
this.right,
|
|
this.left,
|
|
this.top,
|
|
this.bottom);
|
|
delete this.el;
|
|
delete this.all;
|
|
}
|
|
};
|
|
|
|
//backwards compat
|
|
Ext.Spotlight = Ext.ux.Spotlight; |