3
Copyright 2011 Yahoo! Inc. All rights reserved.
4
Licensed under the BSD License.
5
http://yuilibrary.com/license/
7
YUI.add('widget-anim', function(Y) {
10
* Provides a plugin which can be used to animate widget visibility changes.
14
var BOUNDING_BOX = "boundingBox",
23
RENDERED = "rendered",
28
DURATION = "duration",
29
ANIM_SHOW = "animShow",
30
ANIM_HIDE = "animHide",
32
_UI_SET_VISIBLE = "_uiSetVisible",
34
ANIM_SHOW_CHANGE = "animShowChange",
35
ANIM_HIDE_CHANGE = "animHideChange";
38
* A plugin class which can be used to animate widget visibility changes.
41
* @extends Plugin.Base
44
function WidgetAnim(config) {
45
WidgetAnim.superclass.constructor.apply(this, arguments);
49
* The namespace for the plugin. This will be the property on the widget, which will
50
* reference the plugin instance, when it's plugged in.
57
WidgetAnim.NS = "anim";
60
* The NAME of the WidgetAnim class. Used to prefix events generated
61
* by the plugin class.
66
* @default "pluginWidgetAnim"
68
WidgetAnim.NAME = "pluginWidgetAnim";
71
* Pre-Packaged Animation implementations, which can be used for animShow and animHide attribute
74
* @property ANIMATIONS
77
* @default "pluginWidgetAnim"
79
WidgetAnim.ANIMATIONS = {
83
var widget = this.get(HOST),
84
boundingBox = widget.get(BOUNDING_BOX),
89
duration: this.get(DURATION)
92
// Set initial opacity, to avoid initial flicker
93
if (!widget.get(VISIBLE)) {
94
boundingBox.setStyle(OPACITY, 0);
97
// Clean up, on destroy. Where supported, remove
98
// opacity set using style. Else make 100% opaque
99
anim.on(DESTROY, function() {
100
this.get(NODE).setStyle(OPACITY, (Y.UA.ie) ? 1 : EMPTY_STR);
106
fadeOut : function() {
108
node: this.get(HOST).get(BOUNDING_BOX),
110
duration: this.get(DURATION)
116
* Static property used to define the default attribute
117
* configuration for the plugin.
126
* Default duration in seconds. Used as the default duration for the default animation implementations
128
* @attribute duration
130
* @default 0.2 (seconds
137
* Default animation instance used for showing the widget (opacity fade-in)
139
* @attribute animShow
141
* @default WidgetAnim.ANIMATIONS.fadeIn
144
valueFn: WidgetAnim.ANIMATIONS.fadeIn
148
* Default animation instance used for hiding the widget (opacity fade-out)
150
* @attribute animHide
152
* @default WidgetAnim.ANIMATIONS.fadeOut
155
valueFn: WidgetAnim.ANIMATIONS.fadeOut
159
Y.extend(WidgetAnim, Y.Plugin.Base, {
162
* The initializer lifecycle implementation. Modifies the host widget's
163
* visibililty implementation to add animation.
165
* @method initializer
166
* @param {Object} config The user configuration for the plugin
168
initializer : function(config) {
169
this._bindAnimShow();
170
this._bindAnimHide();
172
this.after(ANIM_SHOW_CHANGE, this._bindAnimShow);
173
this.after(ANIM_HIDE_CHANGE, this._bindAnimHide);
175
// Override default _uiSetVisible method, with custom animated method
176
this.beforeHostMethod(_UI_SET_VISIBLE, this._uiAnimSetVisible);
180
* The initializer destructor implementation. Responsible for destroying the configured
181
* animation instances.
185
destructor : function() {
186
this.get(ANIM_SHOW).destroy();
187
this.get(ANIM_HIDE).destroy();
191
* The injected method used to override the host widget's _uiSetVisible implementation with
192
* an animated version of the same.
194
* <p>This method replaces the default _uiSetVisible handler
195
* Widget provides, by injecting itself before _uiSetVisible,
196
* and preventing the default behavior. </p>
198
* @method _uiAnimSetVisible
200
* @param {boolean} val true, if making the widget visible. false, if hiding it.
202
_uiAnimSetVisible : function(val) {
203
if (this.get(HOST).get(RENDERED)) {
205
this.get(ANIM_HIDE).stop();
206
this.get(ANIM_SHOW).run();
208
this.get(ANIM_SHOW).stop();
209
this.get(ANIM_HIDE).run();
211
return new Y.Do.Prevent();
216
* The original Widget _uiSetVisible implementation. This currently needs to be replicated,
217
* so it can be invoked before or after the animation starts or stops, since the original
218
* methods is not available to the AOP implementation.
220
* @method _uiSetVisible
221
* @param {boolean} val true, if making the widget visible. false, if hiding it.
224
_uiSetVisible : function(val) {
225
var host = this.get(HOST),
226
hiddenClass = host.getClassName(HIDDEN);
228
host.get(BOUNDING_BOX).toggleClass(hiddenClass, !val);
232
* Binds a listener to invoke the original visibility handling when the animShow animation is started
234
* @method _bindAnimShow
237
_bindAnimShow : function() {
238
// Setup original visibility handling (for show) before starting to animate
239
this.get(ANIM_SHOW).on(START,
241
this._uiSetVisible(true);
246
* Binds a listener to invoke the original visibility handling when the animHide animation is complete
248
* @method _bindAnimHide
251
_bindAnimHide : function() {
252
// Setup original visibility handling (for hide) after completing animation
253
this.get(ANIM_HIDE).after(END,
255
this._uiSetVisible(false);
260
Y.namespace("Plugin").WidgetAnim = WidgetAnim;
263
}, '3.4.1' ,{requires:['plugin', 'anim-base', 'widget']});