// ==UserScript==
// @name Ant Design 组件菜单
// @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/*
// @grant none
// @downloadURL none
// ==/UserScript==
(function() {
'use strict';
const STYLE = `.overflow-hide { height: 100%; overflow: hidden; } #component-menu-toggle { position: fixed; z-index: 99999; top: 15px; right: 5px; cursor: pointer; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; text-align: center; background-color: #fff; box-shadow: 0 0 2px rgba(0,0,0,.3); } #component-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 */ #component-menu::-webkit-scrollbar { width: 8px; height: 6px; background: rgba(0, 0, 0, 0.1); } #component-menu::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); } #component-menu::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); } /* #endregion */ #component-menu li { list-style: none; } #component-menu .ant-menu-item-group-title { padding-left: 0; } #component-menu .ant-menu-item-group-list { margin: 0; padding: 0; line-height: 38px; } #component-menu .ant-menu-item-group-list .ant-menu-item { padding-left: 0 !important; } .component-menu_hide { display: none !important; }`;
const TPL = ` `;
const bodyEle = document.querySelector("body");
// #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;
bodyEle.appendChild(wrapper);
// #endregion
// #region EVENT
const componentMenuToggleEle = document.getElementById("component-menu-toggle");
const componentMenuEle = document.getElementById("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");
}
});
// #endregion
})();