MediaWiki:Gadget-VectorThemeLoader.js

"use strict";

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

(function () {
  // src/utils/resource.ts
  function addStyleUrl(url, key) {
    var style = void 0;
    if (key && document.getElementById(key) instanceof HTMLLinkElement) {
      style = document.getElementById(key);
    } else {
      style = document.createElement("link");
      style.rel = "stylesheet";
      style.type = "text/css";
      if (key) style.id = key;
    }
    if (style.href === url) return;
    style.href = url;
    document.head.appendChild(style);
  }
  function addStyle(css) {
    var style = document.createElement("style");
    style.textContent = css;
    document.head.appendChild(style);
  }
  function loadWikiStyle(page, key) {
    addStyleUrl("https://mcbbs.wiki/index.php?title=" + page + "&action=raw&ctype=text/css", key);
  }

  // src/utils/storage.ts
  function parse(str) {
    if (str) {
      try {
        return JSON.parse(str);
      } catch (e) {}
    }
    return null;
  }
  function write(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  }
  function unsafeRead(key) {
    var storage = localStorage.getItem(key);
    return parse(storage);
  }
  function listen(listener) {
    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { passive: true };

    window.addEventListener("storage", listener, options);
    return function () {
      return window.removeEventListener("storage", listener, options);
    };
  }
  function readAndListen(props) {
    var key = props.key,
        defaultValue = props.defaultValue,
        listener = props.listener,
        _props$callOnChange = props.callOnChange,
        callOnChange = _props$callOnChange === undefined ? true : _props$callOnChange,
        _props$options = props.options,
        options = _props$options === undefined ? { passive: true } : _props$options;

    var v = unsafeRead(key);
    if (defaultValue !== void 0 && v === null) {
      write(key, defaultValue);
      v = defaultValue;
    }
    var fn = function fn(ev) {
      if (ev.key !== key || ev.storageArea !== localStorage) return;
      var newValue = parse(ev.newValue);
      var oldValue = parse(ev.oldValue);
      if (callOnChange && newValue === oldValue) return;
      var encapsulatedEvent = {
        key: key,
        newValue: newValue,
        oldValue: oldValue,
        storageArea: ev.storageArea,
        url: ev.url
      };
      listener(encapsulatedEvent);
    };
    var off = listen(fn, options);
    return [v, off];
  }

  // src/utils/utils.ts
  function clickOutside(el, callback) {
    var cb = function cb(ev) {
      var target = ev.target;

      if (!(target instanceof Element)) return;
      if (target === el) return;
      var obj = target.parentElement;
      while (obj && obj !== el && obj.parentElement) {
        obj = obj.parentElement;
      }
      if (obj !== el) callback();
    };
    window.addEventListener("click", cb, true);
    return function () {
      return window.removeEventListener("click", cb);
    };
  }

  // widget/VectorThemeLoader/SwitchPanel.ts
  function createPanel(props) {
    var className = props.className,
        _props$position = props.position,
        x = _props$position.x,
        y = _props$position.y;

    var panel = document.createElement("div");
    panel.className = "salt-panel " + (className || "");
    panel.style.position = "absolute";

    for (var _len = arguments.length, innerElements = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
      innerElements[_key - 1] = arguments[_key];
    }

    var _iteratorNormalCompletion = true;
    var _didIteratorError = false;
    var _iteratorError = undefined;

    try {
      for (var _iterator = innerElements[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
        var el = _step.value;

        panel.appendChild(el);
      }
    } catch (err) {
      _didIteratorError = true;
      _iteratorError = err;
    } finally {
      try {
        if (!_iteratorNormalCompletion && _iterator.return) {
          _iterator.return();
        }
      } finally {
        if (_didIteratorError) {
          throw _iteratorError;
        }
      }
    }

    document.body.appendChild(panel);
    var offsetWidth = panel.offsetWidth,
        offsetHeight = panel.offsetHeight;

    panel.style.left = Math.max(x - offsetWidth / 2, 0) + "px";
    panel.style.top = y + 2 + "px";
    var cancel = clickOutside(panel, function () {
      panel.remove();
      cancel();
    });
    return panel;
  }

  // widget/VectorThemeLoader/widget.t.scss
  var widget_t_default = "\n.salt-panel.style-list {\n  padding: 8px 12px;\n  border-radius: 4px;\n  background-color: var(--lightcolor, #f9f9f9);\n  box-shadow: 1px 2px 5px 0 rgba(153, 153, 153, 0.4);\n  font-size: 1rem;\n  z-index: 9999;\n}\n.salt-panel.style-list, .salt-panel.style-list * {\n  box-sizing: border-box;\n}\n.salt-panel.style-list .style-list-item {\n  display: block;\n  min-width: 196px;\n  margin: 4px 0;\n  list-style: none;\n  overflow: hidden;\n}\n.salt-panel.style-list .style-list-item .theme-list {\n  padding: 2px 4px;\n  margin: 0;\n  overflow: hidden;\n}\n.salt-panel.style-list .style-list-item .theme-list .theme-list-item {\n  padding: 4px 8px;\n  list-style: none;\n  overflow: hidden;\n  user-select: none;\n  cursor: pointer;\n}\n.salt-panel.style-list .style-list-item .theme-list .theme-list-item:hover {\n  background-color: rgba(153, 153, 153, 0.0666666667);\n}\n.salt-panel.style-list .style-list-item .theme-list .theme-list-item:active {\n  background-color: rgba(153, 153, 153, 0.2);\n}\n.salt-panel.style-list .style-list-item .theme-list .theme-list-item .theme-list-item-img {\n  display: inline-block;\n  width: 1rem;\n  height: 1rem;\n  vertical-align: middle;\n  margin-right: 4px;\n}\n.salt-panel.style-list .style-list-item .theme-list .theme-list-item .theme-list-item-name {\n  display: inline;\n}";

  // widget/VectorThemeLoader/widget.ts
  //! https://github.com/mcbbs-wiki/mcbbs-wiki-widget-repo/tree/master/widget/VectorThemeLoader
  addStyle(widget_t_default);
  var isLegacy = document.body.classList.contains("skin-vector-legacy");
  var themeMap = isLegacy ? {
    book: {
      name: "仿MCBBS书页风格",
      default: {
        name: "夏季主题",
        css: "MediaWiki:Vector-Book-Summer.css",
        img: "https://mcbbs.wiki/images/2/2f/艺术家与认证用户回帖图标.png"
      },
      other: {
        nether: { name: "下界主题", css: "MediaWiki:Vector-Book-Nether.css" },
        winter: { name: "冬季主题", css: "MediaWiki:Vector-Book-Winter.css" }
      }
    }
  } : {
    v4: {
      name: "仿MCBBS v4风格",
      default: { name: "默认风格", css: "MediaWiki:EEEEE.css" },
      other: {}
    }
  };
  var defaultStyle = Object.keys(themeMap)[0];
  var styleKey = isLegacy ? "mcbbs-wiki-skin-vector-legacy-style" : "mcbbs-wiki-skin-vector-style";
  var themeKey = isLegacy ? "mcbbs-wiki-skin-vector-legacy-theme" : "mcbbs-wiki-skin-vector-theme";
  var loadThemeStyle = function loadThemeStyle(style, theme) {
    var styleMap = themeMap[style] || themeMap[defaultStyle];
    var currentCommonStyle = styleMap.common;
    if (currentCommonStyle) loadWikiStyle(currentCommonStyle, "salt-wiki-style-common");
    var currentTheme = theme === "default" || !styleMap.other[theme] ? styleMap.default : styleMap.other[theme];
    loadWikiStyle(currentTheme.css, "salt-wiki-style-theme");
  };
  var initTheme = function initTheme() {
    var current = { style: defaultStyle, theme: "default" };

    var _readAndListen = readAndListen({
      key: styleKey,
      defaultValue: defaultStyle,
      listener: function listener(ev) {
        if (ev.newValue) {
          current.style = ev.newValue;
          loadCurrentTheme();
        }
      }
    }),
        _readAndListen2 = _slicedToArray(_readAndListen, 1),
        style = _readAndListen2[0];

    var _readAndListen3 = readAndListen({
      key: themeKey,
      defaultValue: "default",
      listener: function listener(ev) {
        if (ev.newValue) {
          current.theme = ev.newValue;
          loadCurrentTheme();
        }
      }
    }),
        _readAndListen4 = _slicedToArray(_readAndListen3, 1),
        theme = _readAndListen4[0];

    current.style = style;
    current.theme = theme;
    var loadCurrentTheme = function loadCurrentTheme() {
      var style2 = current.style,
          theme2 = current.theme;

      loadThemeStyle(style2, theme2);
    };
    loadCurrentTheme();
  };
  initTheme();
  var handleSwitchBtn = function handleSwitchBtn(ev) {
    var _$$offset = $(btn).offset(),
        top = _$$offset.top,
        left = _$$offset.left;

    var innerElements = [];
    var createThemeSwitch = function createThemeSwitch(style, themeCode, theme) {
      var name = theme.name,
          imgSrc = theme.img;

      var handleClick = function handleClick() {
        write(styleKey, style);
        write(themeKey, themeCode);
        loadThemeStyle(style, themeCode);
      };
      var li2 = document.createElement("li");
      li2.className = "theme-list-item";
      li2.addEventListener("click", handleClick);
      if (imgSrc) {
        var img = document.createElement("img");
        img.src = imgSrc;
        img.className = "theme-list-item-img";
        li2.appendChild(img);
      }
      var div = document.createElement("div");
      div.textContent = name;
      div.className = "theme-list-item-name";
      li2.appendChild(div);
      return li2;
    };
    for (var style in themeMap) {
      var li2 = document.createElement("li");
      li2.className = "style-list-item";
      var title = document.createElement("div");
      title.className = "style-list-item-title";
      title.textContent = themeMap[style].name;
      var ul = document.createElement("ul");
      ul.className = "theme-list";
      var themeList = [];
      var defaultTheme = themeMap[style].default;
      themeList.push(createThemeSwitch(style, "default", defaultTheme));
      for (var themeCode in themeMap[style].other) {
        themeList.push(createThemeSwitch(style, themeCode, themeMap[style].other[themeCode]));
      }
      var _iteratorNormalCompletion2 = true;
      var _didIteratorError2 = false;
      var _iteratorError2 = undefined;

      try {
        for (var _iterator2 = themeList[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
          var el = _step2.value;

          ul.appendChild(el);
        }
      } catch (err) {
        _didIteratorError2 = true;
        _iteratorError2 = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion2 && _iterator2.return) {
            _iterator2.return();
          }
        } finally {
          if (_didIteratorError2) {
            throw _iteratorError2;
          }
        }
      }

      li2.appendChild(title);
      li2.appendChild(ul);
      innerElements.push(li2);
    }
    createPanel.apply(undefined, [{
      className: "style-list",
      position: { x: left, y: top + btn.offsetHeight }
    }].concat(innerElements));
  };
  var headLogoutBtn = document.getElementById("pt-logout");
  if (!headLogoutBtn) {
    return;
  }
  var btn = document.createElement("a");
  btn.textContent = "主题";
  btn.title = "主题";
  btn.onclick = handleSwitchBtn;
  var li = document.createElement("li");
  li.className = "mw-list-item";
  li.appendChild(btn);
  headLogoutBtn.parentElement.insertBefore(li, headLogoutBtn);
})();