lib/yuilib/3.13.0/node-style/node-style-debug.js

   1 /*
   2 YUI 3.13.0 (build 508226d)
   3 Copyright 2013 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     _isHidden: function() {
 155         return  this.hasAttribute('hidden') || Y.DOM.getComputedStyle(this._node, 'display') === 'none';
 156     },
 157
 158     /**
 159      * Displays or hides the node.
 160      * If the "transition" module is loaded, toggleView optionally
 161      * animates the toggling of the node using given named effect.
 162      * @method toggleView
 163      * @for Node
 164      * @param {String} [name] An optional string value to use as transition effect.
 165      * @param {Boolean} [on] An optional boolean value to force the node to be shown or hidden
 166      * @param {Function} [callback] An optional function to run after the transition completes.
 167      * @chainable
 168      */
 169     toggleView: function(on, callback) {
 170         this._toggleView.apply(this, arguments);
 171         return this;
 172     },
 173
 174     _toggleView: function(on, callback) {
 175         callback = arguments[arguments.length - 1];
 176
 177         // base on current state if not forcing
 178         if (typeof on != 'boolean') {
 179             on = (this._isHidden()) ? 1 : 0;
 180         }
 181
 182         if (on) {
 183             this._show();
 184         }  else {
 185             this._hide();
 186         }
 187
 188         if (typeof callback == 'function') {
 189             callback.call(this);
 190         }
 191
 192         return this;
 193     },
 194
 195     /**
 196      * Hides the node.
 197      * If the "transition" module is loaded, hide optionally
 198      * animates the hiding of the node using either the default
 199      * transition effect ('fadeOut'), or the given named effect.
 200      * @method hide
 201      * @param {String} name A named Transition effect to use as the show effect.
 202      * @param {Object} config Options to use with the transition.
 203      * @param {Function} callback An optional function to run after the transition completes.
 204      * @chainable
 205      */
 206     hide: function(callback) {
 207         callback = arguments[arguments.length - 1];
 208         this.toggleView(false, callback);
 209         return this;
 210     },
 211
 212     /**
 213      * The implementation for hiding nodes.
 214      * Default is to set the hidden attribute to true and set the CSS style.display to 'none'.
 215      * @method _hide
 216      * @protected
 217      * @chainable
 218      */
 219     _hide: function() {
 220         this.setAttribute('hidden', '');
 221
 222         // For back-compat we need to leave this in for browsers that
 223         // do not visually hide a node via the hidden attribute
 224         // and for users that check visibility based on style display.
 225         this.setStyle('display', 'none');
 226     }
 227 });
 228
 229 Y.NodeList.importMethod(Y.Node.prototype, [
 230     /**
 231      * Makes each node visible.
 232      * If the "transition" module is loaded, show optionally
 233      * animates the showing of the node using either the default
 234      * transition effect ('fadeIn'), or the given named effect.
 235      * @method show
 236      * @param {String} name A named Transition effect to use as the show effect.
 237      * @param {Object} config Options to use with the transition.
 238      * @param {Function} callback An optional function to run after the transition completes.
 239      * @for NodeList
 240      * @chainable
 241      */
 242     'show',
 243
 244     /**
 245      * Hides each node.
 246      * If the "transition" module is loaded, hide optionally
 247      * animates the hiding of the node using either the default
 248      * transition effect ('fadeOut'), or the given named effect.
 249      * @method hide
 250      * @param {String} name A named Transition effect to use as the show effect.
 251      * @param {Object} config Options to use with the transition.
 252      * @param {Function} callback An optional function to run after the transition completes.
 253      * @chainable
 254      */
 255     'hide',
 256
 257     /**
 258      * Displays or hides each node.
 259      * If the "transition" module is loaded, toggleView optionally
 260      * animates the toggling of the nodes using given named effect.
 261      * @method toggleView
 262      * @param {String} [name] An optional string value to use as transition effect.
 263      * @param {Boolean} [on] An optional boolean value to force the nodes to be shown or hidden
 264      * @param {Function} [callback] An optional function to run after the transition completes.
 265      * @chainable
 266      */
 267     'toggleView'
 268 ]);
 269
 270
 271 }, '3.13.0', {"requires": ["dom-style", "node-base"]});