☰

KameSame Open Framework - Menu module

Menu module for KameSame Open Framework

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

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

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