- /**
- * Provides a plugin which can be used to animate widget visibility changes.
- *
- * @module widget-anim
- */
- var BOUNDING_BOX = "boundingBox",
- HOST = "host",
- NODE = "node",
- OPACITY = "opacity",
- EMPTY_STR = "",
- VISIBLE = "visible",
- DESTROY = "destroy",
- HIDDEN = "hidden",
- RENDERED = "rendered",
-
- START = "start",
- END = "end",
- DURATION = "duration",
- ANIM_SHOW = "animShow",
- ANIM_HIDE = "animHide",
- _UI_SET_VISIBLE = "_uiSetVisible",
-
- ANIM_SHOW_CHANGE = "animShowChange",
- ANIM_HIDE_CHANGE = "animHideChange";
- /**
- * A plugin class which can be used to animate widget visibility changes.
- *
- * @class WidgetAnim
- * @extends Plugin.Base
- * @namespace Plugin
- */
- function WidgetAnim(config) {
- WidgetAnim.superclass.constructor.apply(this, arguments);
- }
- /**
- * The namespace for the plugin. This will be the property on the widget, which will
- * reference the plugin instance, when it's plugged in.
- *
- * @property NS
- * @static
- * @type String
- * @default "anim"
- */
- WidgetAnim.NS = "anim";
- /**
- * The NAME of the WidgetAnim class. Used to prefix events generated
- * by the plugin class.
- *
- * @property NAME
- * @static
- * @type String
- * @default "pluginWidgetAnim"
- */
- WidgetAnim.NAME = "pluginWidgetAnim";
- /**
- * Pre-Packaged Animation implementations, which can be used for animShow and animHide attribute
- * values.
- *
- * @property ANIMATIONS
- * @static
- * @type Object
- * @default "pluginWidgetAnim"
- */
- WidgetAnim.ANIMATIONS = {
- fadeIn : function() {
- var widget = this.get(HOST),
- boundingBox = widget.get(BOUNDING_BOX),
-
- anim = new Y.Anim({
- node: boundingBox,
- to: { opacity: 1 },
- duration: this.get(DURATION)
- });
- // Set initial opacity, to avoid initial flicker
- if (!widget.get(VISIBLE)) {
- boundingBox.setStyle(OPACITY, 0);
- }
- // Clean up, on destroy. Where supported, remove
- // opacity set using style. Else make 100% opaque
- anim.on(DESTROY, function() {
- this.get(NODE).setStyle(OPACITY, (Y.UA.ie) ? 1 : EMPTY_STR);
- });
- return anim;
- },
- fadeOut : function() {
- return new Y.Anim({
- node: this.get(HOST).get(BOUNDING_BOX),
- to: { opacity: 0 },
- duration: this.get(DURATION)
- });
- }
- };
- /**
- * Static property used to define the default attribute
- * configuration for the plugin.
- *
- * @property ATTRS
- * @type Object
- * @static
- */
- WidgetAnim.ATTRS = {
- /**
- * Default duration in seconds. Used as the default duration for the default animation implementations
- *
- * @attribute duration
- * @type Number
- * @default 0.2 (seconds
- */
- duration : {
- value: 0.2
- },
- /**
- * Default animation instance used for showing the widget (opacity fade-in)
- *
- * @attribute animShow
- * @type Anim
- * @default WidgetAnim.ANIMATIONS.fadeIn
- */
- animShow : {
- valueFn: WidgetAnim.ANIMATIONS.fadeIn
- },
- /**
- * Default animation instance used for hiding the widget (opacity fade-out)
- *
- * @attribute animHide
- * @type Anim
- * @default WidgetAnim.ANIMATIONS.fadeOut
- */
- animHide : {
- valueFn: WidgetAnim.ANIMATIONS.fadeOut
- }
- };
- Y.extend(WidgetAnim, Y.Plugin.Base, {
- /**
- * The initializer lifecycle implementation. Modifies the host widget's
- * visibililty implementation to add animation.
- *
- * @method initializer
- * @param {Object} config The user configuration for the plugin
- */
- initializer : function(config) {
- this._bindAnimShow();
- this._bindAnimHide();
- this.after(ANIM_SHOW_CHANGE, this._bindAnimShow);
- this.after(ANIM_HIDE_CHANGE, this._bindAnimHide);
- // Override default _uiSetVisible method, with custom animated method
- this.beforeHostMethod(_UI_SET_VISIBLE, this._uiAnimSetVisible);
- },
- /**
- * The initializer destructor implementation. Responsible for destroying the configured
- * animation instances.
- *
- * @method destructor
- */
- destructor : function() {
- this.get(ANIM_SHOW).destroy();
- this.get(ANIM_HIDE).destroy();
- },
- /**
- * The injected method used to override the host widget's _uiSetVisible implementation with
- * an animated version of the same.
- *
- * <p>This method replaces the default _uiSetVisible handler
- * Widget provides, by injecting itself before _uiSetVisible,
- * and preventing the default behavior. </p>
- *
- * @method _uiAnimSetVisible
- * @protected
- * @param {boolean} val true, if making the widget visible. false, if hiding it.
- */
- _uiAnimSetVisible : function(val) {
- if (this.get(HOST).get(RENDERED)) {
- if (val) {
- this.get(ANIM_HIDE).stop();
- this.get(ANIM_SHOW).run();
- } else {
- this.get(ANIM_SHOW).stop();
- this.get(ANIM_HIDE).run();
- }
- return new Y.Do.Prevent();
- }
- },
- /**
- * The original Widget _uiSetVisible implementation. This currently needs to be replicated,
- * so it can be invoked before or after the animation starts or stops, since the original
- * methods is not available to the AOP implementation.
- *
- * @method _uiSetVisible
- * @param {boolean} val true, if making the widget visible. false, if hiding it.
- * @private
- */
- _uiSetVisible : function(val) {
- var host = this.get(HOST),
- hiddenClass = host.getClassName(HIDDEN);
- host.get(BOUNDING_BOX).toggleClass(hiddenClass, !val);
- },
- /**
- * Binds a listener to invoke the original visibility handling when the animShow animation is started
- *
- * @method _bindAnimShow
- * @private
- */
- _bindAnimShow : function() {
- // Setup original visibility handling (for show) before starting to animate
- this.get(ANIM_SHOW).on(START,
- Y.bind(function() {
- this._uiSetVisible(true);
- }, this));
- },
- /**
- * Binds a listener to invoke the original visibility handling when the animHide animation is complete
- *
- * @method _bindAnimHide
- * @private
- */
- _bindAnimHide : function() {
- // Setup original visibility handling (for hide) after completing animation
- this.get(ANIM_HIDE).after(END,
- Y.bind(function() {
- this._uiSetVisible(false);
- }, this));
- }
- });
- Y.namespace("Plugin").WidgetAnim = WidgetAnim;
-