API Docs for: 3.10.3
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. _isHidden: function() {
  45. return Y.DOM.getAttribute(this._node, 'hidden') === 'true';
  46. },
  47.  
  48. /**
  49. * Displays or hides the node.
  50. * If the "transition" module is loaded, toggleView optionally
  51. * animates the toggling of the node using given named effect.
  52. * @method toggleView
  53. * @for Node
  54. * @param {String} [name] An optional string value to use as transition effect.
  55. * @param {Boolean} [on] An optional boolean value to force the node to be shown or hidden
  56. * @param {Function} [callback] An optional function to run after the transition completes.
  57. * @chainable
  58. */
  59. toggleView: function(on, callback) {
  60. this._toggleView.apply(this, arguments);
  61. return this;
  62. },
  63.  
  64. _toggleView: function(on, callback) {
  65. callback = arguments[arguments.length - 1];
  66.  
  67. // base on current state if not forcing
  68. if (typeof on != 'boolean') {
  69. on = (this._isHidden()) ? 1 : 0;
  70. }
  71.  
  72. if (on) {
  73. this._show();
  74. } else {
  75. this._hide();
  76. }
  77.  
  78. if (typeof callback == 'function') {
  79. callback.call(this);
  80. }
  81.  
  82. return this;
  83. },
  84.  
  85. /**
  86. * Hides the node.
  87. * If the "transition" module is loaded, hide optionally
  88. * animates the hiding of the node using either the default
  89. * transition effect ('fadeOut'), or the given named effect.
  90. * @method hide
  91. * @param {String} name A named Transition effect to use as the show effect.
  92. * @param {Object} config Options to use with the transition.
  93. * @param {Function} callback An optional function to run after the transition completes.
  94. * @chainable
  95. */
  96. hide: function(callback) {
  97. callback = arguments[arguments.length - 1];
  98. this.toggleView(false, callback);
  99. return this;
  100. },
  101.  
  102. /**
  103. * The implementation for hiding nodes.
  104. * Default is to set the hidden attribute to true and set the CSS style.display to 'none'.
  105. * @method _hide
  106. * @protected
  107. * @chainable
  108. */
  109. _hide: function() {
  110. this.setAttribute('hidden', true);
  111.  
  112. // For back-compat we need to leave this in for browsers that
  113. // do not visually hide a node via the hidden attribute
  114. // and for users that check visibility based on style display.
  115. this.setStyle('display', 'none');
  116. }
  117. });
  118.  
  119. Y.NodeList.importMethod(Y.Node.prototype, [
  120. /**
  121. * Makes each node visible.
  122. * If the "transition" module is loaded, show optionally
  123. * animates the showing of the node using either the default
  124. * transition effect ('fadeIn'), or the given named effect.
  125. * @method show
  126. * @param {String} name A named Transition effect to use as the show effect.
  127. * @param {Object} config Options to use with the transition.
  128. * @param {Function} callback An optional function to run after the transition completes.
  129. * @for NodeList
  130. * @chainable
  131. */
  132. 'show',
  133.  
  134. /**
  135. * Hides each node.
  136. * If the "transition" module is loaded, hide optionally
  137. * animates the hiding of the node using either the default
  138. * transition effect ('fadeOut'), or the given named effect.
  139. * @method hide
  140. * @param {String} name A named Transition effect to use as the show effect.
  141. * @param {Object} config Options to use with the transition.
  142. * @param {Function} callback An optional function to run after the transition completes.
  143. * @chainable
  144. */
  145. 'hide',
  146.  
  147. /**
  148. * Displays or hides each node.
  149. * If the "transition" module is loaded, toggleView optionally
  150. * animates the toggling of the nodes using given named effect.
  151. * @method toggleView
  152. * @param {String} [name] An optional string value to use as transition effect.
  153. * @param {Boolean} [on] An optional boolean value to force the nodes to be shown or hidden
  154. * @param {Function} [callback] An optional function to run after the transition completes.
  155. * @chainable
  156. */
  157. 'toggleView'
  158. ]);
  159.