[Summary view] [Print] [Text view]

   1  /*
   2  YUI 3.17.2 (build 9c3c78e)
   3  Copyright 2014 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.17.2', {"requires": ["anim-base", "plugin", "widget"]});