KameSame Open Framework - Menu module

Menu module for KameSame Open Framework

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

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