lib/yuilib/3.13.0/widget-anim/widget-anim.js

   1 /*
   2 YUI 3.13.0 (build 508226d)
   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.13.0', {"requires": ["anim-base", "plugin", "widget"]});