Dashboard sipadu mbip
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

widget-anim-debug.js 6.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. /*
  2. Copyright (c) 2010, Yahoo! Inc. All rights reserved.
  3. Code licensed under the BSD License:
  4. http://developer.yahoo.com/yui/license.html
  5. version: 3.4.0
  6. build: nightly
  7. */
  8. YUI.add('widget-anim', function(Y) {
  9. /**
  10. * Provides a plugin which can be used to animate widget visibility changes.
  11. *
  12. * @module widget-anim
  13. */
  14. var BOUNDING_BOX = "boundingBox",
  15. HOST = "host",
  16. NODE = "node",
  17. OPACITY = "opacity",
  18. EMPTY_STR = "",
  19. VISIBLE = "visible",
  20. DESTROY = "destroy",
  21. HIDDEN = "hidden",
  22. RENDERED = "rendered",
  23. START = "start",
  24. END = "end",
  25. DURATION = "duration",
  26. ANIM_SHOW = "animShow",
  27. ANIM_HIDE = "animHide",
  28. _UI_SET_VISIBLE = "_uiSetVisible",
  29. ANIM_SHOW_CHANGE = "animShowChange",
  30. ANIM_HIDE_CHANGE = "animHideChange";
  31. /**
  32. * A plugin class which can be used to animate widget visibility changes.
  33. *
  34. * @class WidgetAnim
  35. * @extends Plugin.Base
  36. * @namespace Plugin
  37. */
  38. function WidgetAnim(config) {
  39. WidgetAnim.superclass.constructor.apply(this, arguments);
  40. }
  41. /**
  42. * The namespace for the plugin. This will be the property on the widget, which will
  43. * reference the plugin instance, when it's plugged in.
  44. *
  45. * @property NS
  46. * @static
  47. * @type String
  48. * @default "anim"
  49. */
  50. WidgetAnim.NS = "anim";
  51. /**
  52. * The NAME of the WidgetAnim class. Used to prefix events generated
  53. * by the plugin class.
  54. *
  55. * @property NAME
  56. * @static
  57. * @type String
  58. * @default "pluginWidgetAnim"
  59. */
  60. WidgetAnim.NAME = "pluginWidgetAnim";
  61. /**
  62. * Pre-Packaged Animation implementations, which can be used for animShow and animHide attribute
  63. * values.
  64. *
  65. * @property ANIMATIONS
  66. * @static
  67. * @type Object
  68. * @default "pluginWidgetAnim"
  69. */
  70. WidgetAnim.ANIMATIONS = {
  71. fadeIn : function() {
  72. var widget = this.get(HOST),
  73. boundingBox = widget.get(BOUNDING_BOX),
  74. anim = new Y.Anim({
  75. node: boundingBox,
  76. to: { opacity: 1 },
  77. duration: this.get(DURATION)
  78. });
  79. // Set initial opacity, to avoid initial flicker
  80. if (!widget.get(VISIBLE)) {
  81. boundingBox.setStyle(OPACITY, 0);
  82. }
  83. // Clean up, on destroy. Where supported, remove
  84. // opacity set using style. Else make 100% opaque
  85. anim.on(DESTROY, function() {
  86. this.get(NODE).setStyle(OPACITY, (Y.UA.ie) ? 1 : EMPTY_STR);
  87. });
  88. return anim;
  89. },
  90. fadeOut : function() {
  91. return new Y.Anim({
  92. node: this.get(HOST).get(BOUNDING_BOX),
  93. to: { opacity: 0 },
  94. duration: this.get(DURATION)
  95. });
  96. }
  97. };
  98. /**
  99. * Static property used to define the default attribute
  100. * configuration for the plugin.
  101. *
  102. * @property ATTRS
  103. * @type Object
  104. * @static
  105. */
  106. WidgetAnim.ATTRS = {
  107. /**
  108. * Default duration in seconds. Used as the default duration for the default animation implementations
  109. *
  110. * @attribute duration
  111. * @type Number
  112. * @default 0.2 (seconds
  113. */
  114. duration : {
  115. value: 0.2
  116. },
  117. /**
  118. * Default animation instance used for showing the widget (opacity fade-in)
  119. *
  120. * @attribute animShow
  121. * @type Anim
  122. * @default WidgetAnim.ANIMATIONS.fadeIn
  123. */
  124. animShow : {
  125. valueFn: WidgetAnim.ANIMATIONS.fadeIn
  126. },
  127. /**
  128. * Default animation instance used for hiding the widget (opacity fade-out)
  129. *
  130. * @attribute animHide
  131. * @type Anim
  132. * @default WidgetAnim.ANIMATIONS.fadeOut
  133. */
  134. animHide : {
  135. valueFn: WidgetAnim.ANIMATIONS.fadeOut
  136. }
  137. };
  138. Y.extend(WidgetAnim, Y.Plugin.Base, {
  139. /**
  140. * The initializer lifecycle implementation. Modifies the host widget's
  141. * visibililty implementation to add animation.
  142. *
  143. * @method initializer
  144. * @param {Object} config The user configuration for the plugin
  145. */
  146. initializer : function(config) {
  147. this._bindAnimShow();
  148. this._bindAnimHide();
  149. this.after(ANIM_SHOW_CHANGE, this._bindAnimShow);
  150. this.after(ANIM_HIDE_CHANGE, this._bindAnimHide);
  151. // Override default _uiSetVisible method, with custom animated method
  152. this.beforeHostMethod(_UI_SET_VISIBLE, this._uiAnimSetVisible);
  153. },
  154. /**
  155. * The initializer destructor implementation. Responsible for destroying the configured
  156. * animation instances.
  157. *
  158. * @method destructor
  159. */
  160. destructor : function() {
  161. this.get(ANIM_SHOW).destroy();
  162. this.get(ANIM_HIDE).destroy();
  163. },
  164. /**
  165. * The injected method used to override the host widget's _uiSetVisible implementation with
  166. * an animated version of the same.
  167. *
  168. * <p>This method replaces the default _uiSetVisible handler
  169. * Widget provides, by injecting itself before _uiSetVisible,
  170. * and preventing the default behavior. </p>
  171. *
  172. * @method _uiAnimSetVisible
  173. * @protected
  174. * @param {boolean} val true, if making the widget visible. false, if hiding it.
  175. */
  176. _uiAnimSetVisible : function(val) {
  177. if (this.get(HOST).get(RENDERED)) {
  178. if (val) {
  179. this.get(ANIM_HIDE).stop();
  180. this.get(ANIM_SHOW).run();
  181. } else {
  182. this.get(ANIM_SHOW).stop();
  183. this.get(ANIM_HIDE).run();
  184. }
  185. return new Y.Do.Prevent();
  186. }
  187. },
  188. /**
  189. * The original Widget _uiSetVisible implementation. This currently needs to be replicated,
  190. * so it can be invoked before or after the animation starts or stops, since the original
  191. * methods is not available to the AOP implementation.
  192. *
  193. * @method _uiSetVisible
  194. * @param {boolean} val true, if making the widget visible. false, if hiding it.
  195. * @private
  196. */
  197. _uiSetVisible : function(val) {
  198. var host = this.get(HOST),
  199. hiddenClass = host.getClassName(HIDDEN);
  200. host.get(BOUNDING_BOX).toggleClass(hiddenClass, !val);
  201. },
  202. /**
  203. * Binds a listener to invoke the original visibility handling when the animShow animation is started
  204. *
  205. * @method _bindAnimShow
  206. * @private
  207. */
  208. _bindAnimShow : function() {
  209. // Setup original visibility handling (for show) before starting to animate
  210. this.get(ANIM_SHOW).on(START,
  211. Y.bind(function() {
  212. this._uiSetVisible(true);
  213. }, this));
  214. },
  215. /**
  216. * Binds a listener to invoke the original visibility handling when the animHide animation is complete
  217. *
  218. * @method _bindAnimHide
  219. * @private
  220. */
  221. _bindAnimHide : function() {
  222. // Setup original visibility handling (for hide) after completing animation
  223. this.get(ANIM_HIDE).after(END,
  224. Y.bind(function() {
  225. this._uiSetVisible(false);
  226. }, this));
  227. }
  228. });
  229. Y.namespace("Plugin").WidgetAnim = WidgetAnim;
  230. }, '3.4.0' ,{requires:['plugin', 'anim-base', 'widget']});