1 /*

     2 YUI 3.10.3 (build 2fb5187)

     3 Copyright 2013 Yahoo! Inc. All rights reserved.

     4 Licensed under the BSD License.

     5 http://yuilibrary.com/license/

     6 */

     7 

     8 YUI.add('dom-style-ie', function (Y, NAME) {

     9 

    10 (function(Y) {

    11 var HAS_LAYOUT = 'hasLayout',

    12     PX = 'px',

    13     FILTER = 'filter',

    14     FILTERS = 'filters',

    15     OPACITY = 'opacity',

    16     AUTO = 'auto',

    17 

    18     BORDER_WIDTH = 'borderWidth',

    19     BORDER_TOP_WIDTH = 'borderTopWidth',

    20     BORDER_RIGHT_WIDTH = 'borderRightWidth',

    21     BORDER_BOTTOM_WIDTH = 'borderBottomWidth',

    22     BORDER_LEFT_WIDTH = 'borderLeftWidth',

    23     WIDTH = 'width',

    24     HEIGHT = 'height',

    25     TRANSPARENT = 'transparent',

    26     VISIBLE = 'visible',

    27     GET_COMPUTED_STYLE = 'getComputedStyle',

    28     UNDEFINED = undefined,

    29     documentElement = Y.config.doc.documentElement,

    30 

    31     testFeature = Y.Features.test,

    32     addFeature = Y.Features.add,

    33 

    34     // TODO: unit-less lineHeight (e.g. 1.22)

    35     re_unit = /^(\d[.\d]*)+(em|ex|px|gd|rem|vw|vh|vm|ch|mm|cm|in|pt|pc|deg|rad|ms|s|hz|khz|%){1}?/i,

    36 

    37     isIE8 = (Y.UA.ie >= 8),

    38 

    39     _getStyleObj = function(node) {

    40         return node.currentStyle || node.style;

    41     },

    42 

    43     ComputedStyle = {

    44         CUSTOM_STYLES: {},

    45 

    46         get: function(el, property) {

    47             var value = '',

    48                 current;

    49 

    50             if (el) {

    51                     current = _getStyleObj(el)[property];

    52 

    53                 if (property === OPACITY && Y.DOM.CUSTOM_STYLES[OPACITY]) {

    54                     value = Y.DOM.CUSTOM_STYLES[OPACITY].get(el);        

    55                 } else if (!current || (current.indexOf && current.indexOf(PX) > -1)) { // no need to convert

    56                     value = current;

    57                 } else if (Y.DOM.IE.COMPUTED[property]) { // use compute function

    58                     value = Y.DOM.IE.COMPUTED[property](el, property);

    59                 } else if (re_unit.test(current)) { // convert to pixel

    60                     value = ComputedStyle.getPixel(el, property) + PX;

    61                 } else {

    62                     value = current;

    63                 }

    64             }

    65 

    66             return value;

    67         },

    68 

    69         sizeOffsets: {

    70             width: ['Left', 'Right'],

    71             height: ['Top', 'Bottom'],

    72             top: ['Top'],

    73             bottom: ['Bottom']

    74         },

    75 

    76         getOffset: function(el, prop) {

    77             var current = _getStyleObj(el)[prop],                     // value of "width", "top", etc.

    78                 capped = prop.charAt(0).toUpperCase() + prop.substr(1), // "Width", "Top", etc.

    79                 offset = 'offset' + capped,                             // "offsetWidth", "offsetTop", etc.

    80                 pixel = 'pixel' + capped,                               // "pixelWidth", "pixelTop", etc.

    81                 sizeOffsets = ComputedStyle.sizeOffsets[prop], 

    82                 mode = el.ownerDocument.compatMode,

    83                 value = '';

    84 

    85             // IE pixelWidth incorrect for percent

    86             // manually compute by subtracting padding and border from offset size

    87             // NOTE: clientWidth/Height (size minus border) is 0 when current === AUTO so offsetHeight is used

    88             // reverting to auto from auto causes position stacking issues (old impl)

    89             if (current === AUTO || current.indexOf('%') > -1) {

    90                 value = el['offset' + capped];

    91 

    92                 if (mode !== 'BackCompat') {

    93                     if (sizeOffsets[0]) {

    94                         value -= ComputedStyle.getPixel(el, 'padding' + sizeOffsets[0]);

    95                         value -= ComputedStyle.getBorderWidth(el, 'border' + sizeOffsets[0] + 'Width', 1);

    96                     }

    97 

    98                     if (sizeOffsets[1]) {

    99                         value -= ComputedStyle.getPixel(el, 'padding' + sizeOffsets[1]);

   100                         value -= ComputedStyle.getBorderWidth(el, 'border' + sizeOffsets[1] + 'Width', 1);

   101                     }

   102                 }

   103 

   104             } else { // use style.pixelWidth, etc. to convert to pixels

   105                 // need to map style.width to currentStyle (no currentStyle.pixelWidth)

   106                 if (!el.style[pixel] && !el.style[prop]) {

   107                     el.style[prop] = current;

   108                 }

   109                 value = el.style[pixel];

   110                 

   111             }

   112             return value + PX;

   113         },

   114 

   115         borderMap: {

   116             thin: (isIE8) ? '1px' : '2px',

   117             medium: (isIE8) ? '3px': '4px', 

   118             thick: (isIE8) ? '5px' : '6px'

   119         },

   120 

   121         getBorderWidth: function(el, property, omitUnit) {

   122             var unit = omitUnit ? '' : PX,

   123                 current = el.currentStyle[property];

   124 

   125             if (current.indexOf(PX) < 0) { // look up keywords if a border exists

   126                 if (ComputedStyle.borderMap[current] &&

   127                         el.currentStyle.borderStyle !== 'none') {

   128                     current = ComputedStyle.borderMap[current];

   129                 } else { // otherwise no border (default is "medium")

   130                     current = 0;

   131                 }

   132             }

   133             return (omitUnit) ? parseFloat(current) : current;

   134         },

   135 

   136         getPixel: function(node, att) {

   137             // use pixelRight to convert to px

   138             var val = null,

   139                 style = _getStyleObj(node),

   140                 styleRight = style.right,

   141                 current = style[att];

   142 

   143             node.style.right = current;

   144             val = node.style.pixelRight;

   145             node.style.right = styleRight; // revert

   146 

   147             return val;

   148         },

   149 

   150         getMargin: function(node, att) {

   151             var val,

   152                 style = _getStyleObj(node);

   153 

   154             if (style[att] == AUTO) {

   155                 val = 0;

   156             } else {

   157                 val = ComputedStyle.getPixel(node, att);

   158             }

   159             return val + PX;

   160         },

   161 

   162         getVisibility: function(node, att) {

   163             var current;

   164             while ( (current = node.currentStyle) && current[att] == 'inherit') { // NOTE: assignment in test

   165                 node = node.parentNode;

   166             }

   167             return (current) ? current[att] : VISIBLE;

   168         },

   169 

   170         getColor: function(node, att) {

   171             var current = _getStyleObj(node)[att];

   172 

   173             if (!current || current === TRANSPARENT) {

   174                 Y.DOM.elementByAxis(node, 'parentNode', null, function(parent) {

   175                     current = _getStyleObj(parent)[att];

   176                     if (current && current !== TRANSPARENT) {

   177                         node = parent;

   178                         return true;

   179                     }

   180                 });

   181             }

   182 

   183             return Y.Color.toRGB(current);

   184         },

   185 

   186         getBorderColor: function(node, att) {

   187             var current = _getStyleObj(node),

   188                 val = current[att] || current.color;

   189             return Y.Color.toRGB(Y.Color.toHex(val));

   190         }

   191     },

   192 

   193     //fontSize: getPixelFont,

   194     IEComputed = {};

   195 

   196 addFeature('style', 'computedStyle', {

   197     test: function() {

   198         return 'getComputedStyle' in Y.config.win;

   199     }

   200 });

   201 

   202 addFeature('style', 'opacity', {

   203     test: function() {

   204         return 'opacity' in documentElement.style;

   205     }

   206 });

   207 

   208 addFeature('style', 'filter', {

   209     test: function() {

   210         return 'filters' in documentElement;

   211     }

   212 });

   213 

   214 // use alpha filter for IE opacity

   215 if (!testFeature('style', 'opacity') && testFeature('style', 'filter')) {

   216     Y.DOM.CUSTOM_STYLES[OPACITY] = {

   217         get: function(node) {

   218             var val = 100;

   219             try { // will error if no DXImageTransform

   220                 val = node[FILTERS]['DXImageTransform.Microsoft.Alpha'][OPACITY];

   221 

   222             } catch(e) {

   223                 try { // make sure its in the document

   224                     val = node[FILTERS]('alpha')[OPACITY];

   225                 } catch(err) {

   226                     Y.log('getStyle: IE opacity filter not found; returning 1', 'warn', 'dom-style');

   227                 }

   228             }

   229             return val / 100;

   230         },

   231 

   232         set: function(node, val, style) {

   233             var current,

   234                 styleObj = _getStyleObj(node),

   235                 currentFilter = styleObj[FILTER];

   236 

   237             style = style || node.style;

   238             if (val === '') { // normalize inline style behavior

   239                 current = (OPACITY in styleObj) ? styleObj[OPACITY] : 1; // revert to original opacity

   240                 val = current;

   241             }

   242 

   243             if (typeof currentFilter == 'string') { // in case not appended

   244                 style[FILTER] = currentFilter.replace(/alpha([^)]*\))/gi, '') +

   245                         ((val < 1) ? 'alpha(' + OPACITY + '=' + val * 100 + ')' : '');

   246 

   247                 if (!style[FILTER]) {

   248                     style.removeAttribute(FILTER);

   249                 }

   250 

   251                 if (!styleObj[HAS_LAYOUT]) {

   252                     style.zoom = 1; // needs layout 

   253                 }

   254             }

   255         }

   256     };

   257 }

   258 

   259 try {

   260     Y.config.doc.createElement('div').style.height = '-1px';

   261 } catch(e) { // IE throws error on invalid style set; trap common cases

   262     Y.DOM.CUSTOM_STYLES.height = {

   263         set: function(node, val, style) {

   264             var floatVal = parseFloat(val);

   265             if (floatVal >= 0 || val === 'auto' || val === '') {

   266                 style.height = val;

   267             } else {

   268                 Y.log('invalid style value for height: ' + val, 'warn', 'dom-style');

   269             }

   270         }

   271     };

   272 

   273     Y.DOM.CUSTOM_STYLES.width = {

   274         set: function(node, val, style) {

   275             var floatVal = parseFloat(val);

   276             if (floatVal >= 0 || val === 'auto' || val === '') {

   277                 style.width = val;

   278             } else {

   279                 Y.log('invalid style value for width: ' + val, 'warn', 'dom-style');

   280             }

   281         }

   282     };

   283 }

   284 

   285 if (!testFeature('style', 'computedStyle')) {

   286     // TODO: top, right, bottom, left

   287     IEComputed[WIDTH] = IEComputed[HEIGHT] = ComputedStyle.getOffset;

   288 

   289     IEComputed.color = IEComputed.backgroundColor = ComputedStyle.getColor;

   290 

   291     IEComputed[BORDER_WIDTH] = IEComputed[BORDER_TOP_WIDTH] = IEComputed[BORDER_RIGHT_WIDTH] =

   292             IEComputed[BORDER_BOTTOM_WIDTH] = IEComputed[BORDER_LEFT_WIDTH] =

   293             ComputedStyle.getBorderWidth;

   294 

   295     IEComputed.marginTop = IEComputed.marginRight = IEComputed.marginBottom =

   296             IEComputed.marginLeft = ComputedStyle.getMargin;

   297 

   298     IEComputed.visibility = ComputedStyle.getVisibility;

   299     IEComputed.borderColor = IEComputed.borderTopColor =

   300             IEComputed.borderRightColor = IEComputed.borderBottomColor =

   301             IEComputed.borderLeftColor = ComputedStyle.getBorderColor;

   302 

   303     Y.DOM[GET_COMPUTED_STYLE] = ComputedStyle.get; 

   304 

   305     Y.namespace('DOM.IE');

   306     Y.DOM.IE.COMPUTED = IEComputed;

   307     Y.DOM.IE.ComputedStyle = ComputedStyle;

   308 }

   309 

   310 })(Y);

   311 

   312 

   313 }, '3.10.3', {"requires": ["dom-style"]});