react-stikky/lib/utils.js

"use strict";

exports.__esModule = true;
exports.getCompStyle = getCompStyle;

function getPixelSize(element, style, property, fontSize) {
  var sizeWithSuffix = style[property],
      size = parseFloat(sizeWithSuffix),
      suffix = sizeWithSuffix.split(/\d/)[0],
      rootSize;
  fontSize = fontSize != null ? fontSize : /%|em/.test(suffix) && element && element.parentElement ? getPixelSize(element.parentElement, element.parentElement.currentStyle, "fontSize", null) : 16;
  rootSize = property == "fontSize" ? fontSize : /width/i.test(property) ? element.clientWidth : element.clientHeight;
  return suffix == "em" ? size * fontSize : suffix == "in" ? size * 96 : suffix == "pt" ? size * 96 / 72 : suffix == "%" ? size / 100 * rootSize : size;
}

function setShortStyleProperty(style, property) {
  var borderSuffix = property == "border" ? "Width" : "",
      t = property + "Top" + borderSuffix,
      r = property + "Right" + borderSuffix,
      b = property + "Bottom" + borderSuffix,
      l = property + "Left" + borderSuffix;
  style[property] = (style[t] == style[r] == style[b] == style[l] ? [style[t]] : style[t] == style[b] && style[l] == style[r] ? [style[t], style[r]] : style[l] == style[r] ? [style[t], style[r], style[b]] : [style[t], style[r], style[b], style[l]]).join(" ");
}

function CSSStyleDeclaration(element) {
  var currentStyle = element.currentStyle,
      style = this,
      fontSize = getPixelSize(element, currentStyle, "fontSize", null);

  for (property in currentStyle) {
    if (/width|height|margin.|padding.|border.+W/.test(property) && style[property] !== "auto") {
      style[property] = getPixelSize(element, currentStyle, property, fontSize) + "px";
    } else if (property === "styleFloat") {
      style["float"] = currentStyle[property];
    } else {
      style[property] = currentStyle[property];
    }
  }

  setShortStyleProperty(style, "margin");
  setShortStyleProperty(style, "padding");
  setShortStyleProperty(style, "border");
  style.fontSize = fontSize + "px";
  return style;
}

CSSStyleDeclaration.prototype = {
  constructor: CSSStyleDeclaration,
  getPropertyPriority: function getPropertyPriority() {},
  getPropertyValue: function getPropertyValue(prop) {
    return this[prop] || "";
  },
  item: function item() {},
  removeProperty: function removeProperty() {},
  setProperty: function setProperty() {},
  getPropertyCSSValue: function getPropertyCSSValue() {}
};

function getCompStyle(element) {
  if (window.getComputedStyle) return window.getComputedStyle(element);
  return new CSSStyleDeclaration(element);
}