快速预览 Element UI 组件菜单面板
От
// ==UserScript==
// @name Element UI 组件菜单 (2x)
// @namespace https://xianghongai.github.io/
// @version 0.0.1
// @description 快速预览 Element UI 组件菜单面板
// @author Nicholas Hsiang / 山茶树和葡萄树
// @icon https://xinlu.ink/favicon.ico
// @match https://element.eleme.cn/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
const APP = '#app';
function init() {
const STYLE = ` .hs-menu-title { position: fixed; font-size: 16px; top: 30px; right: 0; left: 0; margin: 0; text-align: center; color: #333; font-weight: normal; } .hs-overflow-hide { height: 100%; overflow: hidden; } #hs-menu-toggle { position: fixed; z-index: 99999; top: 15px; right: 15px; cursor: pointer; width: 28px; height: 28px; overflow: hidden; line-height: 28px; border-radius: 50%; border: 1px solid #999; text-align: center; vertical-align: middle; background-color: #fff; } #hs-menu-toggle .anticon { vertical-align: -0.125em; } .hs-menu-wrapper-hide { display: none !important; } .hs-menu-wrapper { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99998; } .hs-menu-wrapper > ul > li { position: fixed; top: 0; right: 0; bottom: 0; left: 0; 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 */ `;
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> `;
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', 'hs-toggle-wrapper');
toggleContainer.innerHTML = TOGGLE_TPL;
appContainer.appendChild(toggleContainer);
// #endregion
// #region Create Menu
const menuItems = document.querySelectorAll('.side-nav .nav-item:nth-last-child(1) .nav-group');
const ulEle = document.createElement('ul');
const liEle = document.createElement('li');
liEle.classList.add('nav-item');
menuItems.forEach(element => {
liEle.appendChild(element.cloneNode(true));
});
ulEle.appendChild(liEle);
const menuContainer = document.createElement('section');
menuContainer.setAttribute('class', 'hs-menu-wrapper side-nav');
menuContainer.appendChild(ulEle);
const titleEle = document.createElement('h1');
titleEle.classList.add('hs-menu-title');
titleEle.innerText = 'Element UI 组件';
menuContainer.appendChild(titleEle);
appContainer.appendChild(menuContainer);
// #endregion
// #region Add Event
const menuToggle = document.getElementById('hs-menu-toggle');
const menuWrapper = document.querySelector('.hs-menu-wrapper');
menuWrapper.classList.add('hs-menu-wrapper-hide');
menuToggle.addEventListener('click', event => {
menuWrapper.classList.toggle('hs-menu-wrapper-hide');
bodyContainer.classList.toggle('hs-overflow-hide');
});
const navItems = document.querySelectorAll('.hs-menu-wrapper a');
menuWrapper.addEventListener('click', event => {
navItems &&
navItems.forEach(element => {
element.classList.remove('router-link-exact-active');
element.classList.remove('active');
});
const targetEle = event.target;
if (getParents(targetEle, '.nav-item') || hasClass(targetEle, 'nav-item')) {
menuWrapper.classList.add('hs-menu-wrapper-hide');
bodyContainer.classList.remove('hs-overflow-hide');
targetEle.classList.add('router-link-exact-active');
targetEle.classList.add('active');
}
});
// #endregion
}
let interval = null;
function isLoaded(params) {
let appContainer = document.querySelector(APP);
if (appContainer) {
clearInterval(interval);
init();
}
}
interval = setInterval(isLoaded, 1000);
})();