☰

KameSame Open Framework - Menu module

Menu module for KameSame Open Framework

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

此脚本不应直接安装，它是供其他脚本使用的外部库。如果你需要使用该库，请在脚本元属性加入：// @require https://update.cn-greasyfork.org/scripts/451522/1102242/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
  7. // @copyright   2022+, Robin Findley, Timberpile
  8. // @license     MIT; http://opensource.org/licenses/MIT
  9. // ==/UserScript==
  10. // These lines are necessary to make sure that TSC does not put any exports in the
  11. // compiled js, which causes the script to crash
  12. // eslint-disable-next-line no-var, @typescript-eslint/no-unused-vars
  13. var module = {};
  14. console.log(1);
  15. (async (global) => {
  16.     console.log(2);
  17.     const ksof = global.ksof;
  18.     console.log(3);
  19.     console.log(ksof);
  20.     class MenuUi {
  21.         constructor() {
  22.             //
  23.         }
  24.     }
  25.     console.log(4);
  26.     ksof.Menu = {
  27.         insert_script_link: insert_script_link,
  28.         ui: new MenuUi()
  29.     };
  30.     console.log(5);
  31.     const ui = ksof.Menu.ui;
  32.     function escape_attr(attr) { return attr.replace(/"/g, '\''); }
  33.     function escape_text(text) {
  34.         return text.replace(/[<&>]/g, (ch) => {
  35.             switch (ch) {
  36.                 case '<':
  37.                     return '&lt';
  38.                 case '>':
  39.                     return '&gt';
  40.                 case '&':
  41.                     return '&amp';
  42.                 default:
  43.                     return ch;
  44.             }
  45.         });
  46.     }
  47.     const correctSiteMatcher = /^\/app\/(reviews)\/study/;
  48.     //------------------------------
  49.     // Handler that closes menus when clicking outside of menu.
  50.     //------------------------------
  51.     function body_click() {
  52.         ui.top_menu?.classList.remove('open');
  53.         for (const submenu of document.querySelectorAll('.scripts-submenu.open')) {
  54.             submenu.classList.remove('open');
  55.         }
  56.         document.body.removeEventListener('click', body_click);
  57.     }
  58.     //------------------------------
  59.     // Install 'Scripts' header in menu, if not present.
  60.     //------------------------------
  61.     function install_scripts_header() {
  62.         // Abort if already installed.
  63.         if (document.querySelector('.scripts-header'))
  64.             return false;
  65.         console.log('LocationPathname: ' + location.pathname);
  66.         // Install html.
  67.         if (location.pathname.match(correctSiteMatcher) !== null) {
  68.             const exit_button = document.querySelector('.header a.exit');
  69.             if (!exit_button)
  70.                 return false;
  71.             // Install css and html.
  72.             if (!document.querySelector('style[name="scripts_submenu"]')) {
  73.                 document.head.insertAdjacentHTML('beforeend', `<style name="scripts_submenu">
  74.                     #scripts-menu {text-shadow:none;}
  75.                     #scripts-menu.scripts-menu-icon {display:inline-block;}
  76.                     #scripts-menu .scripts-icon {display:inline-block; cursor: pointer; font-size: 1.2em; margin-right: auto; opacity: .65; position: relative; top: 3px;}
  77.                     #scripts-menu:not(.open) > .dropdown-menu {display:none;}
  78.                     #scripts-menu .scripts-submenu:not(.open) > .dropdown-menu {display:none;}
  79.                     #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;}
  80.                     #scripts-menu ul.dropdown-menu > li {text-align:left; color:#333; white-space:nowrap; line-height:20px; padding:3px 0; display:list-item;}
  81.                     #scripts-menu ul.dropdown-menu > li.scripts-header {text-transform:uppercase; font-size:11px; font-weight:bold; padding:3px 20px; display:list-item;}
  82.                     #scripts-menu ul.dropdown-menu > li:hover:not(.scripts-header) {background-color:rgba(0,0,0,0.15)}
  83.                     #scripts-menu ul.dropdown-menu a {padding:3px 20px; color:#333; opacity:1;}
  84.                     #scripts-menu .scripts-submenu {position:relative; font-size: 1rem;}
  85.                     #scripts-menu .scripts-submenu > a:after {content:">"; font-family:"FontAwesome"; position:absolute; top:0; right:0; padding:3px 4px 3px 0;}
  86.                     #scripts-menu .scripts-submenu .dropdown-menu {left:100%; top:-6px;}
  87.                     </style>`);
  88.             }
  89.             exit_button.insertAdjacentHTML('afterend', `<div id="scripts-menu" class="scripts-menu-icon">
  90.                     <a class="scripts-icon" href="#"><i class="fa fa-gear" title="Script Menu">⚙️</i></a>
  91.                     <ul class="dropdown-menu">
  92.                         <li class="scripts-header">Script Menu</li>
  93.                     </ul>
  94.                 </div>`);
  95.             ui.top_menu = document.querySelector('#scripts-menu');
  96.             if (!ui.top_menu)
  97.                 return false;
  98.             const scripts_icon = document.querySelector('#scripts-menu > a.scripts-icon');
  99.             if (!scripts_icon)
  100.                 return false;
  101.             scripts_icon.addEventListener('click', (e) => {
  102.                 ui.top_menu?.classList.toggle('open');
  103.                 if (ui.top_menu?.classList.contains('open'))
  104.                     document.body.addEventListener('click', body_click);
  105.                 e.stopPropagation();
  106.             });
  107.         }
  108.         else {
  109.             // Install css and html.
  110.             ui.top_menu = document.querySelector('button[class$="account"]');
  111.             if (!ui.top_menu)
  112.                 return;
  113.             if (!document.querySelector('style[name="scripts_submenu"]')) {
  114.                 document.head.insertAdjacentHTML('beforeend', `<style name="scripts_submenu">
  115.                     .sitemap__section.scripts-noposition {position:initial;}
  116.                     .scripts-submenu>.dropdown-menu {display:none;}
  117.                     .scripts-submenu.open>.dropdown-menu {display:block;position:absolute;top:0px;margin-top:0;left:-8px;transform:scale(1) translateX(-100%);min-width:200px}
  118.                     .scripts-submenu .dropdown-menu:before {left:100%;top:12px;z-index:-1;}
  119.                     .scripts-submenu .dropdown-menu .sitemap__pages {padding:5px 15px 0px 15px;}
  120.                     .scripts-submenu .dropdown-menu .sitemap__page:last-child {margin-bottom:0;}
  121.                     .scripts-submenu>a:before {content:"\uf0d9 "; font-family:"FontAwesome";}
  122.                     @media (max-width: 979px) {
  123.                         .scripts-submenu>a:before {content:"";}
  124.                         .scripts-submenu>.dropdown-menu {display:contents;position:initial;top:initial;margin-top:initial;left:initial;transform:none;min-width:initial}
  125.                     }
  126.                     </style>`);
  127.             }
  128.             document.querySelector('.user-summary')?.insertAdjacentHTML('afterend', `<li id="scripts-menu" class="sitemap__section sitemap__section--subsection scripts-noposition">
  129.                     <h3 class="sitemap__section-header--subsection">Scripts</h3>
  130.                     <ul class="sitemap__pages scripts-header"></ul>
  131.                 </li>`);
  132.         }
  133.         // Click to open/close sub-menu.
  134.         ui.scripts_menu = document.querySelector('#scripts-menu');
  135.         ui.scripts_menu.addEventListener('click', submenu_click);
  136.         function submenu_click(e) {
  137.             const target = e.target;
  138.             if (!target.matches('.scripts-submenu>a'))
  139.                 return false;
  140.             const link = target.parentElement;
  141.             if (!link)
  142.                 return false;
  143.             if (!link.parentElement)
  144.                 return false;
  145.             for (const submenu of link.parentElement.querySelectorAll('.scripts-submenu.open')) {
  146.                 if (submenu !== link)
  147.                     submenu.classList.remove('open');
  148.             }
  149.             if (location.pathname.match(correctSiteMatcher) === null) {
  150.                 const menu = document.querySelector('#sitemap__account,[id="#sitemap__account"]');
  151.                 const submenu = link.querySelector('.dropdown-menu');
  152.                 if (menu && submenu) {
  153.                     submenu.style.fontSize = '12px';
  154.                     submenu.style.maxHeight = '';
  155.                     let top = Math.max(0, link.offsetTop);
  156.                     link.classList.toggle('open');
  157.                     if (link.classList.contains('open')) {
  158.                         submenu.style.top = top + 'px';
  159.                         if (menu.offsetHeight - top < submenu.offsetHeight) {
  160.                             top = Math.max(0, menu.offsetHeight - submenu.offsetHeight);
  161.                             submenu.style.top = top + 'px';
  162.                             submenu.style.maxHeight = String(menu.offsetHeight - top);
  163.                         }
  164.                     }
  165.                 }
  166.             }
  167.             else {
  168.                 link.classList.toggle('open');
  169.             }
  170.             // If we opened the menu, listen for off-menu clicks.
  171.             if (link.classList.contains('open')) {
  172.                 document.body.addEventListener('click', body_click);
  173.             }
  174.             else {
  175.                 document.body.removeEventListener('click', body_click);
  176.             }
  177.             e.stopPropagation();
  178.         }
  179.     }
  180.     //------------------------------
  181.     // Sort menu items
  182.     //------------------------------
  183.     function sort_name(a, b) {
  184.         const a1 = a.querySelector('a');
  185.         if (!a1)
  186.             return -1;
  187.         const b1 = b.querySelector('a');
  188.         if (!b1)
  189.             return -1;
  190.         return a1.innerText.localeCompare(b1.innerText);
  191.     }
  192.     //------------------------------
  193.     // Install Submenu, if not present.
  194.     //------------------------------
  195.     function install_scripts_submenu(name) {
  196.         // Abort if already installed.
  197.         const safe_name = escape_attr(name);
  198.         const safe_text = escape_text(name);
  199.         const submenu = document.querySelector('.scripts-submenu[name="' + safe_name + '"]');
  200.         if (submenu)
  201.             return submenu;
  202.         const scripts_header = document.querySelector('.scripts-header');
  203.         if (!scripts_header)
  204.             return null;
  205.         if (location.pathname.match(correctSiteMatcher) !== null) {
  206.             scripts_header.insertAdjacentHTML('afterend', `<li class="scripts-submenu" name="${safe_name}">
  207.                     <a href="#">${safe_text}</a>
  208.                     <ul class="dropdown-menu"></ul>
  209.                 </li>`);
  210.         }
  211.         else {
  212.             scripts_header.insertAdjacentHTML('beforeend', `<li class="sitemap__page scripts-submenu" name="${safe_name}">
  213.                   <a href="#">${safe_text}</a>
  214.                   <div class="sitemap__expandable-chunk dropdown-menu" data-expanded="true" aria-expanded="true">
  215.                     <ul class="sitemap__pages">
  216.                     </ul>
  217.                   </div>
  218.                 <li>`);
  219.         }
  220.         const menu_contents = scripts_header.parentElement?.querySelectorAll(':scope > .scripts-submenu, :scope > .script-link');
  221.         if (!menu_contents)
  222.             return null;
  223.         for (const node of Array.from(menu_contents).sort(sort_name))
  224.             node.parentNode?.append(node);
  225.         return document.querySelector('.scripts-submenu[name="' + safe_name + '"]') || null;
  226.     }
  227.     //------------------------------
  228.     // Inserts script link into Wanikani menu.
  229.     //------------------------------
  230.     function insert_script_link(config) {
  231.         // Abort if the script already exists
  232.         const link_id = config.name + '_script_link';
  233.         const link_text = escape_text(config.title);
  234.         if (document.querySelector('#' + link_id))
  235.             return;
  236.         install_scripts_header();
  237.         let menu, classes;
  238.         const scripts_header = document.querySelector('.scripts-header');
  239.         if (!scripts_header)
  240.             return;
  241.         const link = document.createElement('li');
  242.         link.id = link_id;
  243.         link.setAttribute('name', config.name);
  244.         link.innerHTML = '<a href="#">' + link_text + '</a>';
  245.         if (config.submenu) {
  246.             const submenu = install_scripts_submenu(config.submenu);
  247.             // Append the script, and sort the menu.
  248.             if (location.pathname.match(correctSiteMatcher) !== null) {
  249.                 menu = submenu?.querySelector('.dropdown-menu');
  250.             }
  251.             else {
  252.                 menu = submenu?.querySelector('.dropdown-menu>ul');
  253.             }
  254.             classes = ['sitemap__page'];
  255.             if (config.class)
  256.                 classes.push(config.class_html || '');
  257.             link.setAttribute('class', classes.join(' '));
  258.             link.innerHTML = '<a href="#">' + link_text + '</a>';
  259.             menu?.append(link);
  260.         }
  261.         else {
  262.             classes = ['sitemap__page', 'script-link'];
  263.             if (config.class)
  264.                 classes.push(config.class_html || '');
  265.             link.setAttribute('class', classes.join(' '));
  266.             if (location.pathname.match(correctSiteMatcher) !== null) {
  267.                 scripts_header.after(link);
  268.             }
  269.             else {
  270.                 scripts_header.append(link);
  271.             }
  272.         }
  273.         const menu_contents = scripts_header.parentElement?.querySelectorAll(':scope > .scripts-submenu, :scope > .script-link');
  274.         if (menu_contents)
  275.             for (const node of Array.from(menu_contents).sort(sort_name))
  276.                 node.parentNode?.append(node);
  277.         // Add a callback for when the link is clicked.
  278.         document.querySelector('#' + link_id)?.addEventListener('click', function (e) {
  279.             document.body.removeEventListener('click', body_click);
  280.             document.querySelector('#scripts-menu')?.classList.remove('open');
  281.             for (const submenu of document.querySelectorAll('.scripts-submenu'))
  282.                 submenu.classList.remove('open');
  283.             const temp = document.querySelector('#sitemap__account,[id="#sitemap__account"]');
  284.             if (temp) {
  285.                 const temp2 = temp.parentElement?.querySelector('[data-expandable-navigation-target],[data-navigation-section-toggle]');
  286.                 temp2.click();
  287.                 const nav_toggle = document.querySelector('.navigation__toggle');
  288.                 if (nav_toggle.offsetWidth > 0 || nav_toggle.offsetWidth > 0)
  289.                     nav_toggle.click();
  290.             }
  291.             config.on_click(e);
  292.             return false;
  293.         });
  294.     }
  295.     await ksof.ready('document');
  296.     // Delay guarantees include() callbacks are called before ready() callbacks.
  297.     setTimeout(() => { ksof.set_state('ksof.Menu', 'ready'); }, 0);
  298. })(window);
  299. module.exports = null;