☰

Wanikani Open Framework - Menu module

Menu module for Wanikani Open Framework

当前为 2024-09-23 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/38578/1452490/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.23
  6. // @copyright   2018-2024, 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. 	function insert_gear_icon() {
  38. 		if (!document.getElementById('wk-icon__gear')) {
  39. 			let svg = document.querySelector('svg symbol[id^="wk-icon"]').closest('svg');
  40. 			svg.insertAdjacentHTML('beforeend','<symbol id="wk-icon__gear" viewport="0 0 500 500"><path d="M405,310L492,310L492,195L405,190L379,146L423,71L319,8L275,85L225,85L181,8L77,71L121,146L95,190L8,190L8,310L95,310L121,354L77,429L181,492L225,415L275,415L319,492L423,429L379,354L405,310L325,281L281,325L219,325L176,281L176,219L219,176L281,176L325,219L325,281Z"></path></symbol>');
  41. 		}
  42. 	}
  43.  
  44. 	//------------------------------
  45. 	// Install 'Scripts' header in menu, if not present.
  46. 	//------------------------------
  47. 	function install_scripts_header() {
  48. 		// Abort if already installed.
  49. 		if (document.querySelector('.scripts-header')) return false;
  50. 		let summary_button, scripts_icon;
  51.  
  52. 		// Clear CSS is navigating to a new page.
  53. 		if (fresh_load) {
  54. 			fresh_load = false;
  55. 			let style = document.querySelector('style[name="scripts_submenu"]');
  56. 			if (style) style.remove();
  57. 		}
  58.  
  59. 		// Install html.
  60. 		if (location.pathname.match(/^\/subjects\/(review|lesson|[^\/]+\/lesson|extra_study)/) !== null ||
  61. 			 location.pathname.match(/^\/subject-lessons\//) !== null ||
  62. 			 location.pathname.match(/^\/recent-mistakes\/[^\/]+\/quiz/) !== null) {
  63. 			summary_button = document.querySelector('.summary-button');
  64.  
  65. 			// Install css and html.
  66. 			if (!document.querySelector('style[name="scripts_submenu"]')) {
  67. 				document.head.insertAdjacentHTML('beforeend',
  68. 					`<style name="scripts_submenu">
  69. 					.character-header {z-index:1;}
  70. 					.character-header__menu-navigation a {text-decoration:none;}
  71. 					.character-header__menu-navigation-link {margin-right: 8px;}
  72. 					#scripts-menu {text-shadow:none;}
  73. 					#scripts-menu:not(.open) > .dropdown-menu {display:none;}
  74. 					#scripts-menu .scripts-submenu:not(.open) > .dropdown-menu {display:none;}
  75. 					#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;}
  76.  
  77. 					#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;}
  78. 					#scripts-menu ul.dropdown-menu > li.scripts-header {text-transform:uppercase; font-size:11px; font-weight:bold; padding:3px 20px; display:list-item;}
  79. 					#scripts-menu ul.dropdown-menu > li:hover:not(.scripts-header) {background-color:rgba(0,0,0,0.15)}
  80.  
  81. 					#scripts-menu ul.dropdown-menu a {padding:3px 20px; color:#333; opacity:1; margin:0; border:0; display:inline;}
  82.  
  83. 					#scripts-menu .scripts-submenu {position:relative;}
  84. 					#scripts-menu .scripts-submenu > a:after {content:">"; position:absolute; top:0; right:0; padding:3px 4px 3px 0;}
  85. 					#scripts-menu .scripts-submenu .dropdown-menu {left:100%; top:-7px;}
  86. 					</style>`
  87. 				);
  88. 			}
  89.  
  90. 			insert_gear_icon();
  91. 			summary_button.parentElement.insertAdjacentHTML('afterend',
  92. 				`<div id="scripts-menu" class="scripts-menu-icon character-header__menu-navigation-link">
  93. 					<a class="scripts-icon summary-button" href="#">
  94. 				     <svg class="wk-icon wk-icon--gear" viewBox="0 0 500 500" aria-hidden="true">
  95. 				       <use href="#wk-icon__gear"></use>
  96. 				     </svg>
  97. 				   </a>
  98. 					<ul class="dropdown-menu">
  99. 						<li class="scripts-header">Script Menu</li>
  100. 					</ul>
  101. 				</div>`
  102. 			);
  103.  
  104. 			top_menu = document.querySelector('#scripts-menu');
  105. 			scripts_icon = document.querySelector('#scripts-menu > a.scripts-icon');
  106.  
  107. 			function scripts_icon_click(e) {
  108. 				e.preventDefault();
  109. 				e.stopPropagation();
  110. 				top_menu.classList.toggle('open');
  111. 				if (top_menu.classList.contains('open')) document.body.addEventListener('click', body_click);
  112. 			}
  113.  
  114. 			scripts_icon.addEventListener('click', scripts_icon_click);
  115.  
  116. 		} else {
  117. 			// Install css and html.
  118. 			top_menu = document.querySelector('button[class$="account"]');
  119. 			if (!top_menu) return;
  120. 			if (!document.querySelector('style[name="scripts_submenu"]')) {
  121. 				document.head.insertAdjacentHTML('beforeEnd',
  122. 					`<style name="scripts_submenu">
  123. 					.sitemap__section.scripts-noposition {position:initial;}
  124. 					.scripts-submenu>.dropdown-menu {display:none;}
  125. 					.scripts-submenu.open>.dropdown-menu {display:block;position:absolute;top:0px;margin-top:0;left:-8px;transform:scale(1) translateX(-100%);min-width:200px}
  126. 					.scripts-submenu .dropdown-menu:before {left:100%;top:12px;z-index:-1;}
  127. 					.scripts-submenu .dropdown-menu .sitemap__pages {padding:5px 15px 0px 15px;}
  128. 					.scripts-submenu .dropdown-menu .sitemap__page:last-child {margin-bottom:0;}
  129. 					.scripts-submenu>a:before {content:"< ";}
  130. 					@media (max-width: 979px) {
  131. 					  .scripts-submenu>a:before {content:"";}
  132. 					  .scripts-submenu>.dropdown-menu {display:contents;position:initial;top:initial;margin-top:initial;left:initial;transform:none;min-width:initial}
  133. 					}
  134. 					</style>`
  135. 				);
  136. 			}
  137. 			document.querySelector('.user-summary').insertAdjacentHTML('afterend',
  138. 				`<li id="scripts-menu" class="sitemap__section sitemap__section--subsection scripts-noposition">
  139. 				  <h3 class="sitemap__section-header--subsection">Scripts</h3>
  140. 				  <ul class="sitemap__pages scripts-header"></ul>
  141. 				</li>`
  142. 			);
  143. 		}
  144.  
  145. 		// Click to open/close sub-menu.
  146. 		scripts_menu = document.querySelector('#scripts-menu');
  147. 		scripts_menu.addEventListener('click', submenu_click);
  148.  
  149. 		function submenu_click(e){
  150. 			e.preventDefault();
  151. 			e.stopPropagation();
  152. 			if (!e.target.matches('.scripts-submenu>a')) return false;
  153. 			let link = e.target.parentElement;
  154. 			for (let submenu of link.parentElement.querySelectorAll('.scripts-submenu.open')) {
  155. 				if (submenu !== link) submenu.classList.remove('open');
  156. 			};
  157. 			if (location.pathname.match(/^\/subjects\/(review|lesson|[^\/]+\/lesson|extra_study)/) !== null ||
  158. 				 location.pathname.match(/^\/subject-lessons\//) !== null ||
  159. 				 location.pathname.match(/^\/recent-mistakes\/[^\/]+\/quiz/) !== null) {
  160. 				link.classList.toggle('open');
  161. 			} else {
  162. 				let menu = document.querySelector('#sitemap__account,[id="#sitemap__account"]');
  163. 				let submenu = link.querySelector('.dropdown-menu');
  164. 				submenu.style.fontSize = '12px';
  165. 				submenu.style.maxHeight = '';
  166. 				let submenu_ul = submenu.querySelector(':scope > ul');
  167. 				let top = Math.max(0, link.offsetTop);
  168. 				link.classList.toggle('open');
  169. 				if (link.classList.contains('open')) {
  170. 					submenu.style.top = top+'px';
  171. 					if (menu.offsetHeight - top < submenu.offsetHeight)
  172. 					{
  173. 						top = Math.max(0, menu.offsetHeight - submenu.offsetHeight);
  174. 						submenu.style.top = top+'px';
  175. 						submenu.style.maxHeight = menu.offsetHeight - top;
  176. 					}
  177. 				}
  178. 			}
  179. 			// If we opened the menu, listen for off-menu clicks.
  180. 			if (link.classList.contains('open')) {
  181. 				document.body.addEventListener('click', body_click);
  182. 			} else {
  183. 				document.body.removeEventListener('click', body_click);
  184. 			}
  185. 		}
  186. 	}
  187.  
  188. 	//------------------------------
  189. 	// Sort menu items
  190. 	//------------------------------
  191. 	function sort_name(a,b) {
  192. 		return a.querySelector('a').innerText.localeCompare(b.querySelector('a').innerText);
  193. 	}
  194.  
  195. 	//------------------------------
  196. 	// Install Submenu, if not present.
  197. 	//------------------------------
  198. 	function install_scripts_submenu(name) {
  199. 		// Abort if already installed.
  200. 		let safe_name = escape_attr(name);
  201. 		let safe_text = escape_text(name);
  202. 		let submenu = document.querySelector('.scripts-submenu[name="'+safe_name+'"]');
  203. 		if (submenu) return submenu;
  204.  
  205. 		let scripts_header = document.querySelector('.scripts-header');
  206. 		if (!scripts_header) return;
  207.  
  208. 		if (location.pathname.match(/^\/subjects\/(review|lesson|[^\/]+\/lesson|extra_study)/) !== null ||
  209. 			 location.pathname.match(/^\/subject-lessons\//) !== null ||
  210. 			 location.pathname.match(/^\/recent-mistakes\/[^\/]+\/quiz/) !== null) {
  211. 			scripts_header.insertAdjacentHTML('afterend',
  212. 				`<li class="scripts-submenu" name="${safe_name}">
  213. 					<a href="#">${safe_text}</a>
  214. 					<ul class="dropdown-menu"></ul>
  215. 				</li>`
  216. 			);
  217. 		} else {
  218. 			scripts_header.insertAdjacentHTML('beforeend',
  219. 				`<li class="sitemap__page scripts-submenu" name="${safe_name}">
  220. 				  <a href="#">${safe_text}</a>
  221. 				  <div class="sitemap__expandable-chunk dropdown-menu" data-expanded="true" aria-expanded="true">
  222. 					<ul class="sitemap__pages">
  223. 					</ul>
  224. 				  </div>
  225. 				<li>`
  226. 			);
  227. 		}
  228. 		let menu_contents = scripts_header.parentElement.querySelectorAll(':scope > .scripts-submenu, :scope > .script-link');
  229. 		for (let node of Array.from(menu_contents).sort(sort_name)) node.parentNode.append(node);
  230. 		return document.querySelector('.scripts-submenu[name="'+safe_name+'"]');
  231. 	}
  232.  
  233. 	function is_turbo_page() {return (document.querySelector('script[type="importmap"]')?.innerHTML.match('@hotwired/turbo') != null);}
  234.  
  235. 	//------------------------------
  236. 	// Remove script menu styling after navigation
  237. 	//------------------------------
  238. 	let fresh_load = true;
  239. 	function setup_turbo_monitoring() {
  240. 		if (!is_turbo_page()) return;
  241. 		try {
  242. 			document.documentElement.addEventListener('turbo:load', () => fresh_load = true);
  243. 		} catch(e){}
  244. 	}
  245.  
  246. 	//------------------------------
  247. 	// Inserts script link into Wanikani menu.
  248. 	//------------------------------
  249. 	let first_load = true;
  250. 	function insert_script_link(config) {
  251. 		if (first_load) {
  252. 			first_load = false;
  253. 			setup_turbo_monitoring();
  254. 		}
  255. 		// Abort if the script already exists
  256. 		let link_id = config.name+'_script_link';
  257. 		let link_text = escape_text(config.title);
  258. 		if (document.querySelector('#'+link_id)) return;
  259. 		install_scripts_header();
  260. 		let menu, classes, link_html;
  261. 		let scripts_header = document.querySelector('.scripts-header');
  262. 		if (!scripts_header) return;
  263. 		let 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. 			let submenu = install_scripts_submenu(config.submenu);
  269.  
  270. 			// Append the script, and sort the menu.
  271. 			if (location.pathname.match(/^\/subjects\/(review|lesson|[^\/]+\/lesson|extra_study)/) !== null ||
  272. 				 location.pathname.match(/^\/subject-lessons\//) !== null ||
  273. 				 location.pathname.match(/^\/recent-mistakes\/[^\/]+\/quiz/) !== null) {
  274. 				menu = submenu.querySelector('.dropdown-menu');
  275. 			} else {
  276. 				menu = submenu.querySelector('.dropdown-menu>ul');
  277. 			}
  278. 			classes = ['sitemap__page'];
  279. 			if (config.class) classes.push(config.class_html);
  280. 			link.setAttribute('class', classes.join(' '));
  281. 			link.innerHTML = '<a href="#">'+link_text+'</a>';
  282. 			menu.append(link);
  283. 		} else {
  284. 			classes = ['sitemap__page', 'script-link'];
  285. 			if (config.class) classes.push(config.class_html);
  286. 			link.setAttribute('class', classes.join(' '));
  287. 			if (location.pathname.match(/^\/subjects\/(review|lesson|[^\/]+\/lesson|extra_study)/) !== null ||
  288. 				 location.pathname.match(/^\/subject-lessons\//) !== null ||
  289. 				 location.pathname.match(/^\/recent-mistakes\/[^\/]+\/quiz/) !== null) {
  290. 				scripts_header.after(link);
  291. 			} else {
  292. 				scripts_header.append(link);
  293. 			}
  294. 		}
  295. 		let menu_contents = scripts_header.parentElement.querySelectorAll(':scope > .scripts-submenu, :scope > .script-link');
  296. 		for (let node of Array.from(menu_contents).sort(sort_name)) node.parentNode.append(node);
  297.  
  298. 		// Add a callback for when the link is clicked.
  299. 		document.querySelector('#'+link_id).addEventListener('click', function(e){
  300. 			e.preventDefault();
  301. 			e.stopPropagation();
  302. 			document.body.removeEventListener('click', body_click);
  303. 			document.querySelector('#scripts-menu').classList.remove('open');
  304. 			for (let submenu of document.querySelectorAll('.scripts-submenu')) submenu.classList.remove('open');
  305. 			if (document.querySelector('#sitemap__account,[id="#sitemap__account"]')) {
  306. 				document.querySelector('#sitemap__account,[id="#sitemap__account"]').parentElement.querySelector('[data-expandable-navigation-target],[data-navigation-section-toggle]').click();
  307. 				let nav_toggle = document.querySelector('.navigation__toggle');
  308. 				if (nav_toggle.offsetWidth > 0 || nav_toggle.offsetWidth > 0) nav_toggle.click();
  309. 			}
  310. 			config.on_click(e);
  311. 		});
  312. 	}
  313.  
  314. 	wkof.ready('document').then(set_ready_state);
  315.  
  316. 	function set_ready_state(){
  317. 		// Delay guarantees include() callbacks are called before ready() callbacks.
  318. 		setTimeout(function(){wkof.set_state('wkof.Menu', 'ready');},0);
  319. 	}
  320.  
  321. })(window);