Wanikani Open Framework - Menu module

Menu module for Wanikani Open Framework

当前为 2023-05-30 提交的版本,查看 最新版本

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

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