define(['dojo/_base/declare',
|
'dojo/_base/lang',
|
'dojo/dom-class',
|
'dojo/dom-attr',
|
'dojo/_base/fx',
|
'./BaseIconItem'
|
], function(declare, lang, domClass, domAttr, baseFx, BaseIconItem){
|
var ANIMATION_DURATION = 500, ICON_IMG_SIZE = 20;
|
/**
|
* @exports themes/LaunchpadTheme/widgets/AnchorBarController/DockableItem
|
*/
|
var clazz = declare([BaseIconItem], {
|
/**
|
* The visibility of widget icon in controller
|
* @type {Boolean}
|
*/
|
visible: true,
|
|
postCreate: function(){
|
this.inherited(arguments);
|
|
domClass.add(this.iconItemNode, 'dockable');
|
domAttr.set(this.domNode, 'settingid', this.config.id);
|
},
|
|
/**
|
* AnimateProperty of hiding the iconItem
|
* @return {object} dojo._base.fx.animateProperty
|
*/
|
hideAnim: function(){
|
var nodeStyle = this.domNode.style,
|
animArray = [],
|
prop = {};
|
|
if(window.isRTL){
|
prop['margin-right'] = 0;
|
}else{
|
prop['margin-left'] = 0;
|
}
|
domClass.remove(this.iconItemStatus, 'selected');
|
|
animArray.push(baseFx.animateProperty({
|
node: this.domNode,
|
duration: ANIMATION_DURATION,
|
properties: prop,
|
onEnd: lang.hitch(this, function(){
|
nodeStyle.display = 'none';
|
this.visible = false;
|
})
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.iconItemNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
width: 1 // 0 causes IE to display the whole panel
|
}
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.imgNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
width: 1 // 0 causes IE to display the whole panel
|
}
|
}));
|
|
return animArray; // dojo/_base/fx.Animation
|
},
|
|
/**
|
* AnimateProperty of showing the iconItem. Learn from dojo.fx.WipeIn
|
* @return {[type]} [description]
|
*/
|
showAnim: function(marginValue){
|
var nodeStyle = this.domNode.style,
|
iconNodeStyle = this.iconItemNode.style,
|
imgStyle = this.imgNode.style,
|
animArray = [],
|
iconNodeSize = this.size,
|
prop = {},
|
transition;
|
|
transition = {
|
start: function(){
|
nodeStyle.display = '';
|
return 0;
|
},
|
end: marginValue
|
};
|
|
if(window.isRTL){
|
prop['margin-right'] = transition;
|
}else{
|
prop['margin-left'] = transition;
|
}
|
|
animArray.push(baseFx.animateProperty({
|
node: this.domNode,
|
duration: ANIMATION_DURATION,
|
properties: prop,
|
onEnd: lang.hitch(this, function(){
|
if(this.isOpen){
|
domClass.add(this.iconItemStatus, 'selected');
|
}
|
this.visible = true;
|
})
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.iconItemNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
width: {
|
start: function(){
|
iconNodeStyle.width = '1px';
|
return 1;
|
},
|
end: iconNodeSize
|
}
|
}
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.imgNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
width: {
|
start: function(){
|
imgStyle.width = '1px';
|
return 1;
|
},
|
end: ICON_IMG_SIZE
|
}
|
}
|
}));
|
|
return animArray; // dojo/_base/fx.Animation
|
}
|
});
|
return clazz;
|
});
|
