vuikit/lib/util/style.js

A responsive Vue UI library for web site interfaces based on UIkit

/**
 * Vuikit 0.8.10
 * (c) 2018 Miljan Aleksic
 * @license MIT
**/

/* Substantial part of the code is adapted from UIkit,
  Copyright (c) 2013-2018 YOOtheme GmbH, getuikit.com */

import { append } from './dom';
import { addClass } from './class';
import { each, hyphenate, isArray, isNumeric, isObject, isString, isUndefined, toNode, toNodes } from './lang';

var cssNumber = {
  'animation-iteration-count': true,
  'column-count': true,
  'fill-opacity': true,
  'flex-grow': true,
  'flex-shrink': true,
  'font-weight': true,
  'line-height': true,
  'opacity': true,
  'order': true,
  'orphans': true,
  'widows': true,
  'z-index': true,
  'zoom': true
};
function css (element, property, value) {
  return toNodes(element).map(function (element) {
    if (isString(property)) {
      property = propName(property);
      if (isUndefined(value)) {
        return getStyle(element, property)
      } else if (!value && value !== 0) {
        element.style.removeProperty(property);
      } else {
        element.style[property] = isNumeric(value) && !cssNumber[property] ? (value + "px") : value;
      }
    } else if (isArray(property)) {
      var styles = getStyles(element);
      return property.reduce(function (props, property) {
        props[property] = styles[propName(property)];
        return props
      }, {})
    } else if (isObject(property)) {
      each(property, function (value, property) { return css(element, property, value); });
    }
    return element
  })[0]
}
function getStyles (element, pseudoElt) {
  element = toNode(element);
  return element.ownerDocument.defaultView.getComputedStyle(element, pseudoElt)
}
function getStyle (element, property, pseudoElt) {
  return getStyles(element, pseudoElt)[property]
}
var vars = {};
function getCssVar (name) {
  if (!(name in vars)) {
    var element = append(document.documentElement, document.createElement('div'));
    addClass(element, ("var-" + name));
    try {
      vars[name] = getStyle(element, 'content', ':before').replace(/^["'](.*)["']$/, '$1');
      vars[name] = JSON.parse(vars[name]);
    } catch (e) {}
    document.documentElement.removeChild(element);
  }
  return vars[name]
}
var cssProps = {};
function propName (name) {
  var ret = cssProps[name];
  if (!ret) {
    ret = cssProps[name] = vendorPropName(name) || name;
  }
  return ret
}
var cssPrefixes = ['webkit', 'moz', 'ms'];
function vendorPropName (name) {
  var ref = document.createElement('_');
  var style = ref.style;
  name = hyphenate(name);
  if (name in style) {
    return name
  }
  var i = cssPrefixes.length, prefixedName;
  while (i--) {
    prefixedName = "-" + (cssPrefixes[i]) + "-" + name;
    if (prefixedName in style) {
      return prefixedName
    }
  }
}

export { css, getStyles, getStyle, getCssVar, propName };