☰

Ant Design 组件菜单 (4x)

快速预览 Ant Design 组件菜单面板

目前为 2020-05-01 提交的版本。查看 最新版本。

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

    const APP = "#react-content";
    const API = "#API";

    function init() {
        const STYLE = ` .fixed-widgets { z-index: 9; } body[data-theme="dark"] .hs-menu-wrapper.ant-menu{ background-color: #000; } .hs-menu-title { position: fixed; font-size: 16px; top: 30px; right: 0; left: 0; margin: 0; padding: 0; text-align: center; color: #333; font-weight: normal; } .hs-overflow-hide { height: 100%; overflow: hidden; } #hs-menu-toggle, #hs-goto-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; } #hs-goto-api { top: 55px; } .hs-menu-wrapper.ant-menu { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99998; display: flex; justify-content: space-evenly; margin: 0; padding: 50px 0 ; overflow-y: auto; background-color: #fff; } /* #region scrollbar */ .hs-menu-wrapper::-webkit-scrollbar { width: 8px; height: 6px; background: rgba(0, 0, 0, 0.1); } .hs-menu-wrapper::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); } .hs-menu-wrapper::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); } /* #endregion */ .hs-menu-wrapper.ant-menu li { list-style: none; } .hs-menu-wrapper.ant-menu .ant-menu-item-group-title { padding-left: 0; } .hs-menu-wrapper.ant-menu .ant-menu-item-group-list { margin: 0; padding: 0; } .hs-menu-wrapper.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; } .hs-hide,.hs-menu-wrapper-hide { display: none !important; } `;
        const TOGGLE_TPL = `<!-- toggole --><div id="hs-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="hs-goto-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 bodyContainer = document.querySelector("body");
        const appContainer = document.querySelector(APP);

        // #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 Create Toggle
        const toggleContainer = document.createElement("section");
        toggleContainer.setAttribute("id", "component-menu-wrapper");
        toggleContainer.innerHTML = TOGGLE_TPL;
        appContainer.appendChild(toggleContainer);
        // #endregion

        // #region Create Menu
        const menuContainer = document.querySelector(".aside-container.menu-site"); //.cloneNode(true);
        menuContainer.setAttribute("id", "Components$Menu2");
        menuContainer.classList.add("hs-menu-wrapper");
        const titleEle = document.createElement("h1");
        titleEle.classList.add("hs-menu-title");
        titleEle.innerText = "Ant Design 组件";
        menuContainer.appendChild(titleEle);
        appContainer.appendChild(menuContainer);
        // #endregion

        // #region Add Event
        const menuToggleEle = document.getElementById("hs-menu-toggle");
        const gotoAPI = document.getElementById("hs-goto-api");
        const menuWrapper = document.querySelector(".hs-menu-wrapper");

        menuWrapper.classList.add("hs-menu-wrapper-hide");

        menuToggleEle.addEventListener("click", (event) => {
            menuWrapper.classList.toggle("hs-menu-wrapper-hide");
            bodyContainer.classList.toggle("hs-overflow-hide");
        });

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

            if (getParents(targetEle, ".ant-menu-item") || hasClass(targetEle, "ant-menu-item")) {
                menuWrapper.classList.add("hs-menu-wrapper-hide");
                bodyContainer.classList.remove("hs-overflow-hide");
            }
        });

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

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

    function resetLayout() {
        let pageSider = document.querySelector(".main-wrapper>.ant-row>.main-menu");
        let pageContainer = document.querySelector(".main-wrapper>.ant-row>.ant-col+.ant-col");

        pageSider.classList.add("hs-hide");
        pageContainer.classList.remove("ant-col-md-18", "ant-col-lg-18", "ant-col-xl-19", "ant-col-xxl-20");
        pageContainer.classList.add("ant-col-md-24", "ant-col-lg-24", "ant-col-xl-24", "ant-col-xxl-24");
    }

    let interval = null;

    function isLoaded(params) {
        let appContainer = document.querySelector(APP);

        if (appContainer) {
            clearInterval(interval);
            init();
            resetLayout();
        }
    }

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

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址