☰

Greasy Fork 还支持 简体中文。

KameSame Open Framework - Menu module

Menu module for KameSame Open Framework

目前為 2022-10-30 提交的版本，檢視 最新版本。

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.cn-greasyfork.org/scripts/451522/1111222/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.1.0.1
  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_install_style, _MenuUi_install_menu;
  18.     const ksof = global.ksof;
  19.     await ksof.ready('document');
  20.     class MenuUi {
  21.         constructor() {
  22.             _MenuUi_instances.add(this);
  23.             // if (this.style) {
  24.             //     this.style.remove()
  25.             // }
  26.             this.style = __classPrivateFieldGet(this, _MenuUi_instances, "m", _MenuUi_install_style).call(this);
  27.             // if (this.menu) {
  28.             //     this.menu.remove()
  29.             // }
  30.             try {
  31.                 this.menu = __classPrivateFieldGet(this, _MenuUi_instances, "m", _MenuUi_install_menu).call(this);
  32.             }
  33.             catch (error) {
  34.                 throw new Error(`Can't install ksof menu: ${error}`);
  35.             }
  36.             // this.style = undefined as unknown as HTMLStyleElement
  37.             // this.menu = undefined as unknown as HTMLDivElement
  38.             // // this.submenus = new Map()
  39.             this.configs = [];
  40.             // const setup = () => {
  41.             //     if (this.style) {
  42.             //         this.style.remove()
  43.             //     }
  44.             //     this.style = this.#install_style()
  45.             //     if (this.menu) {
  46.             //         this.menu.remove()
  47.             //     }
  48.             //     try {
  49.             //         this.menu = this.#install_menu()
  50.             //     } catch (error) {
  51.             //         throw new Error(`Can't install ksof menu: ${error}`)
  52.             //     }
  53.             // }
  54.             ksof.on('ksof.page_changed', () => {
  55.                 // setup()
  56.                 for (const config of this.configs) {
  57.                     insert_script_link(config);
  58.                 }
  59.             });
  60.             // setup()
  61.         }
  62.         get header() {
  63.             return this.dropdown_menu?.querySelector(':scope > li.scripts-header');
  64.         }
  65.         get scripts_icon() {
  66.             if (ksof.pageInfo.on == 'review') {
  67.                 return this.menu.querySelector(':scope > a.scripts-icon');
  68.             }
  69.             else {
  70.                 // TODO use fitting selector for top menu bar
  71.                 return this.menu.querySelector(':scope > a.scripts-icon');
  72.             }
  73.         }
  74.         get dropdown_menu() {
  75.             return this.menu.querySelector('ul.dropdown-menu');
  76.         }
  77.         get_submenu(name) {
  78.             const safe_name = escape_attr(name);
  79.             // return this.submenus.get(safe_name)
  80.             return document.querySelector('.scripts-submenu[name="' + safe_name + '"]');
  81.         }
  82.         //------------------------------
  83.         // Install Submenu, if not present.
  84.         //------------------------------
  85.         install_scripts_submenu(name) {
  86.             // Abort if already installed.
  87.             const sub = this.get_submenu(name);
  88.             if (sub) {
  89.                 return sub;
  90.             }
  91.             const safe_name = escape_attr(name);
  92.             const safe_text = escape_text(name);
  93.             this.header.insertAdjacentHTML('afterend', `<li class="scripts-submenu" name="${safe_name}">
  94.                     <a href="#">${safe_text}</a>
  95.                     <ul class="dropdown-menu"></ul>
  96.                 </li>`);
  97.             const submenu = document.querySelector(`.scripts-submenu[name="${safe_name}"]`);
  98.             // const link_element = document.createElement('a')
  99.             // link_element.href = '#'
  100.             // link_element.innerText = safe_text
  101.             // const dropdown_menu = document.createElement('ul')
  102.             // dropdown_menu.className = 'dropdown-menu'
  103.             // const submenu = document.createElement('li')
  104.             // submenu.setAttribute('name', safe_name)
  105.             // submenu.appendChild(link_element)
  106.             // submenu.appendChild(dropdown_menu)
  107.             // this.dropdown_menu.appendChild(submenu)
  108.             if (!submenu) {
  109.                 return undefined;
  110.             }
  111.             const menu_contents = this.dropdown_menu.querySelectorAll(':scope > .scripts-submenu, :scope > .script-link');
  112.             if (!menu_contents)
  113.                 return undefined;
  114.             for (const node of Array.from(menu_contents).sort(sort_name)) {
  115.                 // TODO why append again without removing first?
  116.                 node.parentNode?.append(node);
  117.             }
  118.             return submenu;
  119.         }
  120.     }
  121.     _MenuUi_instances = new WeakSet(), _MenuUi_install_style = function _MenuUi_install_style() {
  122.         const style = document.head.querySelector('style[name="scripts_submenu"]');
  123.         if (style) {
  124.             return style;
  125.         }
  126.         document.head.insertAdjacentHTML('beforeend', `<style name="scripts_submenu">
  127.                     #scripts-menu {text-shadow:none;}
  128.                     #scripts-menu.scripts-menu-icon {display:inline-block;}
  129.                     #scripts-menu .scripts-icon {display:inline-block; cursor: pointer; font-size: 1.2em; margin-right: auto; opacity: .65; position: relative; top: 3px;}
  130.                     #scripts-menu:not(.open) > .dropdown-menu {display:none;}
  131.                     #scripts-menu .scripts-submenu:not(.open) > .dropdown-menu {display:none;}
  132.                     #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;}
  133.                     #scripts-menu ul.dropdown-menu > li {text-align:left; color:#333; white-space:nowrap; line-height:20px; padding:3px 0; display:list-item;}
  134.                     #scripts-menu ul.dropdown-menu > li.scripts-header {text-transform:uppercase; font-size:.8rem; font-weight:bold; padding:3px 12px; display:list-item;}
  135.                     #scripts-menu ul.dropdown-menu > li:hover:not(.scripts-header) {background-color:rgba(0,0,0,0.15)}
  136.                     #scripts-menu ul.dropdown-menu a {padding:3px 20px; color:#333; opacity:1;}
  137.                     #scripts-menu .scripts-submenu {position:relative; font-size: 1rem;}
  138.                     #scripts-menu .scripts-submenu > a:after {content:">"; font-family:"FontAwesome"; position:absolute; top:0; right:0; padding:3px 4px 3px 0;}
  139.                     #scripts-menu .scripts-submenu .dropdown-menu {left:100%; top:-6px;}
  140.                     #app.kamesame nav li #scripts-menu {
  141.                         display: flex;
  142.                         flex-direction: column;
  143.                         height: 100%;
  144.                         width: 100%;
  145.                         color: var(--gray);
  146.                     }
  147.                 </style>`);
  148.         return document.head.querySelector('style[name="scripts_submenu"]');
  149.     }, _MenuUi_install_menu = function _MenuUi_install_menu() {
  150.         // Throws Error
  151.         let menu = document.querySelector('#scripts-menu');
  152.         if (menu) {
  153.             return menu;
  154.         }
  155.         const page = ksof.pageInfo.on;
  156.         // Abort if on unsupported page
  157.         // if (!page) throw new Error('Unsupported page')
  158.         // Install html.
  159.         if (page == 'review') {
  160.             const exit_button = document.querySelector('.header a.exit');
  161.             if (!exit_button)
  162.                 throw new Error('Exit button not found');
  163.             exit_button.insertAdjacentHTML('afterend', `
  164.                 <div id="scripts-menu" class="scripts-menu-icon">
  165.                     <a class="scripts-icon state" href="#"><i title="Script Menu">⚙️</i></a>
  166.                     <ul class="dropdown-menu">
  167.                         <li class="scripts-header">Script Menu</li>
  168.                     </ul>
  169.                 </div>`);
  170.         }
  171.         else {
  172.             const search_icon = find_search_icon();
  173.             if (!search_icon)
  174.                 throw new Error('Search icon not found');
  175.             search_icon.parentElement?.insertAdjacentHTML('afterend', `
  176.                 <li>
  177.                     <div id="scripts-menu" class="scripts-menu-icon">
  178.                         <a class="scripts-icon" href="#">
  179.                             <div class="icon">
  180.                                 <div>⚙</div>
  181.                             </div>
  182.                             <div class="label">
  183.                                 <span>Scripts Menu</span>
  184.                             </div>
  185.                         </a>
  186.                         <ul class="dropdown-menu">
  187.                             <li class="scripts-header label">Scripts Menu</li>
  188.                         </ul>
  189.                     </div>
  190.                 </li>`);
  191.         }
  192.         menu = document.querySelector('#scripts-menu');
  193.         if (!menu) {
  194.             throw new Error('Menu not found after insertion');
  195.         }
  196.         this.menu = menu;
  197.         this.scripts_icon.addEventListener('click', (e) => {
  198.             this.menu.classList.toggle('open');
  199.             if (this.menu.classList.contains('open'))
  200.                 document.body.addEventListener('click', body_click);
  201.             e.stopPropagation();
  202.         });
  203.         // Click to open/close sub-menu.
  204.         this.menu.addEventListener('click', submenu_click);
  205.         function submenu_click(e) {
  206.             const target = e.target;
  207.             if (!target.matches('.scripts-submenu>a'))
  208.                 return false;
  209.             const link = target.parentElement;
  210.             if (!link)
  211.                 return false;
  212.             if (!link.parentElement)
  213.                 return false;
  214.             for (const submenu of link.parentElement.querySelectorAll('.scripts-submenu.open')) {
  215.                 if (submenu !== link)
  216.                     submenu.classList.remove('open');
  217.             }
  218.             if (ksof.pageInfo.on === null) {
  219.                 const menu = document.querySelector('#sitemap__account,[id="#sitemap__account"]');
  220.                 const submenu = link.querySelector('.dropdown-menu');
  221.                 if (menu && submenu) {
  222.                     submenu.style.fontSize = '12px';
  223.                     submenu.style.maxHeight = '';
  224.                     let top = Math.max(0, link.offsetTop);
  225.                     link.classList.toggle('open');
  226.                     if (link.classList.contains('open')) {
  227.                         submenu.style.top = top + 'px';
  228.                         if (menu.offsetHeight - top < submenu.offsetHeight) {
  229.                             top = Math.max(0, menu.offsetHeight - submenu.offsetHeight);
  230.                             submenu.style.top = top + 'px';
  231.                             submenu.style.maxHeight = String(menu.offsetHeight - top);
  232.                         }
  233.                     }
  234.                 }
  235.             }
  236.             else {
  237.                 link.classList.toggle('open');
  238.             }
  239.             // If we opened the menu, listen for off-menu clicks.
  240.             if (link.classList.contains('open')) {
  241.                 document.body.addEventListener('click', body_click);
  242.             }
  243.             else {
  244.                 document.body.removeEventListener('click', body_click);
  245.             }
  246.             e.stopPropagation();
  247.         }
  248.         return menu;
  249.     };
  250.     ksof.Menu = {
  251.         insert_script_link: insert_script_link,
  252.         ui: new MenuUi()
  253.     };
  254.     const ui = ksof.Menu.ui;
  255.     ui.menu.setAttribute('display', 'none');
  256.     function escape_attr(attr) { return attr.replace(/"/g, '\''); }
  257.     function escape_text(text) {
  258.         return text.replace(/[<&>]/g, (ch) => {
  259.             switch (ch) {
  260.                 case '<':
  261.                     return '&lt';
  262.                 case '>':
  263.                     return '&gt';
  264.                 case '&':
  265.                     return '&amp';
  266.                 default:
  267.                     return ch;
  268.             }
  269.         });
  270.     }
  271.     function find_search_icon() {
  272.         const text_div = Array.from(document.querySelectorAll('#nav_container .real ul li a div.icon div'))
  273.             .find(el => el.textContent === '🔍');
  274.         if (!text_div) {
  275.             return undefined;
  276.         }
  277.         return text_div.parentElement?.parentElement;
  278.     }
  279.     //------------------------------
  280.     // Handler that closes menus when clicking outside of menu.
  281.     //------------------------------
  282.     function body_click() {
  283.         ui.menu.classList.remove('open');
  284.         for (const submenu of document.querySelectorAll('.scripts-submenu.open')) {
  285.             submenu.classList.remove('open');
  286.         }
  287.         document.body.removeEventListener('click', body_click);
  288.     }
  289.     //------------------------------
  290.     // Sort menu items
  291.     //------------------------------
  292.     function sort_name(a, b) {
  293.         const a1 = a.querySelector('a');
  294.         if (!a1)
  295.             return -1;
  296.         const b1 = b.querySelector('a');
  297.         if (!b1)
  298.             return -1;
  299.         return a1.innerText.localeCompare(b1.innerText);
  300.     }
  301.     //------------------------------
  302.     // Inserts script link into Kamesame menu.
  303.     //------------------------------
  304.     function insert_script_link(config) {
  305.         // Abort if the script already exists
  306.         const link_id = config.name + '_script_link';
  307.         const link_text = escape_text(config.title);
  308.         if (document.querySelector('#' + link_id))
  309.             return;
  310.         if (ui.menu.hasAttribute('display')) {
  311.             ui.menu.removeAttribute('display');
  312.         }
  313.         let classes;
  314.         const scripts_header = ui.header;
  315.         if (!scripts_header)
  316.             return;
  317.         const link = document.createElement('li');
  318.         link.id = link_id;
  319.         link.setAttribute('name', config.name);
  320.         link.innerHTML = '<a href="#">' + link_text + '</a>';
  321.         if (config.submenu) {
  322.             const submenu = ui.install_scripts_submenu(config.submenu);
  323.             if (!submenu) {
  324.                 return;
  325.             }
  326.             // Append the script, and sort the menu.
  327.             const menu = submenu.querySelector('.dropdown-menu');
  328.             if (!menu) {
  329.                 return;
  330.             }
  331.             classes = ['sitemap__page'];
  332.             if (config.class)
  333.                 classes.push(config.class_html || '');
  334.             link.setAttribute('class', classes.join(' '));
  335.             link.innerHTML = '<a href="#">' + link_text + '</a>';
  336.             menu.append(link);
  337.         }
  338.         else {
  339.             classes = ['sitemap__page', 'script-link'];
  340.             if (config.class)
  341.                 classes.push(config.class_html || '');
  342.             link.setAttribute('class', classes.join(' '));
  343.             if (ksof.pageInfo.on == 'review') {
  344.                 scripts_header.after(link);
  345.             }
  346.             else {
  347.                 scripts_header.append(link);
  348.             }
  349.         }
  350.         const menu_contents = scripts_header.parentElement?.querySelectorAll(':scope > .scripts-submenu, :scope > .script-link');
  351.         if (menu_contents) {
  352.             for (const node of Array.from(menu_contents).sort(sort_name)) {
  353.                 node.parentNode?.append(node);
  354.             }
  355.         }
  356.         // Add a callback for when the link is clicked.
  357.         document.querySelector('#' + link_id)?.addEventListener('click', function (e) {
  358.             document.body.removeEventListener('click', body_click);
  359.             document.querySelector('#scripts-menu')?.classList.remove('open');
  360.             for (const submenu of document.querySelectorAll('.scripts-submenu')) {
  361.                 submenu.classList.remove('open');
  362.             }
  363.             const temp = document.querySelector('#sitemap__account,[id="#sitemap__account"]');
  364.             if (temp) {
  365.                 const temp2 = temp.parentElement?.querySelector('[data-expandable-navigation-target],[data-navigation-section-toggle]');
  366.                 temp2.click();
  367.                 const nav_toggle = document.querySelector('.navigation__toggle');
  368.                 if (nav_toggle.offsetWidth > 0 || nav_toggle.offsetWidth > 0)
  369.                     nav_toggle.click();
  370.             }
  371.             config.on_click(e);
  372.             return false;
  373.         });
  374.     }
  375.     // Delay guarantees include() callbacks are called before ready() callbacks.
  376.     setTimeout(() => { ksof.set_state('ksof.Menu', 'ready'); }, 0);
  377. })(window);