[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('node-style', function (Y, NAME) {
   9  
  10  (function(Y) {
  11  /**
  12   * Extended Node interface for managing node styles.
  13   * @module node
  14   * @submodule node-style
  15   */
  16  
  17  Y.mix(Y.Node.prototype, {
  18      /**
  19       * Sets a style property of the node.
  20       * Use camelCase (e.g. 'backgroundColor') for multi-word properties.
  21       * @method setStyle
  22       * @param {String} attr The style attribute to set.
  23       * @param {String|Number} val The value.
  24       * @chainable
  25       */
  26      setStyle: function(attr, val) {
  27          Y.DOM.setStyle(this._node, attr, val);
  28          return this;
  29      },
  30  
  31      /**
  32       * Sets multiple style properties on the node.
  33       * Use camelCase (e.g. 'backgroundColor') for multi-word properties.
  34       * @method setStyles
  35       * @param {Object} hash An object literal of property:value pairs.
  36       * @chainable
  37       */
  38      setStyles: function(hash) {
  39          Y.DOM.setStyles(this._node, hash);
  40          return this;
  41      },
  42  
  43      /**
  44       * Returns the style's current value.
  45       * Use camelCase (e.g. 'backgroundColor') for multi-word properties.
  46       * @method getStyle
  47       * @for Node
  48       * @param {String} attr The style attribute to retrieve.
  49       * @return {String} The current value of the style property for the element.
  50       */
  51  
  52       getStyle: function(attr) {
  53          return Y.DOM.getStyle(this._node, attr);
  54       },
  55  
  56      /**
  57       * Returns the computed value for the given style property.
  58       * Use camelCase (e.g. 'backgroundColor') for multi-word properties.
  59       * @method getComputedStyle
  60       * @param {String} attr The style attribute to retrieve.
  61       * @return {String} The computed value of the style property for the element.
  62       */
  63       getComputedStyle: function(attr) {
  64          return Y.DOM.getComputedStyle(this._node, attr);
  65       }
  66  });
  67  
  68  /**
  69   * Returns an array of values for each node.
  70   * Use camelCase (e.g. 'backgroundColor') for multi-word properties.
  71   * @method getStyle
  72   * @for NodeList
  73   * @see Node.getStyle
  74   * @param {String} attr The style attribute to retrieve.
  75   * @return {Array} The current values of the style property for the element.
  76   */
  77  
  78  /**
  79   * Returns an array of the computed value for each node.
  80   * Use camelCase (e.g. 'backgroundColor') for multi-word properties.
  81   * @method getComputedStyle
  82   * @see Node.getComputedStyle
  83   * @param {String} attr The style attribute to retrieve.
  84   * @return {Array} The computed values for each node.
  85   */
  86  
  87  /**
  88   * Sets a style property on each node.
  89   * Use camelCase (e.g. 'backgroundColor') for multi-word properties.
  90   * @method setStyle
  91   * @see Node.setStyle
  92   * @param {String} attr The style attribute to set.
  93   * @param {String|Number} val The value.
  94   * @chainable
  95   */
  96  
  97  /**
  98   * Sets multiple style properties on each node.
  99   * Use camelCase (e.g. 'backgroundColor') for multi-word properties.
 100   * @method setStyles
 101   * @see Node.setStyles
 102   * @param {Object} hash An object literal of property:value pairs.
 103   * @chainable
 104   */
 105  
 106  // These are broken out to handle undefined return (avoid false positive for
 107  // chainable)
 108  
 109  Y.NodeList.importMethod(Y.Node.prototype, ['getStyle', 'getComputedStyle', 'setStyle', 'setStyles']);
 110  })(Y);
 111  /**
 112   * @module node
 113   * @submodule node-base
 114   */
 115  
 116  var Y_Node = Y.Node;
 117  
 118  Y.mix(Y_Node.prototype, {
 119      /**
 120       * Makes the node visible.
 121       * If the "transition" module is loaded, show optionally
 122       * animates the showing of the node using either the default
 123       * transition effect ('fadeIn'), or the given named effect.
 124       * @method show
 125       * @for Node
 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       * @chainable
 130       */
 131      show: function(callback) {
 132          callback = arguments[arguments.length - 1];
 133          this.toggleView(true, callback);
 134          return this;
 135      },
 136  
 137      /**
 138       * The implementation for showing nodes.
 139       * Default is to remove the hidden attribute and reset the CSS style.display property.
 140       * @method _show
 141       * @protected
 142       * @chainable
 143       */
 144      _show: function() {
 145          this.removeAttribute('hidden');
 146  
 147          // For back-compat we need to leave this in for browsers that
 148          // do not visually hide a node via the hidden attribute
 149          // and for users that check visibility based on style display.
 150          this.setStyle('display', '');
 151  
 152      },
 153  
 154      /**
 155      Returns whether the node is hidden by YUI or not. The hidden status is
 156      determined by the 'hidden' attribute and the value of the 'display' CSS
 157      property.
 158  
 159      @method _isHidden
 160      @return {Boolean} `true` if the node is hidden.
 161      @private
 162      **/
 163      _isHidden: function() {
 164          return  this.hasAttribute('hidden') || Y.DOM.getComputedStyle(this._node, 'display') === 'none';
 165      },
 166  
 167      /**
 168       * Displays or hides the node.
 169       * If the "transition" module is loaded, toggleView optionally
 170       * animates the toggling of the node using given named effect.
 171       * @method toggleView
 172       * @for Node
 173       * @param {Boolean} [on] An optional boolean value to force the node to be shown or hidden
 174       * @param {Function} [callback] An optional function to run after the transition completes.
 175       * @chainable
 176       */
 177      toggleView: function(on, callback) {
 178          this._toggleView.apply(this, arguments);
 179          return this;
 180      },
 181  
 182      _toggleView: function(on, callback) {
 183          callback = arguments[arguments.length - 1];
 184  
 185          // base on current state if not forcing
 186          if (typeof on != 'boolean') {
 187              on = (this._isHidden()) ? 1 : 0;
 188          }
 189  
 190          if (on) {
 191              this._show();
 192          }  else {
 193              this._hide();
 194          }
 195  
 196          if (typeof callback == 'function') {
 197              callback.call(this);
 198          }
 199  
 200          return this;
 201      },
 202  
 203      /**
 204       * Hides the node.
 205       * If the "transition" module is loaded, hide optionally
 206       * animates the hiding of the node using either the default
 207       * transition effect ('fadeOut'), or the given named effect.
 208       * @method hide
 209       * @param {String} name A named Transition effect to use as the show effect.
 210       * @param {Object} config Options to use with the transition.
 211       * @param {Function} callback An optional function to run after the transition completes.
 212       * @chainable
 213       */
 214      hide: function(callback) {
 215          callback = arguments[arguments.length - 1];
 216          this.toggleView(false, callback);
 217          return this;
 218      },
 219  
 220      /**
 221       * The implementation for hiding nodes.
 222       * Default is to set the hidden attribute to true and set the CSS style.display to 'none'.
 223       * @method _hide
 224       * @protected
 225       * @chainable
 226       */
 227      _hide: function() {
 228          this.setAttribute('hidden', 'hidden');
 229  
 230          // For back-compat we need to leave this in for browsers that
 231          // do not visually hide a node via the hidden attribute
 232          // and for users that check visibility based on style display.
 233          this.setStyle('display', 'none');
 234      }
 235  });
 236  
 237  Y.NodeList.importMethod(Y.Node.prototype, [
 238      /**
 239       * Makes each node visible.
 240       * If the "transition" module is loaded, show optionally
 241       * animates the showing of the node using either the default
 242       * transition effect ('fadeIn'), or the given named effect.
 243       * @method show
 244       * @param {String} name A named Transition effect to use as the show effect.
 245       * @param {Object} config Options to use with the transition.
 246       * @param {Function} callback An optional function to run after the transition completes.
 247       * @for NodeList
 248       * @chainable
 249       */
 250      'show',
 251  
 252      /**
 253       * Hides each node.
 254       * If the "transition" module is loaded, hide optionally
 255       * animates the hiding of the node using either the default
 256       * transition effect ('fadeOut'), or the given named effect.
 257       * @method hide
 258       * @param {String} name A named Transition effect to use as the show effect.
 259       * @param {Object} config Options to use with the transition.
 260       * @param {Function} callback An optional function to run after the transition completes.
 261       * @chainable
 262       */
 263      'hide',
 264  
 265      /**
 266       * Displays or hides each node.
 267       * If the "transition" module is loaded, toggleView optionally
 268       * animates the toggling of the nodes using given named effect.
 269       * @method toggleView
 270       * @param {Boolean} [on] An optional boolean value to force the nodes to be shown or hidden
 271       * @param {Function} [callback] An optional function to run after the transition completes.
 272       * @chainable
 273       */
 274      'toggleView'
 275  ]);
 276  
 277  
 278  }, '3.17.2', {"requires": ["dom-style", "node-base"]});