☰

KameSame Open Framework - Menu module

Menu module for KameSame Open Framework

当前为 2022-11-05 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/451522/1113602/KameSame%20Open%20Framework%20-%20Menu%20module.js 

  1. "use strict";
  2. // ==UserScript==
  3. // @name        KameSame Open Framework - Menu module
  4. // @namespace   timberpile
  5. // @description Menu module for KameSame Open Framework
  6. // @version     0.2
  7. // @copyright   2022+, Robin Findley, Timberpile
  8. // @license     MIT http://opensource.org/licenses/MIT
  9. // ==/UserScript==
  10. var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
  11.     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
  12.     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
  13.     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
  14. };
  15.  
  16. (async (global) => {
  17.     var _MenuUi_instances, _MenuUi_installStyle, _MenuUi_installMenu;
  18.     const ksof = global.ksof;
  19.     await ksof.ready('document');
  20.     class MenuUi {
  21.         constructor() {
  22.             _MenuUi_instances.add(this);
  23.             this.style = undefined;
  24.             this.menu = undefined;
  25.             this.submenus = new Map();
  26.             this.configs = [];
  27.             const reinstallMenu = () => {
  28.                 if (this.style) {
  29.                     this.style.remove();
  30.                 }
  31.                 this.style = __classPrivateFieldGet(this, _MenuUi_instances, "m", _MenuUi_installStyle).call(this);
  32.                 if (this.menu) {
  33.                     this.menu.remove();
  34.                 }
  35.                 try {
  36.                     this.menu = __classPrivateFieldGet(this, _MenuUi_instances, "m", _MenuUi_installMenu).call(this);
  37.                 }
  38.                 catch (error) {
  39.                     throw new Error(`Can't install ksof menu: ${error}`);
  40.                 }
  41.             };
  42.             ksof.addDomObserver({ name: 'menu', query: '#scripts-menu' });
  43.             ksof.waitState(ksof.domObserverState('menu'), 'absent', () => {
  44.                 reinstallMenu();
  45.                 const oldConfigs = this.configs;
  46.                 this.configs = [];
  47.                 for (const config of oldConfigs) {
  48.                     insertScriptLink(config);
  49.                 }
  50.             }, true);
  51.         }
  52.         get header() {
  53.             return this.dropdownMenu?.querySelector(':scope > li.scripts-header');
  54.         }
  55.         get scriptsIcon() {
  56.             if (ksof.pageInfo.on == 'review') {
  57.                 return this.menu.querySelector(':scope > a.scripts-icon');
  58.             }
  59.             else {
  60.                 // TODO use fitting selector for top menu bar
  61.                 return this.menu.querySelector(':scope > a.scripts-icon');
  62.             }
  63.         }
  64.         get dropdownMenu() {
  65.             return this.menu.querySelector('ul.dropdown-menu');
  66.         }
  67.         getSubmenu(name) {
  68.             const safeName = escapeAttr(name);
  69.             return this.submenus.get(safeName);
  70.         }
  71.         //------------------------------
  72.         // Install Submenu, if not present.
  73.         //------------------------------
  74.         installScriptsSubmenu(name) {
  75.             // Abort if already installed.
  76.             const sub = this.getSubmenu(name);
  77.             if (sub) {
  78.                 return sub;
  79.             }
  80.             const safeName = escapeAttr(name);
  81.             const safeText = escapeText(name);
  82.             const linkElement = document.createElement('a');
  83.             linkElement.href = '#';
  84.             linkElement.innerText = safeText;
  85.             const dropdownMenu = document.createElement('ul');
  86.             dropdownMenu.className = 'dropdown-menu';
  87.             const submenu = document.createElement('li');
  88.             submenu.setAttribute('name', safeName);
  89.             submenu.appendChild(linkElement);
  90.             submenu.appendChild(dropdownMenu);
  91.             this.dropdownMenu.appendChild(submenu);
  92.             this.submenus.set(safeName, submenu);
  93.             const menuContents = this.dropdownMenu.querySelectorAll(':scope > .scripts-submenu, :scope > .script-link');
  94.             if (!menuContents)
  95.                 return undefined;
  96.             for (const node of Array.from(menuContents).sort(sortName)) {
  97.                 // TODO why append again without removing first?
  98.                 node.parentNode?.append(node);
  99.             }
  100.             return submenu;
  101.         }
  102.     }
  103.     _MenuUi_instances = new WeakSet(), _MenuUi_installStyle = function _MenuUi_installStyle() {
  104.         const style = document.head.querySelector('style[name="scripts_submenu"]');
  105.         if (style) {
  106.             return style;
  107.         }
  108.         document.head.insertAdjacentHTML('beforeend', `<style name="scripts_submenu">
  109.                     #scripts-menu {text-shadow:none}
  110.                     #scripts-menu.scripts-menu-icon {display:inline-block}
  111.                     #scripts-menu .scripts-icon {display:inline-block cursor: pointer font-size: 1.2em margin-right: auto opacity: .65 position: relative top: 3px}
  112.                     #scripts-menu:not(.open) > .dropdown-menu {display:none}
  113.                     #scripts-menu .scripts-submenu:not(.open) > .dropdown-menu {display:none}
  114.                     #scripts-menu ul.dropdown-menu {position:absolute background-color:#eee margin:0 padding:5px 0 list-style-type:none border:1px solid #333 display:block}
  115.                     #scripts-menu ul.dropdown-menu > li {text-align:left color:#333 white-space:nowrap line-height:20px padding:3px 0 display:list-item}
  116.                     #scripts-menu ul.dropdown-menu > li.scripts-header {text-transform:uppercase font-size:.8rem font-weight:bold padding:3px 12px display:list-item}
  117.                     #scripts-menu ul.dropdown-menu > li:hover:not(.scripts-header) {background-color:rgba(0,0,0,0.15)}
  118.                     #scripts-menu ul.dropdown-menu a {padding:3px 20px color:#333 opacity:1}
  119.                     #scripts-menu .scripts-submenu {position:relative font-size: 1rem}
  120.                     #scripts-menu .scripts-submenu > a:after {content:">" font-family:"FontAwesome" position:absolute top:0 right:0 padding:3px 4px 3px 0}
  121.                     #scripts-menu .scripts-submenu .dropdown-menu {left:100% top:-6px}
  122.                     #app.kamesame nav li #scripts-menu {
  123.                         display: flex
  124.                         flex-direction: column
  125.                         height: 100%
  126.                         width: 100%
  127.                         color: var(--gray)
  128.                     }
  129.                 </style>`);
  130.         return document.head.querySelector('style[name="scripts_submenu"]');
  131.     }, _MenuUi_installMenu = function _MenuUi_installMenu() {
  132.         // Throws Error
  133.         let menu = document.querySelector('#scripts-menu');
  134.         if (menu) {
  135.             return menu;
  136.         }
  137.         const page = ksof.pageInfo.on;
  138.         // Abort if on unsupported page
  139.         // if (!page) throw new Error('Unsupported page')
  140.         // Install html.
  141.         if (page == 'review') {
  142.             const exitButton = document.querySelector('.header a.exit');
  143.             if (!exitButton)
  144.                 throw new Error('Exit button not found');
  145.             exitButton.insertAdjacentHTML('afterend', `
  146.                 <div id="scripts-menu" class="scripts-menu-icon">
  147.                     <a class="scripts-icon state" href="#"><i title="Script Menu">⚙️</i></a>
  148.                     <ul class="dropdown-menu">
  149.                         <li class="scripts-header">Script Menu</li>
  150.                     </ul>
  151.                 </div>`);
  152.         }
  153.         else {
  154.             const searchIcon = findSearchIcon();
  155.             if (!searchIcon)
  156.                 throw new Error('Search icon not found');
  157.             searchIcon.parentElement?.insertAdjacentHTML('afterend', `
  158.                 <li>
  159.                     <div id="scripts-menu" class="scripts-menu-icon">
  160.                         <a class="scripts-icon" href="#">
  161.                             <div class="icon">
  162.                                 <div>⚙</div>
  163.                             </div>
  164.                             <div class="label">
  165.                                 <span>Scripts Menu</span>
  166.                             </div>
  167.                         </a>
  168.                         <ul class="dropdown-menu">
  169.                             <li class="scripts-header label">Scripts Menu</li>
  170.                         </ul>
  171.                     </div>
  172.                 </li>`);
  173.         }
  174.         menu = document.querySelector('#scripts-menu');
  175.         if (!menu) {
  176.             throw new Error('Menu not found after insertion');
  177.         }
  178.         this.menu = menu;
  179.         this.scriptsIcon.addEventListener('click', (e) => {
  180.             this.menu.classList.toggle('open');
  181.             if (this.menu.classList.contains('open'))
  182.                 document.body.addEventListener('click', bodyClick);
  183.             e.stopPropagation();
  184.         });
  185.         const submenuClick = (e) => {
  186.             const target = e.target;
  187.             if (!target.matches('.scripts-submenu>a'))
  188.                 return false;
  189.             const link = target.parentElement;
  190.             if (!link)
  191.                 return false;
  192.             if (!link.parentElement)
  193.                 return false;
  194.             for (const submenu of link.parentElement.querySelectorAll('.scripts-submenu.open')) {
  195.                 if (submenu !== link)
  196.                     submenu.classList.remove('open');
  197.             }
  198.             if (ksof.pageInfo.on === null) {
  199.                 const menu = document.querySelector('#sitemap__account,[id="#sitemap__account"]');
  200.                 const submenu = link.querySelector('.dropdown-menu');
  201.                 if (menu && submenu) {
  202.                     submenu.style.fontSize = '12px';
  203.                     submenu.style.maxHeight = '';
  204.                     let top = Math.max(0, link.offsetTop);
  205.                     link.classList.toggle('open');
  206.                     if (link.classList.contains('open')) {
  207.                         submenu.style.top = `${top}px`;
  208.                         if (menu.offsetHeight - top < submenu.offsetHeight) {
  209.                             top = Math.max(0, menu.offsetHeight - submenu.offsetHeight);
  210.                             submenu.style.top = `${top}px`;
  211.                             submenu.style.maxHeight = String(menu.offsetHeight - top);
  212.                         }
  213.                     }
  214.                 }
  215.             }
  216.             else {
  217.                 link.classList.toggle('open');
  218.             }
  219.             // If we opened the menu, listen for off-menu clicks.
  220.             if (link.classList.contains('open')) {
  221.                 document.body.addEventListener('click', bodyClick);
  222.             }
  223.             else {
  224.                 document.body.removeEventListener('click', bodyClick);
  225.             }
  226.             e.stopPropagation();
  227.         };
  228.         // Click to open/close sub-menu.
  229.         this.menu.addEventListener('click', submenuClick);
  230.         return menu;
  231.     };
  232.     ksof.Menu = {
  233.         insertScriptLink,
  234.         ui: new MenuUi(),
  235.     };
  236.     const ui = ksof.Menu.ui;
  237.     ui.menu.setAttribute('display', 'none');
  238.     const escapeAttr = (attr) => { return attr.replace(/"/g, '\''); };
  239.     const escapeText = (text) => {
  240.         return text.replace(/[<&>]/g, (ch) => {
  241.             switch (ch) {
  242.                 case '<':
  243.                     return '&lt';
  244.                 case '>':
  245.                     return '&gt';
  246.                 case '&':
  247.                     return '&amp';
  248.                 default:
  249.                     return ch;
  250.             }
  251.         });
  252.     };
  253.     const findSearchIcon = () => {
  254.         const textDiv = Array.from(document.querySelectorAll('#nav_container .real ul li a div.icon div'))
  255.             .find(el => el.textContent === '🔍');
  256.         if (!textDiv) {
  257.             return undefined;
  258.         }
  259.         return textDiv.parentElement?.parentElement;
  260.     };
  261.     //------------------------------
  262.     // Handler that closes menus when clicking outside of menu.
  263.     //------------------------------
  264.     const bodyClick = () => {
  265.         ui.menu.classList.remove('open');
  266.         for (const submenu of document.querySelectorAll('.scripts-submenu.open')) {
  267.             submenu.classList.remove('open');
  268.         }
  269.         document.body.removeEventListener('click', bodyClick);
  270.     };
  271.     //------------------------------
  272.     // Sort menu items
  273.     //------------------------------
  274.     const sortName = (a, b) => {
  275.         const a1 = a.querySelector('a');
  276.         if (!a1)
  277.             return -1;
  278.         const b1 = b.querySelector('a');
  279.         if (!b1)
  280.             return -1;
  281.         return a1.innerText.localeCompare(b1.innerText);
  282.     };
  283.     //------------------------------
  284.     // Inserts script link into Kamesame menu.
  285.     //------------------------------
  286.     // eslint-disable-next-line func-style
  287.     function insertScriptLink(config) {
  288.         // Abort if the script already exists
  289.         const linkId = `${config.name}_script_link`;
  290.         const linkText = escapeText(config.title);
  291.         if (document.querySelector(`#${linkId}`))
  292.             return;
  293.         if (ui.configs.indexOf(config) >= 0)
  294.             return;
  295.         ui.configs.push(config);
  296.         if (ui.menu.hasAttribute('display')) {
  297.             ui.menu.removeAttribute('display');
  298.         }
  299.         let classes;
  300.         const scriptsHeader = ui.header;
  301.         if (!scriptsHeader)
  302.             return;
  303.         const link = document.createElement('li');
  304.         link.id = linkId;
  305.         link.setAttribute('name', config.name);
  306.         link.innerHTML = `<a href="#">${linkText}</a>`;
  307.         if (config.submenu) {
  308.             const submenu = ui.installScriptsSubmenu(config.submenu);
  309.             if (!submenu) {
  310.                 return;
  311.             }
  312.             // Append the script, and sort the menu.
  313.             const menu = submenu.querySelector('.dropdown-menu');
  314.             if (!menu) {
  315.                 return;
  316.             }
  317.             classes = ['sitemap__page'];
  318.             if (config.class)
  319.                 classes.push(config.classHTML || '');
  320.             link.setAttribute('class', classes.join(' '));
  321.             link.innerHTML = `<a href="#">${linkText}</a>`;
  322.             menu.append(link);
  323.         }
  324.         else {
  325.             classes = ['sitemap__page', 'script-link'];
  326.             if (config.class)
  327.                 classes.push(config.classHTML || '');
  328.             link.setAttribute('class', classes.join(' '));
  329.             if (ksof.pageInfo.on == 'review') {
  330.                 scriptsHeader.after(link);
  331.             }
  332.             else {
  333.                 scriptsHeader.append(link);
  334.             }
  335.         }
  336.         const menuContents = scriptsHeader.parentElement?.querySelectorAll(':scope > .scripts-submenu, :scope > .script-link');
  337.         if (menuContents) {
  338.             for (const node of Array.from(menuContents).sort(sortName)) {
  339.                 node.parentNode?.append(node);
  340.             }
  341.         }
  342.         // Add a callback for when the link is clicked.
  343.         document.querySelector(`#${linkId}`)?.addEventListener('click', function (e) {
  344.             document.body.removeEventListener('click', bodyClick);
  345.             document.querySelector('#scripts-menu')?.classList.remove('open');
  346.             for (const submenu of document.querySelectorAll('.scripts-submenu')) {
  347.                 submenu.classList.remove('open');
  348.             }
  349.             const temp = document.querySelector('#sitemap__account,[id="#sitemap__account"]');
  350.             if (temp) {
  351.                 const temp2 = temp.parentElement?.querySelector('[data-expandable-navigation-target],[data-navigation-section-toggle]');
  352.                 temp2.click();
  353.                 const navToggle = document.querySelector('.navigation__toggle');
  354.                 if (navToggle.offsetWidth > 0 || navToggle.offsetWidth > 0)
  355.                     navToggle.click();
  356.             }
  357.             config.onClick(e);
  358.             return false;
  359.         });
  360.     }
  361.     // Delay guarantees include() callbacks are called before ready() callbacks.
  362.     setTimeout(() => { ksof.setState('ksof.Menu', 'ready'); }, 0);
  363. })(window);