Code:
Ext.define('overrides.Ext.ux.Spotlight', {
override: 'Ext.ux.Spotlight',
/**
* Show the spotlight
*/
show: function (el, callback, scope) {
var me = this;
//get the target element
me.el = Ext.get(el);
//create the elements if they don't already exist
if (!me.right) {
me.createElements();
}
if (!me.active) {
//if the spotlight is not active, show it
me.all.setDisplayed('');
me.active = true;
Ext.on('resize', me.syncSize, me);
me.applyBounds(me.animate, false, callback, scope); // FIX: added callback/scope
} else {
//if the spotlight is currently active, just move it
me.applyBounds(false, false, callback, scope); // FIX: added callback/scope
}
},
/**
* Hide the spotlight
*/
hide: function (callback, scope) {
var me = this;
Ext.un('resize', me.syncSize, me);
me.applyBounds(me.animate, true, callback, scope); // FIX: added callback/scope
},
/**
* Resizes the spotlight depending on the arguments
* @param {Boolean} animate True to animate the changing of the bounds
* @param {Boolean} reverse True to reverse the animation
*/
applyBounds: function (animate, reverse, callback, scope) {
var me = this,
box = me.el.getBox(),
//get the current view width and height
viewWidth = Ext.Element.getViewportWidth(),
viewHeight = Ext.Element.getViewportHeight(),
i = 0,
config = false,
from, to, clone;
//where the element should start (if animation)
from = {
right: {
x: box.right,
y: viewHeight,
width: (viewWidth - box.right),
height: 0
},
left: {
x: 0,
y: 0,
width: box.x,
height: 0
},
top: {
x: viewWidth,
y: 0,
width: 0,
height: box.y
},
bottom: {
x: 0,
y: (box.y + box.height),
width: 0,
height: (viewHeight - (box.y + box.height)) + 'px'
}
};
//where the element needs to finish
to = {
right: {
x: box.right,
y: box.y,
width: (viewWidth - box.right) + 'px',
height: (viewHeight - box.y) + 'px'
},
left: {
x: 0,
y: 0,
width: box.x + 'px',
height: (box.y + box.height) + 'px'
},
top: {
x: box.x,
y: 0,
width: (viewWidth - box.x) + 'px',
height: box.y + 'px'
},
bottom: {
x: 0,
y: (box.y + box.height),
width: (box.x + box.width) + 'px',
height: (viewHeight - (box.y + box.height)) + 'px'
}
};
//reverse the objects
if (reverse) {
clone = Ext.clone(from);
from = to;
to = clone;
}
if (animate) {
Ext.Array.forEach(['right', 'left', 'top', 'bottom'], function (side, i, all) {
/* FIX for missing callback support */
var listeners = i < all.length - 1 ? {} : {
listeners: {
afteranimate: {
fn: callback || Ext.emptyFn,
scope: scope
}
}
}
me[side].setBox(from[side]);
me[side].animate(Ext.apply({
duration: me.duration,
easing: me.easing,
to: to[side],
}, listeners));
},
this);
} else {
Ext.Array.forEach(['right', 'left', 'top', 'bottom'], function (side) {
me[side].setBox(Ext.apply(from[side], to[side]));
me[side].repaint();
/* FIX for missing callback support */
if (callback) {
callback.apply(scope); // not sure what arguments to pass here
}
},
this);
}
}
});
Spotlight has callbacks documented for show and hide but they are not implemented
Aucun commentaire:
Enregistrer un commentaire