☰

Vant 组件菜单 (2x)

快速预览 Vant 组件菜单面板/Van component dashboard

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

  1.       // ==UserScript==
  2.       // @name         Vant 组件菜单 (2x)
  3.       // @namespace    https://xianghongai.github.io/
  4.       // @version      0.0.3
  5.       // @description  快速预览 Vant 组件菜单面板/Van component dashboard
  6.       // @author       Nicholas Hsiang / 山茶树和葡萄树
  7.       // @icon         https://xinlu.ink/favicon.ico
  8.       // @match        https://youzan.github.io/vant/*
  9.       // @grant        none
  10.       // ==/UserScript==
  11.       (function () {
  12.         "use strict";
  13.  
  14.         const titleText = "Vant";
  15.  
  16.         const gridSelector = ".van-doc-nav__group+.van-doc-nav__group";
  17.         const girdIsList = true; // 如果提取的是一个 Node 数组
  18.         // 基于 gridSelector 做 querySelectorAll，添加 hs-dashboard__column 样式名
  19.         const columnSelector = ".van-doc-nav__group";
  20.         // 基于 gridSelector 做 querySelectorAll，添加 hs-dashboard__item-title 样式名
  21.         const columnTitleSelector = ".van-doc-nav__title";
  22.         // 基于 gridSelector 做 querySelectorAll，添加 hs-dashboard__list 样式名
  23.         const menuListSelector = ".van-doc-nav__group";
  24.         // 基于 gridSelector 做 querySelectorAll，添加 hs-dashboard__item 样式名，这一层尽量在 li 标签上
  25.         const menuItemSelector = ".van-doc-nav__item";
  26.  
  27.         const menuItemActionSelector = ".van-doc-nav__item .active";
  28.  
  29.         const helpEnable = false;
  30.         const helpSelector = "";
  31.  
  32.         // 使用本扩展的样式风格，将会替换原站点的菜单风格
  33.         const customStyleEnable = true; // Dark & Light
  34.         const cloneNodeEnable = true; // 保留原 DOM 节点?
  35.  
  36.         function initialExtraStyle() {
  37.           return `
  38.       .hs-dashboard__list .hs-dashboard__title { margin-left: 2px; }
  39.       .hs-dashboard__toggle { top: 5px; right: 20px; }
  40.       .hs-dashboard__grid { justify-content: space-around; /* center | space-evenly | space-between */ }
  41.           `;
  42.         }
  43.  
  44.         /* ------------------------------------------------------------------------- */
  45.  
  46.         let wrapperEle = null;
  47.         let themeSwitchEle = null;
  48.         let themeSwitchForm = null;
  49.  
  50.         const bodyContainer = document.querySelector("body");
  51.  
  52.         function initialDashboard() {
  53.           initialToggle();
  54.           initialStyle(initialExtraStyle);
  55.           initialMenu(cloneNodeEnable);
  56.           initialHelp();
  57.           handleEvent();
  58.           handleTheme(true);
  59.         }
  60.  
  61.         let interval = null;
  62.  
  63.         function ready() {
  64.           const originEle = document.querySelector(gridSelector);
  65.  
  66.           if (originEle) {
  67.             clearInterval(interval);
  68.             // Dashboard
  69.             initialDashboard();
  70.             // Other
  71.           }
  72.         }
  73.  
  74.         interval = setInterval(ready, 1000);
  75.  
  76.         // #region MENU
  77.         /** 生成 Menu */
  78.         function initialMenu(clone) {
  79.           // Wrapper
  80.           wrapperEle = document.createElement("section");
  81.           wrapperEle.classList.add("hs-dashboard__wrapper", "hs-hide");
  82.  
  83.           if (customStyleEnable) {
  84.             wrapperEle.setAttribute("id", "hs-dashboard");
  85.           }
  86.  
  87.           // Header
  88.           const headerEle = document.createElement("header");
  89.           headerEle.classList.add("hs-dashboard__header");
  90.  
  91.           // Title → Header
  92.           const titleEle = document.createElement("h1");
  93.           titleEle.classList.add("hs-dashboard__title");
  94.           titleEle.innerText = titleText || "";
  95.           headerEle.appendChild(titleEle);
  96.  
  97.           // Theme → Header
  98.           if (customStyleEnable) {
  99.             const themeEle = document.createElement("div");
  100.             themeEle.classList.add("hs-theme-switch");
  101.             themeEle.innerHTML = initialThemeTpl();
  102.             headerEle.appendChild(themeEle);
  103.           }
  104.  
  105.           // Menu
  106.           const containerEle = document.createElement("div");
  107.           containerEle.classList.add("hs-dashboard__container");
  108.  
  109.           // 1. 先从页面上获取 DOM 生成 gird
  110.           let gridEle = null;
  111.           let nodeTemp = null;
  112.  
  113.           if (girdIsList) {
  114.             gridEle = document.createElement("div");
  115.             const gridListEle = document.querySelectorAll(gridSelector);
  116.             gridListEle &&
  117.               gridListEle.forEach((element) => {
  118.                 nodeTemp = clone ? element.cloneNode(true) : element;
  119.                 gridEle.appendChild(nodeTemp);
  120.               });
  121.           } else {
  122.             nodeTemp = document.querySelector(gridSelector);
  123.             gridEle = clone ? nodeTemp.cloneNode(true) : nodeTemp;
  124.             gridEle && nodeTemp.removeAttribute("id");
  125.           }
  126.  
  127.           gridEle.classList.add("hs-dashboard__grid"); // 追加新的样式
  128.  
  129.           // Menu → Container
  130.           containerEle.appendChild(gridEle);
  131.  
  132.           // 2. 内部元素追加新的样式
  133.           // 2.1 column
  134.           const columnEle = containerEle.querySelectorAll(columnSelector);
  135.           columnEle.forEach((element) => {
  136.             element.classList.add("hs-dashboard__column");
  137.           });
  138.  
  139.           // 2.2 title
  140.           const columnTitleEle = containerEle.querySelectorAll(columnTitleSelector);
  141.           columnTitleEle.forEach((element) => {
  142.             element.classList.add("hs-dashboard__title");
  143.           });
  144.  
  145.           // 2.3 menu list
  146.           const menuListEle = containerEle.querySelectorAll(menuListSelector);
  147.           menuListEle.forEach((element) => {
  148.             element.classList.add("hs-dashboard__list");
  149.           });
  150.  
  151.           // 2.4 menu item
  152.           const menuItemEle = containerEle.querySelectorAll(menuItemSelector);
  153.           menuItemEle.forEach((element) => {
  154.             element.classList.add("hs-dashboard__item");
  155.           });
  156.  
  157.           // 2.5 menu item action
  158.           const actionEle = containerEle.querySelector(menuItemActionSelector);
  159.           if (actionEle) {
  160.             const menuItemTemp = getParents(actionEle, menuItemSelector);
  161.             menuItemTemp.classList.add("hs-active");
  162.           }
  163.  
  164.           // header,container → wrapper
  165.           wrapperEle.appendChild(headerEle);
  166.           wrapperEle.appendChild(containerEle);
  167.  
  168.           // wrapper → body
  169.           bodyContainer.appendChild(wrapperEle);
  170.         }
  171.         // #endregion MENU
  172.  
  173.         // #region Event
  174.         /** 注册事件 */
  175.         function handleEvent() {
  176.           if (!wrapperEle) {
  177.             wrapperEle = document.querySelector(".hs-dashboard__wrapper");
  178.           }
  179.  
  180.           if (!themeSwitchEle) {
  181.             themeSwitchEle = document.querySelector(".hs-theme-switch");
  182.           }
  183.  
  184.           if (!themeSwitchForm) {
  185.             themeSwitchForm = document.querySelector(".hs-theme-switch__form-control");
  186.           }
  187.  
  188.           bodyContainer.addEventListener("click", (event) => {
  189.             const targetEle = event.target;
  190.  
  191.             const itemEle = getParents(targetEle, ".hs-dashboard__item");
  192.  
  193.             const isItem = hasClass(targetEle, "hs-dashboard__item");
  194.  
  195.             const isItemWrapper = getParents(targetEle, ".hs-dashboard__column") && getParents(targetEle, ".hs-dashboard__list");
  196.  
  197.             const isToggle = getParents(targetEle, ".hs-dashboard__toggle-menu") || hasClass(targetEle, "hs-dashboard__toggle-menu");
  198.  
  199.             const isHelp = getParents(targetEle, ".hs-dashboard__toggle-help") || hasClass(targetEle, "hs-dashboard__toggle-help");
  200.  
  201.             const isTheme = getParents(targetEle, ".hs-theme-switch") || hasClass(targetEle, "hs-theme-switch");
  202.  
  203.             if (itemEle || isItem || isItemWrapper) {
  204.               window.setTimeout(() => {
  205.                 clearStyle(wrapperEle);
  206.               }, 300);
  207.  
  208.               handleItemClick(itemEle, isItem, targetEle);
  209.             } else if (isToggle) {
  210.               wrapperEle.classList.toggle("hs-hide");
  211.               bodyContainer.classList.toggle("hs-body-overflow_hide");
  212.             } else if (isHelp) {
  213.               clearStyle(wrapperEle);
  214.               handleHelp();
  215.             } else if (isTheme) {
  216.               handleTheme();
  217.             }
  218.           });
  219.         }
  220.  
  221.         /** 导航点击 */
  222.         function handleItemClick(itemEle, isItem, targetEle) {
  223.           let itemTemp = null;
  224.  
  225.           if (itemEle) {
  226.             itemTemp = itemEle;
  227.           } else if (isItem) {
  228.             itemTemp = targetEle;
  229.           }
  230.  
  231.           if (itemTemp) {
  232.             const items = wrapperEle.querySelectorAll(".hs-dashboard__item");
  233.             items.forEach((element) => {
  234.               element.classList.remove("hs-active");
  235.               element.querySelector("a").classList.remove("active");
  236.             });
  237.             itemTemp.classList.add("hs-active");
  238.           }
  239.         }
  240.  
  241.         /** 退出预览 */
  242.         function clearStyle(wrapperEle) {
  243.           wrapperEle.classList.add("hs-hide");
  244.           bodyContainer.classList.remove("hs-body-overflow_hide");
  245.         }
  246.         // #endregion Event
  247.  
  248.         // #region HELP
  249.         /** 是否启用‘页面滚动至指定位置’ */
  250.         function initialHelp() {
  251.           if (!helpEnable) {
  252.             const ele = document.querySelector(".hs-dashboard__toggle-help");
  253.             ele.classList.add("hs-hide");
  254.           }
  255.         }
  256.  
  257.         /** 页面滚动至指定位置 */
  258.         function handleHelp() {
  259.           if (!helpSelector) {
  260.             return false;
  261.           }
  262.  
  263.           const helpEle = document.querySelector(helpSelector);
  264.           const top = helpEle.getBoundingClientRect().top + window.pageYOffset;
  265.  
  266.           window.scrollTo({
  267.             top,
  268.             behavior: "smooth",
  269.           });
  270.         }
  271.         // #endregion HELP
  272.  
  273.         // #region STYLE
  274.         /** 添加样式 */
  275.         function initialStyle(param) {
  276.           let tpl = initialStyleTpl();
  277.           const headEle = document.head || document.getElementsByTagName("head")[0];
  278.           const styleEle = document.createElement("style");
  279.  
  280.           let str = null;
  281.  
  282.           if (typeof param === "function") {
  283.             str = param();
  284.           } else if (typeof param === "string") {
  285.             str = param;
  286.           }
  287.  
  288.           if (typeof str === "string") {
  289.             tpl += str;
  290.           }
  291.  
  292.           styleEle.type = "text/css";
  293.  
  294.           if (styleEle.styleSheet) {
  295.             styleEle.styleSheet.cssText = tpl;
  296.           } else {
  297.             styleEle.appendChild(document.createTextNode(tpl));
  298.           }
  299.  
  300.           headEle.appendChild(styleEle);
  301.         }
  302.  
  303.         /** 样式表 */
  304.         function initialStyleTpl() {
  305.           return `
  306.  
  307.   :root {
  308.     --item-height: 36px;
  309.     --hs-font-size-base: 15px;
  310.     --hs-global-spacing: 1rem;
  311.     --hs-color-primary: #1890ff;
  312.     --hs-spacing-horizontal: var(--hs-global-spacing);
  313.   }
  314.   .hs-hide {
  315.     display: none !important;
  316.   }
  317.  
  318.   .hs-body-overflow_hide {
  319.     height: 100% !important;
  320.     overflow: hidden !important;
  321.   }
  322.  
  323.   /* #region toggle */
  324.   .hs-dashboard__toggle {
  325.     position: fixed;
  326.     z-index: 99999;
  327.     top: 15px;
  328.     right: 5px;
  329.   }
  330.  
  331.   .hs-dashboard__toggle-item {
  332.     position: relative;
  333.     width: 28px;
  334.     height: 28px;
  335.     margin-top: 10px;
  336.     margin-bottom: 10px;
  337.     overflow: hidden;
  338.     line-height: 1 !important;
  339.     border-radius: 50%;
  340.     border: 1px solid #ccc;
  341.     text-align: center;
  342.     color: #555;
  343.     background-color: #fff;
  344.     cursor: pointer;
  345.     transition: all 0.2s;
  346.   }
  347.  
  348.   .hs-dashboard__toggle-item:hover {
  349.     border-color: #aaa;
  350.     color: #111;
  351.   }
  352.  
  353.   .hs-dashboard__toggle-icon svg{
  354.     position: absolute;
  355.     top: 50%;
  356.     left: 50%;
  357.     z-index: 9;
  358.     transform: translate(-50%, -50%);
  359.     font-style: normal !important;
  360.   }
  361.   /* #endregion toggle */
  362.  
  363.   /* #region wrapper */
  364.   .hs-dashboard__wrapper {
  365.     position: fixed;
  366.     top: 0;
  367.     right: 0;
  368.     bottom: 0;
  369.     left: 0;
  370.     z-index: 99998;
  371.     overflow-y: auto;
  372.     background-color: #fff;
  373.     font-size: var(--hs-font-size-base);
  374.   }
  375.  
  376.   .hs-dashboard__wrapper::-webkit-scrollbar {
  377.     width: 8px;
  378.     height: 6px;
  379.     background: rgba(0, 0, 0, 0.1);
  380.   }
  381.  
  382.   .hs-dashboard__wrapper::-webkit-scrollbar-thumb {
  383.     background: rgba(0, 0, 0, 0.3);
  384.   }
  385.  
  386.   .hs-dashboard__wrapper::-webkit-scrollbar-track {
  387.     background: rgba(0, 0, 0, 0.1);
  388.   }
  389.   /* #endregion wrapper */
  390.  
  391.   .hs-dashboard__header {
  392.     position: relative;
  393.     padding-top: 10px;
  394.     text-align: center;
  395.   }
  396.  
  397.   .hs-dashboard__header .hs-dashboard__title {
  398.     margin: 0;
  399.     padding-top: 10px;
  400.     padding-bottom: 10px;
  401.     font-size: 1em;
  402.     font-weight: normal;
  403.   }
  404.  
  405.   /* #region theme */
  406.   .hs-theme-switch {
  407.     display: flex;
  408.     touch-action: pan-x;
  409.     position: relative;
  410.     background-color: #fff;
  411.     border: 0;
  412.     margin: 0;
  413.     padding: 0;
  414.     user-select: none;
  415.     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  416.     -webkit-tap-highlight-color: transparent;
  417.     cursor: pointer;
  418.   }
  419.  
  420.   .hs-theme-switch {
  421.     width: 50px;
  422.     height: 24px;
  423.     padding: 0;
  424.     border-radius: 30px;
  425.     background-color: #4d4d4d;
  426.     transition: all 0.2s ease;
  427.   }
  428.  
  429.   .hs-dashboard__header .hs-theme-switch {
  430.     position: absolute;
  431.     top: 10px;
  432.     left: 10px;
  433.   }
  434.  
  435.   .hs-theme-switch__style {
  436.     position: relative;
  437.     width: 24px;
  438.     height: 24px;
  439.     line-height: 1;
  440.     font-size: 20px;
  441.     text-align: center;
  442.   }
  443.  
  444.   .hs-theme-switch__icon svg {
  445.     position: absolute;
  446.     top: 50%;
  447.     left: 50%;
  448.     transform: translate(-50%, -50%);
  449.   }
  450.  
  451.   .hs-theme-switch__thumb {
  452.     position: absolute;
  453.     top: 1px;
  454.     left: 1px;
  455.     width: 22px;
  456.     height: 22px;
  457.     border: 1px solid #ff7938;
  458.     border-radius: 50%;
  459.     background-color: #fafafa;
  460.     box-sizing: border-box;
  461.     transition: all 0.25s ease;
  462.   }
  463.  
  464.   .hs-theme-switch_checked .hs-theme-switch__thumb {
  465.     left: 27px;
  466.     border-color: #4d4d4d;
  467.   }
  468.  
  469.   .hs-toggle-screenreader-only {
  470.     border: 0;
  471.     clip: rect(0 0 0 0);
  472.     height: 1px;
  473.     margin: -1px;
  474.     overflow: hidden;
  475.     padding: 0;
  476.     position: absolute;
  477.     width: 1px;
  478.   }
  479.   /* #endregion theme */
  480.  
  481.   /* #region grid */
  482.   .hs-dashboard__grid {
  483.     display: flex;
  484.     justify-content: space-evenly;
  485.     margin: 0;
  486.     padding: 0;
  487.     list-style: none;
  488.   }
  489.  
  490.   .hs-dashboard__column {
  491.     padding-right: 10px;
  492.     padding-left: 10px;
  493.   }
  494.  
  495.   .hs-dashboard__column a {
  496.     display: block;
  497.     padding-left: 20px !important;
  498.     padding-right: 40px !important;
  499.     text-decoration: none;
  500.   }
  501.  
  502.   .hs-dashboard__container ul {
  503.     padding: 0;
  504.   }
  505.  
  506.   .hs-dashboard__container li {
  507.     padding-left: 0 !important;
  508.     list-style: none;
  509.   }
  510.  
  511.   .hs-dashboard__column .hs-dashboard__title {
  512.     display: block;
  513.     padding-left: var(--hs-spacing-horizontal) !important;
  514.     padding-right: calc(var(--hs-spacing-horizontal) * 2) !important;
  515.     text-align: left;
  516.     margin-top: 10px !important;
  517.   }
  518.  
  519.   .hs-dashboard__column .hs-dashboard__list {
  520.     margin-top: 10px !important;
  521.   }
  522.  
  523.   .hs-dashboard__column .hs-dashboard__list .hs-dashboard__item {
  524.     margin: 0 !important;
  525.     padding-left: 0 !important;
  526.     padding-right: 0 !important;
  527.     height: var(--item-height);
  528.     line-height: var(--item-height);
  529.   }
  530.   /* #endregion grid */
  531.  
  532.   /* #region custom */
  533.   #hs-dashboard.hs-dashboard__wrapper {
  534.     transition: all 0.2s ease;
  535.   }
  536.  
  537.   #hs-dashboard .hs-dashboard__column .hs-dashboard__title {
  538.     font-size: 14px;
  539.     line-height: 1.5715;
  540.     color: rgba(0, 0, 0, 0.45);
  541.   }
  542.  
  543.   #hs-dashboard a {
  544.     overflow: hidden;
  545.     white-space: nowrap;
  546.     font-size: 14px;
  547.     text-overflow: ellipsis;
  548.     text-decoration: none;
  549.     color: rgba(0, 0, 0, 0.85);
  550.     transition: color 0.3s ease;
  551.   }
  552.  
  553.   #hs-dashboard a:hover {
  554.     color: var(--hs-color-primary);
  555.     text-decoration: none;
  556.     outline: 0;
  557.   }
  558.  
  559.   /* light */
  560.   #hs-dashboard.hs-dashboard__wrapper_light,
  561.   #hs-dashboard.hs-dashboard__wrapper_light .hs-dashboard__grid,
  562.   #hs-dashboard.hs-dashboard__wrapper_light .hs-dashboard__column,
  563.   #hs-dashboard.hs-dashboard__wrapper_light .hs-dashboard__list {
  564.     color: #161616;
  565.     background-color: #fff;
  566.   }
  567.  
  568.   /* dark */
  569.   #hs-dashboard.hs-dashboard__wrapper_dark,
  570.   #hs-dashboard.hs-dashboard__wrapper_dark .hs-dashboard__grid,
  571.   #hs-dashboard.hs-dashboard__wrapper_dark .hs-dashboard__column,
  572.   #hs-dashboard.hs-dashboard__wrapper_dark .hs-dashboard__list {
  573.     color: #fff;
  574.     background-color: #161616;
  575.   }
  576.  
  577.   #hs-dashboard.hs-dashboard__wrapper_dark .hs-dashboard__title {
  578.     font-weight: bold;
  579.     color: #fff;
  580.   }
  581.  
  582.   #hs-dashboard.hs-dashboard__wrapper_dark a {
  583.     color: #fff;
  584.   }
  585.  
  586.   #hs-dashboard.hs-dashboard__wrapper_dark a:hover {
  587.     color: var(--hs-color-primary);
  588.   }
  589.  
  590.   #hs-dashboard .hs-dashboard__item.active,
  591.   #hs-dashboard .hs-dashboard__item.active a,
  592.   #hs-dashboard .hs-dashboard__item .active,
  593.   #hs-dashboard .hs-dashboard__item.hs-active,
  594.   #hs-dashboard .hs-dashboard__item.hs-active a {
  595.     color: var(--hs-color-primary);
  596.   }
  597.  
  598.   #hs-dashboard .hs-dashboard__item.hs-active {
  599.     background-color: #e6f7ff;
  600.   }
  601.  
  602.   #hs-dashboard .hs-dashboard__item {
  603.     position: relative;
  604.   }
  605.  
  606.   #hs-dashboard .hs-dashboard__item::after {
  607.     content: ' ';
  608.     position: absolute;
  609.     top: 0;
  610.     right: 0;
  611.     bottom: 0;
  612.     border-right: 3px solid var(--hs-color-primary);
  613.     transform: scaleY(0.0001);
  614.     transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
  615.       opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
  616.       -webkit-transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
  617.     opacity: 0;
  618.   }
  619.  
  620.   #hs-dashboard .hs-dashboard__item.hs-active::after {
  621.     transform: scaleY(1);
  622.     opacity: 1;
  623.     transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
  624.       opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
  625.       -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
  626.   }
  627.   /* #endregion custom */
  628.  
  629.   `;
  630.         }
  631.         // #endregion STYLE
  632.  
  633.         // #region TOGGLE
  634.         /** 生成 Dashboard 开关 */
  635.         function initialToggle() {
  636.           const tpl = initialToggleTpl();
  637.           const ele = document.createElement("section");
  638.           // ele.className = 'hs-dashboard__toggle';
  639.           // ele.setAttribute("class", "hs-dashboard__toggle");
  640.           ele.classList.add("hs-dashboard__toggle");
  641.           ele.innerHTML = tpl;
  642.  
  643.           // toggle → body
  644.           bodyContainer.appendChild(ele);
  645.         }
  646.         /** Dashboard 开关 DOM */
  647.         function initialToggleTpl() {
  648.           return `
  649.       <!-- menu -->
  650.       <div class="hs-dashboard__toggle-item hs-dashboard__toggle-menu">
  651.         <i class="hs-dashboard__toggle-icon">
  652.           <svg
  653.             viewBox="64 64 896 896"
  654.             focusable="false"
  655.             data-icon="appstore"
  656.             width="1em"
  657.             height="1em"
  658.             fill="currentColor"
  659.             aria-hidden="true"
  660.           >
  661.             <path
  662.               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"
  663.             ></path>
  664.           </svg>
  665.         </i>
  666.       </div>
  667.       <!-- api -->
  668.       <div class="hs-dashboard__toggle-item hs-dashboard__toggle-help">
  669.         <i class="hs-dashboard__toggle-icon">
  670.           <svg
  671.             viewBox="64 64 896 896"
  672.             focusable="false"
  673.             class=""
  674.             data-icon="bulb"
  675.             width="1em"
  676.             height="1em"
  677.             fill="currentColor"
  678.             aria-hidden="true"
  679.           >
  680.             <path
  681.               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"
  682.             ></path>
  683.           </svg>
  684.         </i>
  685.       </div>
  686.         `;
  687.         }
  688.         // #endregion TOGGLE
  689.  
  690.         // #region THEME
  691.         function handleTheme(isInit) {
  692.           if (isInit) {
  693.             const theme = localStorage.getItem("hs_dashboard_theme");
  694.  
  695.             if (theme && theme === "dark") {
  696.               themeSwitchForm.checked = true;
  697.             } else {
  698.               themeSwitchForm.checked = false;
  699.             }
  700.           } else {
  701.             themeSwitchForm.click();
  702.           }
  703.  
  704.           const checked = themeSwitchForm.checked;
  705.  
  706.           if (checked) {
  707.             localStorage.setItem("hs_dashboard_theme", "dark");
  708.             wrapperEle.classList.add("hs-dashboard__wrapper_dark");
  709.             wrapperEle.classList.remove("hs-dashboard__wrapper_light");
  710.             themeSwitchEle.classList.add("hs-theme-switch_checked");
  711.           } else {
  712.             localStorage.setItem("hs_dashboard_theme", "light");
  713.             wrapperEle.classList.add("hs-dashboard__wrapper_light");
  714.             wrapperEle.classList.remove("hs-dashboard__wrapper_dark");
  715.             themeSwitchEle.classList.remove("hs-theme-switch_checked");
  716.           }
  717.         }
  718.  
  719.         function initialThemeTpl() {
  720.           return `
  721.     <input type="checkbox" class="hs-toggle-screenreader-only hs-theme-switch__form-control" title="Dark mode" />
  722.     <div class="hs-theme-switch__style hs-theme-switch__style_dark">
  723.       <i class="hs-theme-switch__icon">
  724.         <svg
  725.           t="1588325093630"
  726.           class="icon"
  727.           viewBox="0 0 1024 1024"
  728.           version="1.1"
  729.           xmlns="http://www.w3.org/2000/svg"
  730.           p-id="11008"
  731.           width="1em"
  732.           height="1em"
  733.         >
  734.           <path
  735.             d="M483.555556 964.266667c-164.977778 0-315.733333-85.333333-398.222223-224.711111 19.911111 2.844444 39.822222 2.844444 56.888889 2.844444 275.911111 0 500.622222-224.711111 500.622222-500.622222 0-68.266667-14.222222-133.688889-39.822222-193.422222 201.955556 54.044444 347.022222 238.933333 347.022222 449.422222 0 256-210.488889 466.488889-466.488888 466.488889z"
  736.             fill="#F7FF53"
  737.             p-id="11009"
  738.           ></path>
  739.           <path
  740.             d="M631.466667 73.955556c179.2 62.577778 301.511111 230.4 301.511111 423.822222 0 247.466667-201.955556 449.422222-449.422222 449.422222-147.911111 0-281.6-71.111111-364.088889-187.733333H142.222222c284.444444 0 517.688889-233.244444 517.688889-517.688889 0-56.888889-8.533333-113.777778-28.444444-167.822222M571.733333 22.755556C605.866667 88.177778 625.777778 162.133333 625.777778 241.777778c0 267.377778-216.177778 483.555556-483.555556 483.555555-31.288889 0-59.733333-2.844444-88.177778-8.533333 79.644444 156.444444 241.777778 264.533333 429.511112 264.533333 267.377778 0 483.555556-216.177778 483.555555-483.555555C967.111111 261.688889 796.444444 65.422222 571.733333 22.755556z"
  741.             fill="#303133"
  742.             p-id="11010"
  743.           ></path>
  744.           <path
  745.             d="M787.911111 455.111111c-5.688889-2.844444-8.533333-8.533333-5.688889-14.222222 5.688889-17.066667-2.844444-42.666667-19.911111-48.355556-17.066667-5.688889-39.822222 8.533333-45.511111 22.755556-2.844444 5.688889-8.533333 8.533333-14.222222 5.688889-5.688889-2.844444-8.533333-8.533333-5.688889-14.222222 8.533333-25.6 42.666667-45.511111 73.955555-34.133334 28.444444 11.377778 39.822222 48.355556 31.288889 73.955556-2.844444 5.688889-8.533333 8.533333-14.222222 8.533333"
  746.             fill="#303133"
  747.             p-id="11011"
  748.           ></path>
  749.           <path
  750.             d="M608.711111 620.088889c-14.222222 0-28.444444-2.844444-39.822222-11.377778-31.288889-22.755556-31.288889-65.422222-31.288889-68.266667 0-8.533333 8.533333-17.066667 17.066667-17.066666s17.066667 8.533333 17.066666 17.066666 2.844444 31.288889 17.066667 39.822223c11.377778 8.533333 25.6 8.533333 45.511111 0 8.533333-2.844444 19.911111 2.844444 22.755556 11.377777 2.844444 8.533333-2.844444 19.911111-11.377778 22.755556-14.222222 2.844444-25.6 5.688889-36.977778 5.688889zM571.733333 540.444444z"
  751.             fill="#FF2929"
  752.             p-id="11012"
  753.           ></path>
  754.           <path
  755.             d="M810.666667 588.8c-5.688889 19.911111-36.977778 28.444444-68.266667 19.911111-31.288889-8.533333-54.044444-34.133333-48.355556-54.044444 5.688889-19.911111 36.977778-28.444444 68.266667-19.911111 34.133333 11.377778 54.044444 34.133333 48.355556 54.044444"
  756.             fill="#FFA450"
  757.             p-id="11013"
  758.           ></path>
  759.           <path
  760.             d="M864.711111 270.222222c14.222222 42.666667 19.911111 91.022222 19.911111 136.533334 0 258.844444-213.333333 466.488889-477.866666 466.488888-96.711111 0-187.733333-28.444444-264.533334-76.8 82.488889 93.866667 204.8 156.444444 344.177778 156.444445C736.711111 952.888889 938.666667 756.622222 938.666667 512c0-88.177778-28.444444-173.511111-73.955556-241.777778z"
  761.             fill="#FF7938"
  762.             p-id="11014"
  763.           ></path>
  764.         </svg>
  765.       </i>
  766.     </div>
  767.     <div class="hs-theme-switch__style hs-theme-switch__style_light">
  768.       <i class="hs-theme-switch__icon">
  769.         <svg
  770.           t="1588324703446"
  771.           class="icon"
  772.           viewBox="0 0 1024 1024"
  773.           version="1.1"
  774.           xmlns="http://www.w3.org/2000/svg"
  775.           p-id="6232"
  776.           width="1em"
  777.           height="1em"
  778.         >
  779.           <path
  780.             d="M792.35 835.94l-128.09-30.32c-17.73-4.2-36.12 3.66-45.34 19.37l-66.64 113.52c-15.83 26.97-54.67 27.4-71.1 0.79l-69.14-112.02c-9.57-15.5-28.13-22.95-45.76-18.36l-127.39 33.15c-30.26 7.88-58.03-19.29-50.83-49.72l30.32-128.09c4.2-17.73-3.66-36.12-19.37-45.34L85.49 552.28c-26.97-15.83-27.4-54.67-0.79-71.1l112.02-69.14c15.5-9.57 22.95-28.13 18.36-45.76l-33.15-127.39c-7.88-30.26 19.29-58.03 49.72-50.83l128.09 30.32c17.73 4.2 36.12-3.66 45.34-19.37l66.64-113.52c15.83-26.97 54.67-27.4 71.1-0.79l69.14 112.02c9.57 15.5 28.13 22.95 45.76 18.36l127.39-33.15c30.26-7.88 58.03 19.29 50.83 49.72l-30.32 128.09c-4.2 17.73 3.66 36.12 19.37 45.34l113.52 66.64c26.97 15.83 27.4 54.67 0.79 71.1l-112.02 69.14c-15.5 9.57-22.95 28.13-18.36 45.76l33.15 127.39c7.88 30.26-19.29 58.03-49.72 50.83z"
  781.             fill="#FF7938"
  782.             p-id="6233"
  783.           ></path>
  784.           <path
  785.             d="M512 512m-207.66 0a207.66 207.66 0 1 0 415.32 0 207.66 207.66 0 1 0-415.32 0Z"
  786.             fill="#F7FF53"
  787.             p-id="6234"
  788.           ></path>
  789.           <path
  790.             d="M442.78 468.74m-25.96 0a25.96 25.96 0 1 0 51.92 0 25.96 25.96 0 1 0-51.92 0Z"
  791.             fill="#303133"
  792.             p-id="6235"
  793.           ></path>
  794.           <path
  795.             d="M581.22 468.74m-25.96 0a25.96 25.96 0 1 0 51.92 0 25.96 25.96 0 1 0-51.92 0Z"
  796.             fill="#303133"
  797.             p-id="6236"
  798.           ></path>
  799.           <path
  800.             d="M442.78 582.02s17.31 48.31 69.22 48.31 69.22-48.31 69.22-48.31H442.78z"
  801.             fill="#FF2929"
  802.             p-id="6237"
  803.           ></path>
  804.         </svg>
  805.       </i>
  806.     </div>
  807.     <div class="hs-theme-switch__thumb"></div>
  808.   `;
  809.         }
  810.         // #endregion THEME
  811.  
  812.         // #region COMMON
  813.         function hasClass(el, className) {
  814.           if (el.classList) {
  815.             return el.classList.contains(className);
  816.           } else {
  817.             return !!el.className.match(new RegExp("(\\s|^)" + className + "(\\s|$)"));
  818.           }
  819.         }
  820.  
  821.         function getParents(elem, selector) {
  822.           // Element.matches() polyfill
  823.           if (!Element.prototype.matches) {
  824.             Element.prototype.matches =
  825.               Element.prototype.matchesSelector ||
  826.               Element.prototype.mozMatchesSelector ||
  827.               Element.prototype.msMatchesSelector ||
  828.               Element.prototype.oMatchesSelector ||
  829.               Element.prototype.webkitMatchesSelector ||
  830.               function (s) {
  831.                 var matches = (this.document || this.ownerDocument).querySelectorAll(s),
  832.                   i = matches.length;
  833.                 while (--i >= 0 && matches.item(i) !== this) {}
  834.                 return i > -1;
  835.               };
  836.           }
  837.  
  838.           // Get the closest matching element
  839.           for (; elem && elem !== document; elem = elem.parentNode) {
  840.             if (elem.matches(selector)) return elem;
  841.           }
  842.           return null;
  843.         }
  844.         // #endregion
  845.       })();