themes-switch/index.js

Toolset for switch multiple themes in application based on webpack

"use strict";

var THEME_KEY = 'theme';
var PLUGIN_KEY = 'pkey';
var PLUGIN_VALUE = 'themes-switch';
var themes = process.themes; // eslint-disable-line prefer-destructuring

function switchTheme(_ref) {
  var theme = _ref.theme,
      onLoad = _ref.onLoad;
  var themeUrl = themes[theme];
  var container = document.html || document.getElementsByTagName('html')[0];
  var links = container.getElementsByTagName('link');
  var oldTheme;

  if (links && links.length > 0) {
    for (var i = 0; i < links.length; i++) {
      if (getAttribute(links[i], PLUGIN_KEY) === PLUGIN_VALUE) {
        oldTheme = links[i];
        break;
      }
    }
  }

  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = themeUrl;
  setAttribute(link, THEME_KEY, theme);
  setAttribute(link, PLUGIN_KEY, PLUGIN_VALUE);
  container.appendChild(link);

  link.onload = function () {
    removeNode(oldTheme);

    if (onLoad) {
      onLoad(link);
    }
  };
}

function getThemes() {
  return themes;
}

function changeTheme(theme, themeUrl, onLoad) {
  switchTheme({
    theme: theme,
    onLoad: onLoad
  });
}

function removeNode(node) {
  if (node && node.parentNode) {
    node.parentNode.removeChild(node);
  }
}

function getAttribute(element, key) {
  if (element.dataset) {
    return element.dataset[key];
  }

  return element.getAttribute(key);
}

function setAttribute(element, key, value) {
  if (element.dataset) {
    element.dataset[key] = value;
  } else {
    element.setAttribute(key, value);
  }
}

module.exports = {
  changeTheme: changeTheme,
  switchTheme: switchTheme,
  getThemes: getThemes
};