jssource/src_files/include/javascript/yui3/build/dom/dom-style.js

   1 /*
   2 Copyright (c) 2010, Yahoo! Inc. All rights reserved.
   3 Code licensed under the BSD License:
   4 http://developer.yahoo.com/yui/license.html
   5 version: 3.3.0
   6 build: 3167
   7 */
   8 YUI.add('dom-style', function(Y) {
   9
  10 (function(Y) {
  11 /**
  12  * Add style management functionality to DOM.
  13  * @module dom
  14  * @submodule dom-style
  15  * @for DOM
  16  */
  17
  18 var DOCUMENT_ELEMENT = 'documentElement',
  19     DEFAULT_VIEW = 'defaultView',
  20     OWNER_DOCUMENT = 'ownerDocument',
  21     STYLE = 'style',
  22     FLOAT = 'float',
  23     CSS_FLOAT = 'cssFloat',
  24     STYLE_FLOAT = 'styleFloat',
  25     TRANSPARENT = 'transparent',
  26     GET_COMPUTED_STYLE = 'getComputedStyle',
  27     GET_BOUNDING_CLIENT_RECT = 'getBoundingClientRect',
  28
  29     WINDOW = Y.config.win,
  30     DOCUMENT = Y.config.doc,
  31     UNDEFINED = undefined,
  32
  33     Y_DOM = Y.DOM,
  34
  35     TRANSFORM = 'transform',
  36     VENDOR_TRANSFORM = [
  37         'WebkitTransform',
  38         'MozTransform',
  39         'OTransform'
  40     ],
  41
  42     re_color = /color$/i,
  43     re_unit = /width|height|top|left|right|bottom|margin|padding/i;
  44
  45 Y.Array.each(VENDOR_TRANSFORM, function(val) {
  46     if (val in DOCUMENT[DOCUMENT_ELEMENT].style) {
  47         TRANSFORM = val;
  48     }
  49 });
  50
  51 Y.mix(Y_DOM, {
  52     DEFAULT_UNIT: 'px',
  53
  54     CUSTOM_STYLES: {
  55     },
  56
  57
  58     /**
  59      * Sets a style property for a given element.
  60      * @method setStyle
  61      * @param {HTMLElement} An HTMLElement to apply the style to.
  62      * @param {String} att The style property to set.
  63      * @param {String|Number} val The value.
  64      */
  65     setStyle: function(node, att, val, style) {
  66         style = style || node.style;
  67         var CUSTOM_STYLES = Y_DOM.CUSTOM_STYLES;
  68
  69         if (style) {
  70             if (val === null || val === '') { // normalize unsetting
  71                 val = '';
  72             } else if (!isNaN(new Number(val)) && re_unit.test(att)) { // number values may need a unit
  73                 val += Y_DOM.DEFAULT_UNIT;
  74             }
  75
  76             if (att in CUSTOM_STYLES) {
  77                 if (CUSTOM_STYLES[att].set) {
  78                     CUSTOM_STYLES[att].set(node, val, style);
  79                     return; // NOTE: return
  80                 } else if (typeof CUSTOM_STYLES[att] === 'string') {
  81                     att = CUSTOM_STYLES[att];
  82                 }
  83             } else if (att === '') { // unset inline styles
  84                 att = 'cssText';
  85                 val = '';
  86             }
  87             style[att] = val;
  88         }
  89     },
  90
  91     /**
  92      * Returns the current style value for the given property.
  93      * @method getStyle
  94      * @param {HTMLElement} An HTMLElement to get the style from.
  95      * @param {String} att The style property to get.
  96      */
  97     getStyle: function(node, att, style) {
  98         style = style || node.style;
  99         var CUSTOM_STYLES = Y_DOM.CUSTOM_STYLES,
 100             val = '';
 101
 102         if (style) {
 103             if (att in CUSTOM_STYLES) {
 104                 if (CUSTOM_STYLES[att].get) {
 105                     return CUSTOM_STYLES[att].get(node, att, style); // NOTE: return
 106                 } else if (typeof CUSTOM_STYLES[att] === 'string') {
 107                     att = CUSTOM_STYLES[att];
 108                 }
 109             }
 110             val = style[att];
 111             if (val === '') { // TODO: is empty string sufficient?
 112                 val = Y_DOM[GET_COMPUTED_STYLE](node, att);
 113             }
 114         }
 115
 116         return val;
 117     },
 118
 119     /**
 120      * Sets multiple style properties.
 121      * @method setStyles
 122      * @param {HTMLElement} node An HTMLElement to apply the styles to.
 123      * @param {Object} hash An object literal of property:value pairs.
 124      */
 125     setStyles: function(node, hash) {
 126         var style = node.style;
 127         Y.each(hash, function(v, n) {
 128             Y_DOM.setStyle(node, n, v, style);
 129         }, Y_DOM);
 130     },
 131
 132     /**
 133      * Returns the computed style for the given node.
 134      * @method getComputedStyle
 135      * @param {HTMLElement} An HTMLElement to get the style from.
 136      * @param {String} att The style property to get.
 137      * @return {String} The computed value of the style property.
 138      */
 139     getComputedStyle: function(node, att) {
 140         var val = '',
 141             doc = node[OWNER_DOCUMENT];
 142
 143         if (node[STYLE] && doc[DEFAULT_VIEW] && doc[DEFAULT_VIEW][GET_COMPUTED_STYLE]) {
 144             val = doc[DEFAULT_VIEW][GET_COMPUTED_STYLE](node, null)[att];
 145         }
 146         return val;
 147     }
 148 });
 149
 150 // normalize reserved word float alternatives ("cssFloat" or "styleFloat")
 151 if (DOCUMENT[DOCUMENT_ELEMENT][STYLE][CSS_FLOAT] !== UNDEFINED) {
 152     Y_DOM.CUSTOM_STYLES[FLOAT] = CSS_FLOAT;
 153 } else if (DOCUMENT[DOCUMENT_ELEMENT][STYLE][STYLE_FLOAT] !== UNDEFINED) {
 154     Y_DOM.CUSTOM_STYLES[FLOAT] = STYLE_FLOAT;
 155 }
 156
 157 // fix opera computedStyle default color unit (convert to rgb)
 158 if (Y.UA.opera) {
 159     Y_DOM[GET_COMPUTED_STYLE] = function(node, att) {
 160         var view = node[OWNER_DOCUMENT][DEFAULT_VIEW],
 161             val = view[GET_COMPUTED_STYLE](node, '')[att];
 162
 163         if (re_color.test(att)) {
 164             val = Y.Color.toRGB(val);
 165         }
 166
 167         return val;
 168     };
 169
 170 }
 171
 172 // safari converts transparent to rgba(), others use "transparent"
 173 if (Y.UA.webkit) {
 174     Y_DOM[GET_COMPUTED_STYLE] = function(node, att) {
 175         var view = node[OWNER_DOCUMENT][DEFAULT_VIEW],
 176             val = view[GET_COMPUTED_STYLE](node, '')[att];
 177
 178         if (val === 'rgba(0, 0, 0, 0)') {
 179             val = TRANSPARENT;
 180         }
 181
 182         return val;
 183     };
 184
 185 }
 186
 187 Y.DOM._getAttrOffset = function(node, attr) {
 188     var val = Y.DOM[GET_COMPUTED_STYLE](node, attr),
 189         offsetParent = node.offsetParent,
 190         position,
 191         parentOffset,
 192         offset;
 193
 194     if (val === 'auto') {
 195         position = Y.DOM.getStyle(node, 'position');
 196         if (position === 'static' || position === 'relative') {
 197             val = 0;
 198         } else if (offsetParent && offsetParent[GET_BOUNDING_CLIENT_RECT]) {
 199             parentOffset = offsetParent[GET_BOUNDING_CLIENT_RECT]()[attr];
 200             offset = node[GET_BOUNDING_CLIENT_RECT]()[attr];
 201             if (attr === 'left' || attr === 'top') {
 202                 val = offset - parentOffset;
 203             } else {
 204                 val = parentOffset - node[GET_BOUNDING_CLIENT_RECT]()[attr];
 205             }
 206         }
 207     }
 208
 209     return val;
 210 };
 211
 212 Y.DOM._getOffset = function(node) {
 213     var pos,
 214         xy = null;
 215
 216     if (node) {
 217         pos = Y_DOM.getStyle(node, 'position');
 218         xy = [
 219             parseInt(Y_DOM[GET_COMPUTED_STYLE](node, 'left'), 10),
 220             parseInt(Y_DOM[GET_COMPUTED_STYLE](node, 'top'), 10)
 221         ];
 222
 223         if ( isNaN(xy[0]) ) { // in case of 'auto'
 224             xy[0] = parseInt(Y_DOM.getStyle(node, 'left'), 10); // try inline
 225             if ( isNaN(xy[0]) ) { // default to offset value
 226                 xy[0] = (pos === 'relative') ? 0 : node.offsetLeft || 0;
 227             }
 228         }
 229
 230         if ( isNaN(xy[1]) ) { // in case of 'auto'
 231             xy[1] = parseInt(Y_DOM.getStyle(node, 'top'), 10); // try inline
 232             if ( isNaN(xy[1]) ) { // default to offset value
 233                 xy[1] = (pos === 'relative') ? 0 : node.offsetTop || 0;
 234             }
 235         }
 236     }
 237
 238     return xy;
 239
 240 };
 241
 242 Y_DOM.CUSTOM_STYLES.transform = {
 243     set: function(node, val, style) {
 244         style[TRANSFORM] = val;
 245     },
 246
 247     get: function(node, style) {
 248         return Y_DOM[GET_COMPUTED_STYLE](node, TRANSFORM);
 249     }
 250 };
 251
 252
 253 })(Y);
 254 (function(Y) {
 255 var PARSE_INT = parseInt,
 256     RE = RegExp;
 257
 258 Y.Color = {
 259     KEYWORDS: {
 260         black: '000',
 261         silver: 'c0c0c0',
 262         gray: '808080',
 263         white: 'fff',
 264         maroon: '800000',
 265         red: 'f00',
 266         purple: '800080',
 267         fuchsia: 'f0f',
 268         green: '008000',
 269         lime: '0f0',
 270         olive: '808000',
 271         yellow: 'ff0',
 272         navy: '000080',
 273         blue: '00f',
 274         teal: '008080',
 275         aqua: '0ff'
 276     },
 277
 278     re_RGB: /^rgb\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\)$/i,
 279     re_hex: /^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i,
 280     re_hex3: /([0-9A-F])/gi,
 281
 282     toRGB: function(val) {
 283         if (!Y.Color.re_RGB.test(val)) {
 284             val = Y.Color.toHex(val);
 285         }
 286
 287         if(Y.Color.re_hex.exec(val)) {
 288             val = 'rgb(' + [
 289                 PARSE_INT(RE.$1, 16),
 290                 PARSE_INT(RE.$2, 16),
 291                 PARSE_INT(RE.$3, 16)
 292             ].join(', ') + ')';
 293         }
 294         return val;
 295     },
 296
 297     toHex: function(val) {
 298         val = Y.Color.KEYWORDS[val] || val;
 299         if (Y.Color.re_RGB.exec(val)) {
 300             val = [
 301                 Number(RE.$1).toString(16),
 302                 Number(RE.$2).toString(16),
 303                 Number(RE.$3).toString(16)
 304             ];
 305
 306             for (var i = 0; i < val.length; i++) {
 307                 if (val[i].length < 2) {
 308                     val[i] = '0' + val[i];
 309                 }
 310             }
 311
 312             val = val.join('');
 313         }
 314
 315         if (val.length < 6) {
 316             val = val.replace(Y.Color.re_hex3, '$1$1');
 317         }
 318
 319         if (val !== 'transparent' && val.indexOf('#') < 0) {
 320             val = '#' + val;
 321         }
 322
 323         return val.toUpperCase();
 324     }
 325 };
 326 })(Y);
 327
 328
 329
 330 }, '3.3.0' ,{requires:['dom-base']});