// ==UserScript==
// @name         Ant Design 组件菜单
// @namespace    https://xianghongai.github.io/
// @version      0.0.4
// @description  快速预览 Ant Design 组件菜单面板
// @author       Nicholas Hsiang / 山茶树和葡萄树
// @icon         https://xinlu.ink/favicon.ico
// @match        https://ant.design/*
// @grant        none
// @downloadURL none
// ==/UserScript==
(function() {
  "use strict";

  function init() {
    const STYLE = ` .overflow-hide { height: 100%; overflow: hidden; } #component-menu-toggle, #component-api { position: fixed; z-index: 99999; top: 15px; right: 5px; cursor: pointer; width: 28px; height: 28px; overflow: hidden; line-height: 28px; border-radius: 50%; border: 1px solid #ccc; text-align: center; vertical-align: middle; color: #333; background-color: #fff; } #component-api { top: 55px; } .hs-component-menu.ant-menu { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99998; display: flex; justify-content: space-around; margin: 0; padding: 50px 0 ; overflow-y: auto; background-color: #fff; } /* #region scrollbar */ .hs-component-menu::-webkit-scrollbar { width: 8px; height: 6px; background: rgba(0, 0, 0, 0.1); } .hs-component-menu::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); } .hs-component-menu::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); } /* #endregion */ .hs-component-menu.ant-menu li { list-style: none; } .hs-component-menu.ant-menu .ant-menu-item-group-title { padding-left: 0; } .hs-component-menu.ant-menu .ant-menu-item-group-list { margin: 0; padding: 0; } .hs-component-menu.ant-menu .ant-menu-item-group-list .ant-menu-item { margin-bottom: 0 !important; padding-left: 0 !important; height: 38px !important; line-height: 38px !important; } .component-menu_hide { display: none !important; } `;
    const TPL = `<!-- toggole --><div id="component-menu-toggle" title="快速预览组件"> <i aria-label="图标: appstore" class="anticon anticon-appstore"><svg viewBox="64 64 896 896" focusable="false" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg ></i> </div> <!-- api --> <div id="component-api"> <i aria-label="图标: bulb" class="anticon anticon-bulb" ><svg viewBox="64 64 896 896" focusable="false" class="" data-icon="bulb" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M632 888H392c-4.4 0-8 3.6-8 8v32c0 17.7 14.3 32 32 32h192c17.7 0 32-14.3 32-32v-32c0-4.4-3.6-8-8-8zM512 64c-181.1 0-328 146.9-328 328 0 121.4 66 227.4 164 284.1V792c0 17.7 14.3 32 32 32h264c17.7 0 32-14.3 32-32V676.1c98-56.7 164-162.7 164-284.1 0-181.1-146.9-328-328-328zm127.9 549.8L604 634.6V752H420V634.6l-35.9-20.8C305.4 568.3 256 484.5 256 392c0-141.4 114.6-256 256-256s256 114.6 256 256c0 92.5-49.4 176.3-128.1 221.8z"></path></svg ></i> </div> `;
    const bodyEle = document.querySelector("body");
    const wrapperEle = document.querySelector("#react-content");

    // #region GET TPL
    const PAGE_ELE = document.getElementById("Components$Menu"); //.cloneNode(true);
    PAGE_ELE.setAttribute("id", "Components$Menu2");
    PAGE_ELE.classList.add("hs-component-menu");
    // #endregion

    // #region COMMON
    function hasClass(el, className) {
      if (el.classList) {
        return el.classList.contains(className);
      } else {
        return !!el.className.match(new RegExp("(\\s|^)" + className + "(\\s|$)"));
      }
    }

    function getParents(elem, selector) {
      // Element.matches() polyfill
      if (!Element.prototype.matches) {
        Element.prototype.matches =
          Element.prototype.matchesSelector ||
          Element.prototype.mozMatchesSelector ||
          Element.prototype.msMatchesSelector ||
          Element.prototype.oMatchesSelector ||
          Element.prototype.webkitMatchesSelector ||
          function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
              i = matches.length;
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1;
          };
      }

      // Get the closest matching element
      for (; elem && elem !== document; elem = elem.parentNode) {
        if (elem.matches(selector)) return elem;
      }
      return null;
    }
    // #endregion

    // #region ADD STYLE
    const head = document.head || document.getElementsByTagName("head")[0];
    const style = document.createElement("style");

    style.type = "text/css";

    if (style.styleSheet) {
      style.styleSheet.cssText = STYLE;
    } else {
      style.appendChild(document.createTextNode(STYLE));
    }

    head.appendChild(style);
    // #endregion

    // #region ADD TPL
    const wrapper = document.createElement("section");
    wrapper.setAttribute("id", "component-menu-wrapper");
    wrapper.innerHTML = TPL;
    wrapperEle.appendChild(wrapper);
    wrapperEle.appendChild(PAGE_ELE);
    // #endregion

    // #region EVENT
    const componentMenuToggleEle = document.getElementById("component-menu-toggle");
    const componentApiEle = document.getElementById("component-api");
    const componentMenuEle = document.querySelector(".hs-component-menu");

    componentMenuEle.classList.add("component-menu_hide");

    componentMenuToggleEle.addEventListener("click", event => {
      componentMenuEle.classList.toggle("component-menu_hide");
      bodyEle.classList.toggle("overflow-hide");
    });

    componentMenuEle.addEventListener("click", event => {
      const targetEle = event.target;

      if (getParents(targetEle, ".ant-menu-item") || hasClass(targetEle, "ant-menu-item")) {
        componentMenuEle.classList.add("component-menu_hide");
        bodyEle.classList.remove("overflow-hide");
      }
    });

    componentApiEle.addEventListener("click", event => {
      const targetEle = document.getElementById("API");
      const top = targetEle.getBoundingClientRect().top + window.pageYOffset;

      window.scrollTo({
        top,
        behavior: "smooth"
      });
    });
    // #endregion
  }

  let interval = null;

  function isLoaded(params) {
    let wrapperEle = document.querySelector("#react-content");

    if (wrapperEle) {
      clearInterval(interval);
      init();
    }
  }

  interval = setInterval(isLoaded, 1000);
})();