KameSame Open Framework - Menu module

Menu module for KameSame Open Framework

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

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