☰

KameSame Open Framework - Menu module

Menu module for KameSame Open Framework

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

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