API Docs for: 3.17.2
Show:

File: node/js/node-view.js

  1. /**
  2. * @module node
  3. * @submodule node-base
  4. */
  5.  
  6. var Y_Node = Y.Node;
  7.  
  8. Y.mix(Y_Node.prototype, {
  9. /**
  10. * Makes the node visible.
  11. * If the "transition" module is loaded, show optionally
  12. * animates the showing of the node using either the default
  13. * transition effect ('fadeIn'), or the given named effect.
  14. * @method show
  15. * @for Node
  16. * @param {String} name A named Transition effect to use as the show effect.
  17. * @param {Object} config Options to use with the transition.
  18. * @param {Function} callback An optional function to run after the transition completes.
  19. * @chainable
  20. */
  21. show: function(callback) {
  22. callback = arguments[arguments.length - 1];
  23. this.toggleView(true, callback);
  24. return this;
  25. },
  26.  
  27. /**
  28. * The implementation for showing nodes.
  29. * Default is to remove the hidden attribute and reset the CSS style.display property.
  30. * @method _show
  31. * @protected
  32. * @chainable
  33. */
  34. _show: function() {
  35. this.removeAttribute('hidden');
  36.  
  37. // For back-compat we need to leave this in for browsers that
  38. // do not visually hide a node via the hidden attribute
  39. // and for users that check visibility based on style display.
  40. this.setStyle('display', '');
  41.  
  42. },
  43.  
  44. /**
  45. Returns whether the node is hidden by YUI or not. The hidden status is
  46. determined by the 'hidden' attribute and the value of the 'display' CSS
  47. property.
  48.  
  49. @method _isHidden
  50. @return {Boolean} `true` if the node is hidden.
  51. @private
  52. **/
  53. _isHidden: function() {
  54. return this.hasAttribute('hidden') || Y.DOM.getComputedStyle(this._node, 'display') === 'none';
  55. },
  56.  
  57. /**
  58. * Displays or hides the node.
  59. * If the "transition" module is loaded, toggleView optionally
  60. * animates the toggling of the node using given named effect.
  61. * @method toggleView
  62. * @for Node
  63. * @param {Boolean} [on] An optional boolean value to force the node to be shown or hidden
  64. * @param {Function} [callback] An optional function to run after the transition completes.
  65. * @chainable
  66. */
  67. toggleView: function(on, callback) {
  68. this._toggleView.apply(this, arguments);
  69. return this;
  70. },
  71.  
  72. _toggleView: function(on, callback) {
  73. callback = arguments[arguments.length - 1];
  74.  
  75. // base on current state if not forcing
  76. if (typeof on != 'boolean') {
  77. on = (this._isHidden()) ? 1 : 0;
  78. }
  79.  
  80. if (on) {
  81. this._show();
  82. } else {
  83. this._hide();
  84. }
  85.  
  86. if (typeof callback == 'function') {
  87. callback.call(this);
  88. }
  89.  
  90. return this;
  91. },
  92.  
  93. /**
  94. * Hides the node.
  95. * If the "transition" module is loaded, hide optionally
  96. * animates the hiding of the node using either the default
  97. * transition effect ('fadeOut'), or the given named effect.
  98. * @method hide
  99. * @param {String} name A named Transition effect to use as the show effect.
  100. * @param {Object} config Options to use with the transition.
  101. * @param {Function} callback An optional function to run after the transition completes.
  102. * @chainable
  103. */
  104. hide: function(callback) {
  105. callback = arguments[arguments.length - 1];
  106. this.toggleView(false, callback);
  107. return this;
  108. },
  109.  
  110. /**
  111. * The implementation for hiding nodes.
  112. * Default is to set the hidden attribute to true and set the CSS style.display to 'none'.
  113. * @method _hide
  114. * @protected
  115. * @chainable
  116. */
  117. _hide: function() {
  118. this.setAttribute('hidden', 'hidden');
  119.  
  120. // For back-compat we need to leave this in for browsers that
  121. // do not visually hide a node via the hidden attribute
  122. // and for users that check visibility based on style display.
  123. this.setStyle('display', 'none');
  124. }
  125. });
  126.  
  127. Y.NodeList.importMethod(Y.Node.prototype, [
  128. /**
  129. * Makes each node visible.
  130. * If the "transition" module is loaded, show optionally
  131. * animates the showing of the node using either the default
  132. * transition effect ('fadeIn'), or the given named effect.
  133. * @method show
  134. * @param {String} name A named Transition effect to use as the show effect.
  135. * @param {Object} config Options to use with the transition.
  136. * @param {Function} callback An optional function to run after the transition completes.
  137. * @for NodeList
  138. * @chainable
  139. */
  140. 'show',
  141.  
  142. /**
  143. * Hides each node.
  144. * If the "transition" module is loaded, hide optionally
  145. * animates the hiding of the node using either the default
  146. * transition effect ('fadeOut'), or the given named effect.
  147. * @method hide
  148. * @param {String} name A named Transition effect to use as the show effect.
  149. * @param {Object} config Options to use with the transition.
  150. * @param {Function} callback An optional function to run after the transition completes.
  151. * @chainable
  152. */
  153. 'hide',
  154.  
  155. /**
  156. * Displays or hides each node.
  157. * If the "transition" module is loaded, toggleView optionally
  158. * animates the toggling of the nodes using given named effect.
  159. * @method toggleView
  160. * @param {Boolean} [on] An optional boolean value to force the nodes to be shown or hidden
  161. * @param {Function} [callback] An optional function to run after the transition completes.
  162. * @chainable
  163. */
  164. 'toggleView'
  165. ]);
  166.