| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264 |
- /*
- Copyright (c) 2010, Yahoo! Inc. All rights reserved.
- Code licensed under the BSD License:
- http://developer.yahoo.com/yui/license.html
- version: 3.4.0
- build: nightly
- */
- YUI.add('widget-anim', function(Y) {
-
- /**
- * 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;
-
-
- }, '3.4.0' ,{requires:['plugin', 'anim-base', 'widget']});
|