[Summary view] [Print] [Text view]

   1  /*
   2  YUI 3.17.2 (build 9c3c78e)
   3  Copyright 2014 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  var HAS_LAYOUT = 'hasLayout',
  11      PX = 'px',
  12      FILTER = 'filter',
  13      FILTERS = 'filters',
  14      OPACITY = 'opacity',
  15      AUTO = 'auto',
  16  
  17      BORDER_WIDTH = 'borderWidth',
  18      BORDER_TOP_WIDTH = 'borderTopWidth',
  19      BORDER_RIGHT_WIDTH = 'borderRightWidth',
  20      BORDER_BOTTOM_WIDTH = 'borderBottomWidth',
  21      BORDER_LEFT_WIDTH = 'borderLeftWidth',
  22      WIDTH = 'width',
  23      HEIGHT = 'height',
  24      TRANSPARENT = 'transparent',
  25      VISIBLE = 'visible',
  26      GET_COMPUTED_STYLE = 'getComputedStyle',
  27      documentElement = Y.config.doc.documentElement,
  28  
  29      testFeature = Y.Features.test,
  30      addFeature = Y.Features.add,
  31  
  32      // TODO: unit-less lineHeight (e.g. 1.22)
  33      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,
  34  
  35      isIE8 = (Y.UA.ie >= 8),
  36  
  37      _getStyleObj = function(node) {
  38          return node.currentStyle || node.style;
  39      },
  40  
  41      ComputedStyle = {
  42          CUSTOM_STYLES: {},
  43  
  44          get: function(el, property) {
  45              var value = '',
  46                  current;
  47  
  48              if (el) {
  49                      current = _getStyleObj(el)[property];
  50  
  51                  if (property === OPACITY && Y.DOM.CUSTOM_STYLES[OPACITY]) {
  52                      value = Y.DOM.CUSTOM_STYLES[OPACITY].get(el);
  53                  } else if (!current || (current.indexOf && current.indexOf(PX) > -1)) { // no need to convert
  54                      value = current;
  55                  } else if (Y.DOM.IE.COMPUTED[property]) { // use compute function
  56                      value = Y.DOM.IE.COMPUTED[property](el, property);
  57                  } else if (re_unit.test(current)) { // convert to pixel
  58                      value = ComputedStyle.getPixel(el, property) + PX;
  59                  } else {
  60                      value = current;
  61                  }
  62              }
  63  
  64              return value;
  65          },
  66  
  67          sizeOffsets: {
  68              width: ['Left', 'Right'],
  69              height: ['Top', 'Bottom'],
  70              top: ['Top'],
  71              bottom: ['Bottom']
  72          },
  73  
  74          getOffset: function(el, prop) {
  75              var current = _getStyleObj(el)[prop],                     // value of "width", "top", etc.
  76                  capped = prop.charAt(0).toUpperCase() + prop.substr(1), // "Width", "Top", etc.
  77                  pixel = 'pixel' + capped,                               // "pixelWidth", "pixelTop", etc.
  78                  sizeOffsets = ComputedStyle.sizeOffsets[prop],
  79                  mode = el.ownerDocument.compatMode,
  80                  value = '';
  81  
  82              // IE pixelWidth incorrect for percent
  83              // manually compute by subtracting padding and border from offset size
  84              // NOTE: clientWidth/Height (size minus border) is 0 when current === AUTO so offsetHeight is used
  85              // reverting to auto from auto causes position stacking issues (old impl)
  86              if (current === AUTO || current.indexOf('%') > -1) {
  87                  value = el['offset' + capped];
  88  
  89                  if (mode !== 'BackCompat') {
  90                      if (sizeOffsets[0]) {
  91                          value -= ComputedStyle.getPixel(el, 'padding' + sizeOffsets[0]);
  92                          value -= ComputedStyle.getBorderWidth(el, 'border' + sizeOffsets[0] + 'Width', 1);
  93                      }
  94  
  95                      if (sizeOffsets[1]) {
  96                          value -= ComputedStyle.getPixel(el, 'padding' + sizeOffsets[1]);
  97                          value -= ComputedStyle.getBorderWidth(el, 'border' + sizeOffsets[1] + 'Width', 1);
  98                      }
  99                  }
 100  
 101              } else { // use style.pixelWidth, etc. to convert to pixels
 102                  // need to map style.width to currentStyle (no currentStyle.pixelWidth)
 103                  if (!el.style[pixel] && !el.style[prop]) {
 104                      el.style[prop] = current;
 105                  }
 106                  value = el.style[pixel];
 107  
 108              }
 109              return value + PX;
 110          },
 111  
 112          borderMap: {
 113              thin: (isIE8) ? '1px' : '2px',
 114              medium: (isIE8) ? '3px': '4px',
 115              thick: (isIE8) ? '5px' : '6px'
 116          },
 117  
 118          getBorderWidth: function(el, property, omitUnit) {
 119              var current = el.currentStyle[property];
 120  
 121              if (current.indexOf(PX) < 0) { // look up keywords if a border exists
 122                  if (ComputedStyle.borderMap[current] &&
 123                          el.currentStyle.borderStyle !== 'none') {
 124                      current = ComputedStyle.borderMap[current];
 125                  } else { // otherwise no border (default is "medium")
 126                      current = 0;
 127                  }
 128              }
 129              return (omitUnit) ? parseFloat(current) : current;
 130          },
 131  
 132          getPixel: function(node, att) {
 133              // use pixelRight to convert to px
 134              var val = null,
 135                  style = _getStyleObj(node),
 136                  styleRight = style.right,
 137                  current = style[att];
 138  
 139              node.style.right = current;
 140              val = node.style.pixelRight;
 141              node.style.right = styleRight; // revert
 142  
 143              return val;
 144          },
 145  
 146          getMargin: function(node, att) {
 147              var val,
 148                  style = _getStyleObj(node);
 149  
 150              if (style[att] === AUTO) {
 151                  val = 0;
 152              } else {
 153                  val = ComputedStyle.getPixel(node, att);
 154              }
 155              return val + PX;
 156          },
 157  
 158          getVisibility: function(node, att) {
 159              var current;
 160              while ( (current = node.currentStyle) && current[att] === 'inherit') { // NOTE: assignment in test
 161                  node = node.parentNode;
 162              }
 163              return (current) ? current[att] : VISIBLE;
 164          },
 165  
 166          getColor: function(node, att) {
 167              var current = _getStyleObj(node)[att];
 168  
 169              if (!current || current === TRANSPARENT) {
 170                  Y.DOM.elementByAxis(node, 'parentNode', null, function(parent) {
 171                      current = _getStyleObj(parent)[att];
 172                      if (current && current !== TRANSPARENT) {
 173                          node = parent;
 174                          return true;
 175                      }
 176                  });
 177              }
 178  
 179              return Y.Color.toRGB(current);
 180          },
 181  
 182          getBorderColor: function(node, att) {
 183              var current = _getStyleObj(node),
 184                  val = current[att] || current.color;
 185              return Y.Color.toRGB(Y.Color.toHex(val));
 186          }
 187      },
 188  
 189      //fontSize: getPixelFont,
 190      IEComputed = {};
 191  
 192  addFeature('style', 'computedStyle', {
 193      test: function() {
 194          return 'getComputedStyle' in Y.config.win;
 195      }
 196  });
 197  
 198  addFeature('style', 'opacity', {
 199      test: function() {
 200          return 'opacity' in documentElement.style;
 201      }
 202  });
 203  
 204  addFeature('style', 'filter', {
 205      test: function() {
 206          return 'filters' in documentElement;
 207      }
 208  });
 209  
 210  // use alpha filter for IE opacity
 211  if (!testFeature('style', 'opacity') && testFeature('style', 'filter')) {
 212      Y.DOM.CUSTOM_STYLES[OPACITY] = {
 213          get: function(node) {
 214              var val = 100;
 215              try { // will error if no DXImageTransform
 216                  val = node[FILTERS]['DXImageTransform.Microsoft.Alpha'][OPACITY];
 217  
 218              } catch(e) {
 219                  try { // make sure its in the document
 220                      val = node[FILTERS]('alpha')[OPACITY];
 221                  } catch(err) {
 222                      Y.log('getStyle: IE opacity filter not found; returning 1', 'warn', 'dom-style');
 223                  }
 224              }
 225              return val / 100;
 226          },
 227  
 228          set: function(node, val, style) {
 229              var current,
 230                  styleObj = _getStyleObj(node),
 231                  currentFilter = styleObj[FILTER];
 232  
 233              style = style || node.style;
 234              if (val === '') { // normalize inline style behavior
 235                  current = (OPACITY in styleObj) ? styleObj[OPACITY] : 1; // revert to original opacity
 236                  val = current;
 237              }
 238  
 239              if (typeof currentFilter === 'string') { // in case not appended
 240                  style[FILTER] = currentFilter.replace(/alpha([^)]*\))/gi, '') +
 241                          ((val <= 1) ? 'alpha(' + OPACITY + '=' + val * 100 + ')' : '');
 242  
 243                  if (!style[FILTER]) {
 244                      style.removeAttribute(FILTER);
 245                  }
 246  
 247                  if (!styleObj[HAS_LAYOUT]) {
 248                      style.zoom = 1; // needs layout
 249                  }
 250              }
 251          }
 252      };
 253  }
 254  
 255  try {
 256      Y.config.doc.createElement('div').style.height = '-1px';
 257  } catch(e) { // IE throws error on invalid style set; trap common cases
 258      Y.DOM.CUSTOM_STYLES.height = {
 259          set: function(node, val, style) {
 260              var floatVal = parseFloat(val);
 261              if (floatVal >= 0 || val === 'auto' || val === '') {
 262                  style.height = val;
 263              } else {
 264                  Y.log('invalid style value for height: ' + val, 'warn', 'dom-style');
 265              }
 266          }
 267      };
 268  
 269      Y.DOM.CUSTOM_STYLES.width = {
 270          set: function(node, val, style) {
 271              var floatVal = parseFloat(val);
 272              if (floatVal >= 0 || val === 'auto' || val === '') {
 273                  style.width = val;
 274              } else {
 275                  Y.log('invalid style value for width: ' + val, 'warn', 'dom-style');
 276              }
 277          }
 278      };
 279  }
 280  
 281  if (!testFeature('style', 'computedStyle')) {
 282      // TODO: top, right, bottom, left
 283      IEComputed[WIDTH] = IEComputed[HEIGHT] = ComputedStyle.getOffset;
 284  
 285      IEComputed.color = IEComputed.backgroundColor = ComputedStyle.getColor;
 286  
 287      IEComputed[BORDER_WIDTH] = IEComputed[BORDER_TOP_WIDTH] = IEComputed[BORDER_RIGHT_WIDTH] =
 288              IEComputed[BORDER_BOTTOM_WIDTH] = IEComputed[BORDER_LEFT_WIDTH] =
 289              ComputedStyle.getBorderWidth;
 290  
 291      IEComputed.marginTop = IEComputed.marginRight = IEComputed.marginBottom =
 292              IEComputed.marginLeft = ComputedStyle.getMargin;
 293  
 294      IEComputed.visibility = ComputedStyle.getVisibility;
 295      IEComputed.borderColor = IEComputed.borderTopColor =
 296              IEComputed.borderRightColor = IEComputed.borderBottomColor =
 297              IEComputed.borderLeftColor = ComputedStyle.getBorderColor;
 298  
 299      Y.DOM[GET_COMPUTED_STYLE] = ComputedStyle.get;
 300  
 301      Y.namespace('DOM.IE');
 302      Y.DOM.IE.COMPUTED = IEComputed;
 303      Y.DOM.IE.ComputedStyle = ComputedStyle;
 304  }
 305  
 306  
 307  }, '3.17.2', {"requires": ["dom-style", "color-base"]});