☰

KameSame Open Framework - Menu module

Menu module for KameSame Open Framework

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

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址