KameSame Open Framework - Menu module

Menu module for KameSame Open Framework

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

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