KameSame Open Framework - Menu module

Menu module for KameSame Open Framework

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

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