1 /*

     2 YUI 3.10.3 (build 2fb5187)

     3 Copyright 2013 Yahoo! Inc. All rights reserved.

     4 Licensed under the BSD License.

     5 http://yuilibrary.com/license/

     6 */

     7 

     8 YUI.add('widget-anim', function (Y, NAME) {

     9 

    10 /**

    11  * Provides a plugin which can be used to animate widget visibility changes.

    12  *

    13  * @module widget-anim

    14  */

    15 var BOUNDING_BOX = "boundingBox",

    16     HOST = "host",

    17     NODE = "node",

    18     OPACITY = "opacity",

    19     EMPTY_STR = "",

    20     VISIBLE = "visible",

    21     DESTROY = "destroy",

    22     HIDDEN = "hidden",

    23 

    24     RENDERED = "rendered",

    25     

    26     START = "start",

    27     END = "end",

    28 

    29     DURATION = "duration",

    30     ANIM_SHOW = "animShow",

    31     ANIM_HIDE = "animHide",

    32 

    33     _UI_SET_VISIBLE = "_uiSetVisible",

    34     

    35     ANIM_SHOW_CHANGE = "animShowChange",

    36     ANIM_HIDE_CHANGE = "animHideChange";

    37 

    38 /**

    39  * A plugin class which can be used to animate widget visibility changes.

    40  *

    41  * @class WidgetAnim

    42  * @extends Plugin.Base

    43  * @namespace Plugin

    44  */

    45 function WidgetAnim(config) {

    46     WidgetAnim.superclass.constructor.apply(this, arguments);

    47 }

    48 

    49 /**

    50  * The namespace for the plugin. This will be the property on the widget, which will 

    51  * reference the plugin instance, when it's plugged in.

    52  *

    53  * @property NS

    54  * @static

    55  * @type String

    56  * @default "anim"

    57  */

    58 WidgetAnim.NS = "anim";

    59 

    60 /**

    61  * The NAME of the WidgetAnim class. Used to prefix events generated

    62  * by the plugin class.

    63  *

    64  * @property NAME

    65  * @static

    66  * @type String

    67  * @default "pluginWidgetAnim"

    68  */

    69 WidgetAnim.NAME = "pluginWidgetAnim";

    70 

    71 /**

    72  * Pre-Packaged Animation implementations, which can be used for animShow and animHide attribute 

    73  * values.

    74  *

    75  * @property ANIMATIONS

    76  * @static

    77  * @type Object

    78  * @default "pluginWidgetAnim"

    79  */

    80 WidgetAnim.ANIMATIONS = {

    81 

    82     fadeIn : function() {

    83 

    84         var widget = this.get(HOST),

    85             boundingBox = widget.get(BOUNDING_BOX),

    86             

    87             anim = new Y.Anim({

    88                 node: boundingBox,

    89                 to: { opacity: 1 },

    90                 duration: this.get(DURATION)

    91             });

    92 

    93         // Set initial opacity, to avoid initial flicker

    94         if (!widget.get(VISIBLE)) {

    95             boundingBox.setStyle(OPACITY, 0);

    96         }

    97 

    98         // Clean up, on destroy. Where supported, remove

    99         // opacity set using style. Else make 100% opaque

   100         anim.on(DESTROY, function() {

   101             this.get(NODE).setStyle(OPACITY, (Y.UA.ie) ? 1 : EMPTY_STR);

   102         });

   103 

   104         return anim;

   105     },

   106 

   107     fadeOut : function() {

   108         return new Y.Anim({

   109             node: this.get(HOST).get(BOUNDING_BOX),

   110             to: { opacity: 0 },

   111             duration: this.get(DURATION)

   112         });

   113     }

   114 };

   115 

   116 /**

   117  * Static property used to define the default attribute 

   118  * configuration for the plugin.

   119  *

   120  * @property ATTRS

   121  * @type Object

   122  * @static

   123  */

   124 WidgetAnim.ATTRS = {

   125 

   126     /**

   127      * Default duration in seconds. Used as the default duration for the default animation implementations

   128      *

   129      * @attribute duration

   130      * @type Number

   131      * @default 0.2 (seconds 

   132      */

   133     duration : {

   134         value: 0.2

   135     },

   136 

   137     /**

   138      * Default animation instance used for showing the widget (opacity fade-in)

   139      * 

   140      * @attribute animShow

   141      * @type Anim

   142      * @default WidgetAnim.ANIMATIONS.fadeIn

   143      */

   144     animShow : {

   145         valueFn: WidgetAnim.ANIMATIONS.fadeIn

   146     },

   147 

   148     /**

   149      * Default animation instance used for hiding the widget (opacity fade-out)

   150      *

   151      * @attribute animHide

   152      * @type Anim

   153      * @default WidgetAnim.ANIMATIONS.fadeOut

   154      */

   155     animHide : {

   156         valueFn: WidgetAnim.ANIMATIONS.fadeOut

   157     }

   158 };

   159 

   160 Y.extend(WidgetAnim, Y.Plugin.Base, {

   161 

   162     /**

   163      * The initializer lifecycle implementation. Modifies the host widget's 

   164      * visibililty implementation to add animation.

   165      *

   166      * @method initializer

   167      * @param {Object} config The user configuration for the plugin  

   168      */

   169     initializer : function(config) {

   170         this._bindAnimShow();

   171         this._bindAnimHide();

   172 

   173         this.after(ANIM_SHOW_CHANGE, this._bindAnimShow);

   174         this.after(ANIM_HIDE_CHANGE, this._bindAnimHide);

   175 

   176         // Override default _uiSetVisible method, with custom animated method

   177         this.beforeHostMethod(_UI_SET_VISIBLE, this._uiAnimSetVisible);

   178     },

   179 

   180     /**

   181      * The initializer destructor implementation. Responsible for destroying the configured

   182      * animation instances.

   183      * 

   184      * @method destructor

   185      */

   186     destructor : function() {

   187         this.get(ANIM_SHOW).destroy();

   188         this.get(ANIM_HIDE).destroy();

   189     },

   190 

   191     /**

   192      * The injected method used to override the host widget's _uiSetVisible implementation with

   193      * an animated version of the same.

   194      *

   195      * <p>This method replaces the default _uiSetVisible handler

   196      * Widget provides, by injecting itself before _uiSetVisible,

   197      * and preventing the default behavior. </p>

   198      *

   199      * @method _uiAnimSetVisible

   200      * @protected

   201      * @param {boolean} val true, if making the widget visible. false, if hiding it.

   202      */

   203     _uiAnimSetVisible : function(val) {

   204         if (this.get(HOST).get(RENDERED)) {

   205             if (val) {

   206                 this.get(ANIM_HIDE).stop();

   207                 this.get(ANIM_SHOW).run();

   208             } else {

   209                 this.get(ANIM_SHOW).stop();

   210                 this.get(ANIM_HIDE).run();

   211             }

   212             return new Y.Do.Prevent();

   213         }

   214     },

   215 

   216     /**

   217      * The original Widget _uiSetVisible implementation. This currently needs to be replicated,

   218      * so it can be invoked before or after the animation starts or stops, since the original

   219      * methods is not available to the AOP implementation.

   220      *

   221      * @method _uiSetVisible

   222      * @param {boolean} val true, if making the widget visible. false, if hiding it.

   223      * @private

   224      */

   225     _uiSetVisible : function(val) {

   226         var host = this.get(HOST),

   227             hiddenClass = host.getClassName(HIDDEN);

   228 

   229         host.get(BOUNDING_BOX).toggleClass(hiddenClass, !val);

   230     },

   231 

   232     /**

   233      * Binds a listener to invoke the original visibility handling when the animShow animation is started

   234      *

   235      * @method _bindAnimShow

   236      * @private

   237      */

   238     _bindAnimShow : function() {

   239         // Setup original visibility handling (for show) before starting to animate

   240         this.get(ANIM_SHOW).on(START, 

   241             Y.bind(function() {

   242                 this._uiSetVisible(true);

   243             }, this));

   244     },

   245 

   246     /**

   247      * Binds a listener to invoke the original visibility handling when the animHide animation is complete

   248      *

   249      * @method _bindAnimHide

   250      * @private

   251      */

   252     _bindAnimHide : function() {

   253         // Setup original visibility handling (for hide) after completing animation

   254         this.get(ANIM_HIDE).after(END, 

   255             Y.bind(function() {

   256                 this._uiSetVisible(false);

   257             }, this));

   258     }

   259 });

   260 

   261 Y.namespace("Plugin").WidgetAnim = WidgetAnim;

   262 

   263 

   264 }, '3.10.3', {"requires": ["anim-base", "plugin", "widget"]});