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

     2 

     3 (function(Y) {

     4 var HAS_LAYOUT = 'hasLayout',

     5     PX = 'px',

     6     FILTER = 'filter',

     7     FILTERS = 'filters',

     8     OPACITY = 'opacity',

     9     AUTO = 'auto',

    10 

    11     BORDER_WIDTH = 'borderWidth',

    12     BORDER_TOP_WIDTH = 'borderTopWidth',

    13     BORDER_RIGHT_WIDTH = 'borderRightWidth',

    14     BORDER_BOTTOM_WIDTH = 'borderBottomWidth',

    15     BORDER_LEFT_WIDTH = 'borderLeftWidth',

    16     WIDTH = 'width',

    17     HEIGHT = 'height',

    18     TRANSPARENT = 'transparent',

    19     VISIBLE = 'visible',

    20     GET_COMPUTED_STYLE = 'getComputedStyle',

    21     UNDEFINED = undefined,

    22     documentElement = Y.config.doc.documentElement,

    23 

    24     testFeature = Y.Features.test,

    25     addFeature = Y.Features.add,

    26 

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

    28     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,

    29 

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

    31 

    32     _getStyleObj = function(node) {

    33         return node.currentStyle || node.style;

    34     },

    35 

    36     ComputedStyle = {

    37         CUSTOM_STYLES: {},

    38 

    39         get: function(el, property) {

    40             var value = '',

    41                 current;

    42 

    43             if (el) {

    44                     current = _getStyleObj(el)[property];

    45 

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

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

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

    49                     value = current;

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

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

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

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

    54                 } else {

    55                     value = current;

    56                 }

    57             }

    58 

    59             return value;

    60         },

    61 

    62         sizeOffsets: {

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

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

    65             top: ['Top'],

    66             bottom: ['Bottom']

    67         },

    68 

    69         getOffset: function(el, prop) {

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

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

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

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

    74                 sizeOffsets = ComputedStyle.sizeOffsets[prop],

    75                 mode = el.ownerDocument.compatMode,

    76                 value = '';

    77 

    78             // IE pixelWidth incorrect for percent

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

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

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

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

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

    84 

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

    86                     if (sizeOffsets[0]) {

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

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

    89                     }

    90 

    91                     if (sizeOffsets[1]) {

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

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

    94                     }

    95                 }

    96 

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

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

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

   100                     el.style[prop] = current;

   101                 }

   102                 value = el.style[pixel];

   103 

   104             }

   105             return value + PX;

   106         },

   107 

   108         borderMap: {

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

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

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

   112         },

   113 

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

   115             var unit = omitUnit ? '' : PX,

   116                 current = el.currentStyle[property];

   117 

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

   119                 if (ComputedStyle.borderMap[current] &&

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

   121                     current = ComputedStyle.borderMap[current];

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

   123                     current = 0;

   124                 }

   125             }

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

   127         },

   128 

   129         getPixel: function(node, att) {

   130             // use pixelRight to convert to px

   131             var val = null,

   132                 style = _getStyleObj(node),

   133                 styleRight = style.right,

   134                 current = style[att];

   135 

   136             node.style.right = current;

   137             val = node.style.pixelRight;

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

   139 

   140             return val;

   141         },

   142 

   143         getMargin: function(node, att) {

   144             var val,

   145                 style = _getStyleObj(node);

   146 

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

   148                 val = 0;

   149             } else {

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

   151             }

   152             return val + PX;

   153         },

   154 

   155         getVisibility: function(node, att) {

   156             var current;

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

   158                 node = node.parentNode;

   159             }

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

   161         },

   162 

   163         getColor: function(node, att) {

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

   165 

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

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

   168                     current = _getStyleObj(parent)[att];

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

   170                         node = parent;

   171                         return true;

   172                     }

   173                 });

   174             }

   175 

   176             return Y.Color.toRGB(current);

   177         },

   178 

   179         getBorderColor: function(node, att) {

   180             var current = _getStyleObj(node),

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

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

   183         }

   184     },

   185 

   186     //fontSize: getPixelFont,

   187     IEComputed = {};

   188 

   189 addFeature('style', 'computedStyle', {

   190     test: function() {

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

   192     }

   193 });

   194 

   195 addFeature('style', 'opacity', {

   196     test: function() {

   197         return 'opacity' in documentElement.style;

   198     }

   199 });

   200 

   201 addFeature('style', 'filter', {

   202     test: function() {

   203         return 'filters' in documentElement;

   204     }

   205 });

   206 

   207 // use alpha filter for IE opacity

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

   209     Y.DOM.CUSTOM_STYLES[OPACITY] = {

   210         get: function(node) {

   211             var val = 100;

   212             try { // will error if no DXImageTransform

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

   214 

   215             } catch(e) {

   216                 try { // make sure its in the document

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

   218                 } catch(err) {

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

   220                 }

   221             }

   222             return val / 100;

   223         },

   224 

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

   226             var current,

   227                 styleObj = _getStyleObj(node),

   228                 currentFilter = styleObj[FILTER];

   229 

   230             style = style || node.style;

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

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

   233                 val = current;

   234             }

   235 

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

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

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

   239 

   240                 if (!style[FILTER]) {

   241                     style.removeAttribute(FILTER);

   242                 }

   243 

   244                 if (!styleObj[HAS_LAYOUT]) {

   245                     style.zoom = 1; // needs layout

   246                 }

   247             }

   248         }

   249     };

   250 }

   251 

   252 try {

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

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

   255     Y.DOM.CUSTOM_STYLES.height = {

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

   257             var floatVal = parseFloat(val);

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

   259                 style.height = val;

   260             } else {

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

   262             }

   263         }

   264     };

   265 

   266     Y.DOM.CUSTOM_STYLES.width = {

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

   268             var floatVal = parseFloat(val);

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

   270                 style.width = val;

   271             } else {

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

   273             }

   274         }

   275     };

   276 }

   277 

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

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

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

   281 

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

   283 

   284     IEComputed[BORDER_WIDTH] = IEComputed[BORDER_TOP_WIDTH] = IEComputed[BORDER_RIGHT_WIDTH] =

   285             IEComputed[BORDER_BOTTOM_WIDTH] = IEComputed[BORDER_LEFT_WIDTH] =

   286             ComputedStyle.getBorderWidth;

   287 

   288     IEComputed.marginTop = IEComputed.marginRight = IEComputed.marginBottom =

   289             IEComputed.marginLeft = ComputedStyle.getMargin;

   290 

   291     IEComputed.visibility = ComputedStyle.getVisibility;

   292     IEComputed.borderColor = IEComputed.borderTopColor =

   293             IEComputed.borderRightColor = IEComputed.borderBottomColor =

   294             IEComputed.borderLeftColor = ComputedStyle.getBorderColor;

   295 

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

   297 

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

   299     Y.DOM.IE.COMPUTED = IEComputed;

   300     Y.DOM.IE.ComputedStyle = ComputedStyle;

   301 }

   302 

   303 })(Y);

   304 

   305 

   306 }, '@VERSION@', {"requires": ["dom-style"]});