1 YUI.add('node-style', function (Y, NAME) {

     2 

     3 (function(Y) {

     4 /**

     5  * Extended Node interface for managing node styles.

     6  * @module node

     7  * @submodule node-style

     8  */

     9 

    10 Y.mix(Y.Node.prototype, {

    11     /**

    12      * Sets a style property of the node.

    13      * Use camelCase (e.g. 'backgroundColor') for multi-word properties.

    14      * @method setStyle

    15      * @param {String} attr The style attribute to set.

    16      * @param {String|Number} val The value.

    17      * @chainable

    18      */

    19     setStyle: function(attr, val) {

    20         Y.DOM.setStyle(this._node, attr, val);

    21         return this;

    22     },

    23 

    24     /**

    25      * Sets multiple style properties on the node.

    26      * Use camelCase (e.g. 'backgroundColor') for multi-word properties.

    27      * @method setStyles

    28      * @param {Object} hash An object literal of property:value pairs.

    29      * @chainable

    30      */

    31     setStyles: function(hash) {

    32         Y.DOM.setStyles(this._node, hash);

    33         return this;

    34     },

    35 

    36     /**

    37      * Returns the style's current value.

    38      * Use camelCase (e.g. 'backgroundColor') for multi-word properties.

    39      * @method getStyle

    40      * @for Node

    41      * @param {String} attr The style attribute to retrieve.

    42      * @return {String} The current value of the style property for the element.

    43      */

    44 

    45      getStyle: function(attr) {

    46         return Y.DOM.getStyle(this._node, attr);

    47      },

    48 

    49     /**

    50      * Returns the computed value for the given style property.

    51      * Use camelCase (e.g. 'backgroundColor') for multi-word properties.

    52      * @method getComputedStyle

    53      * @param {String} attr The style attribute to retrieve.

    54      * @return {String} The computed value of the style property for the element.

    55      */

    56      getComputedStyle: function(attr) {

    57         return Y.DOM.getComputedStyle(this._node, attr);

    58      }

    59 });

    60 

    61 /**

    62  * Returns an array of values for each node.

    63  * Use camelCase (e.g. 'backgroundColor') for multi-word properties.

    64  * @method getStyle

    65  * @for NodeList

    66  * @see Node.getStyle

    67  * @param {String} attr The style attribute to retrieve.

    68  * @return {Array} The current values of the style property for the element.

    69  */

    70 

    71 /**

    72  * Returns an array of the computed value for each node.

    73  * Use camelCase (e.g. 'backgroundColor') for multi-word properties.

    74  * @method getComputedStyle

    75  * @see Node.getComputedStyle

    76  * @param {String} attr The style attribute to retrieve.

    77  * @return {Array} The computed values for each node.

    78  */

    79 

    80 /**

    81  * Sets a style property on each node.

    82  * Use camelCase (e.g. 'backgroundColor') for multi-word properties.

    83  * @method setStyle

    84  * @see Node.setStyle

    85  * @param {String} attr The style attribute to set.

    86  * @param {String|Number} val The value.

    87  * @chainable

    88  */

    89 

    90 /**

    91  * Sets multiple style properties on each node.

    92  * Use camelCase (e.g. 'backgroundColor') for multi-word properties.

    93  * @method setStyles

    94  * @see Node.setStyles

    95  * @param {Object} hash An object literal of property:value pairs.

    96  * @chainable

    97  */

    98 

    99 // These are broken out to handle undefined return (avoid false positive for

   100 // chainable)

   101 

   102 Y.NodeList.importMethod(Y.Node.prototype, ['getStyle', 'getComputedStyle', 'setStyle', 'setStyles']);

   103 })(Y);

   104 /**

   105  * @module node

   106  * @submodule node-base

   107  */

   108 

   109 var Y_Node = Y.Node;

   110 

   111 Y.mix(Y_Node.prototype, {

   112     /**

   113      * Makes the node visible.

   114      * If the "transition" module is loaded, show optionally

   115      * animates the showing of the node using either the default

   116      * transition effect ('fadeIn'), or the given named effect.

   117      * @method show

   118      * @for Node

   119      * @param {String} name A named Transition effect to use as the show effect.

   120      * @param {Object} config Options to use with the transition.

   121      * @param {Function} callback An optional function to run after the transition completes.

   122      * @chainable

   123      */

   124     show: function(callback) {

   125         callback = arguments[arguments.length - 1];

   126         this.toggleView(true, callback);

   127         return this;

   128     },

   129 

   130     /**

   131      * The implementation for showing nodes.

   132      * Default is to remove the hidden attribute and reset the CSS style.display property.

   133      * @method _show

   134      * @protected

   135      * @chainable

   136      */

   137     _show: function() {

   138         this.removeAttribute('hidden');

   139 

   140         // For back-compat we need to leave this in for browsers that

   141         // do not visually hide a node via the hidden attribute

   142         // and for users that check visibility based on style display.

   143         this.setStyle('display', '');

   144 

   145     },

   146 

   147     /**

   148     Returns whether the node is hidden by YUI or not. The hidden status is

   149     determined by the 'hidden' attribute and the value of the 'display' CSS

   150     property.

   151 

   152     @method _isHidden

   153     @return {Boolean} `true` if the node is hidden.

   154     @private

   155     **/

   156     _isHidden: function() {

   157         return  this.hasAttribute('hidden') || Y.DOM.getComputedStyle(this._node, 'display') === 'none';

   158     },

   159 

   160     /**

   161      * Displays or hides the node.

   162      * If the "transition" module is loaded, toggleView optionally

   163      * animates the toggling of the node using given named effect.

   164      * @method toggleView

   165      * @for Node

   166      * @param {Boolean} [on] An optional boolean value to force the node to be shown or hidden

   167      * @param {Function} [callback] An optional function to run after the transition completes.

   168      * @chainable

   169      */

   170     toggleView: function(on, callback) {

   171         this._toggleView.apply(this, arguments);

   172         return this;

   173     },

   174 

   175     _toggleView: function(on, callback) {

   176         callback = arguments[arguments.length - 1];

   177 

   178         // base on current state if not forcing

   179         if (typeof on != 'boolean') {

   180             on = (this._isHidden()) ? 1 : 0;

   181         }

   182 

   183         if (on) {

   184             this._show();

   185         }  else {

   186             this._hide();

   187         }

   188 

   189         if (typeof callback == 'function') {

   190             callback.call(this);

   191         }

   192 

   193         return this;

   194     },

   195 

   196     /**

   197      * Hides the node.

   198      * If the "transition" module is loaded, hide optionally

   199      * animates the hiding of the node using either the default

   200      * transition effect ('fadeOut'), or the given named effect.

   201      * @method hide

   202      * @param {String} name A named Transition effect to use as the show effect.

   203      * @param {Object} config Options to use with the transition.

   204      * @param {Function} callback An optional function to run after the transition completes.

   205      * @chainable

   206      */

   207     hide: function(callback) {

   208         callback = arguments[arguments.length - 1];

   209         this.toggleView(false, callback);

   210         return this;

   211     },

   212 

   213     /**

   214      * The implementation for hiding nodes.

   215      * Default is to set the hidden attribute to true and set the CSS style.display to 'none'.

   216      * @method _hide

   217      * @protected

   218      * @chainable

   219      */

   220     _hide: function() {

   221         this.setAttribute('hidden', 'hidden');

   222 

   223         // For back-compat we need to leave this in for browsers that

   224         // do not visually hide a node via the hidden attribute

   225         // and for users that check visibility based on style display.

   226         this.setStyle('display', 'none');

   227     }

   228 });

   229 

   230 Y.NodeList.importMethod(Y.Node.prototype, [

   231     /**

   232      * Makes each node visible.

   233      * If the "transition" module is loaded, show optionally

   234      * animates the showing of the node using either the default

   235      * transition effect ('fadeIn'), or the given named effect.

   236      * @method show

   237      * @param {String} name A named Transition effect to use as the show effect.

   238      * @param {Object} config Options to use with the transition.

   239      * @param {Function} callback An optional function to run after the transition completes.

   240      * @for NodeList

   241      * @chainable

   242      */

   243     'show',

   244 

   245     /**

   246      * Hides each node.

   247      * If the "transition" module is loaded, hide optionally

   248      * animates the hiding of the node using either the default

   249      * transition effect ('fadeOut'), or the given named effect.

   250      * @method hide

   251      * @param {String} name A named Transition effect to use as the show effect.

   252      * @param {Object} config Options to use with the transition.

   253      * @param {Function} callback An optional function to run after the transition completes.

   254      * @chainable

   255      */

   256     'hide',

   257 

   258     /**

   259      * Displays or hides each node.

   260      * If the "transition" module is loaded, toggleView optionally

   261      * animates the toggling of the nodes using given named effect.

   262      * @method toggleView

   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 }, '@VERSION@', {"requires": ["dom-style", "node-base"]});