Wanikani Open Framework - Menu module

Menu module for Wanikani Open Framework

当前为 2022-03-17 提交的版本,查看 最新版本

此脚本不应直接安装。它是供其他脚本使用的外部库,要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/38578/1029390/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.13
  6. // @copyright 2018+, 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) {var map={'<':'&lt','&':'&amp;','>':'&gt;'}; return map[ch];});}
  23.  
  24. //------------------------------
  25. // Install 'Scripts' header in menu, if not present.
  26. //------------------------------
  27. function install_scripts_header() {
  28. // Abort if already installed.
  29. if ($('.scripts-header').length !== 0) return false;
  30. var top_menu;
  31.  
  32. // Install html.
  33. switch (location.pathname) {
  34. case '/lesson/session':
  35. case '/review/session':
  36. case '/extra_study/session':
  37. var summary_button = $('#summary-button .fa-home').closest('a');
  38.  
  39. // Install css and html.
  40. if ($('style[name="scripts_submenu"]').length === 0) {
  41. $('head').append(
  42. '<style name="scripts_submenu">'+
  43. '#scripts-menu {text-shadow:none;}'+
  44. '#scripts-menu.scripts-menu-icon {display:inline-block;}'+
  45. '#scripts-menu .scripts-icon {display:inline-block;}'+
  46. '#scripts-menu:not(.open) > .dropdown-menu {display:none;}'+
  47. '#scripts-menu .scripts-submenu:not(.open) > .dropdown-menu {display:none;}'+
  48. '#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;}'+
  49. '#scripts-menu ul.dropdown-menu > li {text-align:left; color:#333; white-space:nowrap; line-height:20px; padding:3px 0; display:list-item;}'+
  50. '#scripts-menu ul.dropdown-menu > li.scripts-header {text-transform:uppercase; font-size:11px; font-weight:bold; padding:3px 20px; display:list-item;}'+
  51. '#scripts-menu ul.dropdown-menu > li:hover:not(.scripts-header) {background-color:rgba(0,0,0,0.15)}'+
  52. '#scripts-menu ul.dropdown-menu a {padding:3px 20px; color:#333; opacity:1;}'+
  53. '#scripts-menu .scripts-submenu {position:relative;}'+
  54. '#scripts-menu .scripts-submenu > a:after {content:"\uf0da"; font-family:"FontAwesome"; position:absolute; top:0; right:0; padding:3px 4px 3px 0;}'+
  55. '#scripts-menu .scripts-submenu .dropdown-menu {left:100%; top:-6px;}'+
  56. '</style>'
  57. );
  58. }
  59.  
  60. summary_button.after(
  61. '<div id="scripts-menu" class="scripts-menu-icon">'+
  62. ' <a class="scripts-icon" href="#"><i class="fa fa-gear" title="Script Menu"></i></a>'+
  63. ' <ul class="dropdown-menu">'+
  64. ' <li class="scripts-header">Script Menu</li>'+
  65. ' </ul>'+
  66. '</div>'
  67. );
  68. top_menu = $('#scripts-menu');
  69. $('#scripts-menu > a.scripts-icon').on('click', function(e){
  70. top_menu.toggleClass('open');
  71. if (top_menu.hasClass('open')) {
  72. $('body').on('click.scripts-menu', function(){
  73. top_menu.removeClass('open');
  74. $('body').off('.scripts-menu');
  75. });
  76. }
  77. return false;
  78. });
  79. break;
  80.  
  81. default:
  82. // Install css and html.
  83. top_menu = $('[class$="account"]');
  84. if ($('style[name="scripts_submenu"]').length === 0) {
  85. $('head').append(
  86. '<style name="scripts_submenu">'+
  87. '.sitemap__section.scripts-noposition {position:initial;}'+
  88. '.scripts-submenu.open>.dropdown-menu {display:block;position:absolute;top:0px;margin-top:0;left:-8px;transform:scale(1) translateX(-100%);min-width:200px}'+
  89. '.scripts-submenu .dropdown-menu:before {left:100%;top:12px;z-index:-1;}'+
  90. '.scripts-submenu .dropdown-menu .sitemap__pages {padding:5px 15px 0px 15px;}'+
  91. '.scripts-submenu .dropdown-menu .sitemap__page:last-child {margin-bottom:0;}'+
  92. '.scripts-submenu>a:before {content:"\uf0d9 "; font-family:"FontAwesome";}'+
  93. '@media (max-width: 979px) {'+
  94. ' .scripts-submenu>a:before {content:"";}'+
  95. ' .scripts-submenu>.dropdown-menu {display:contents;position:initial;top:initial;margin-top:initial;left:initial;transform:none;min-width:initial}'+
  96. '}'+
  97. '</style>'
  98. );
  99. }
  100. $('.user-summary').after(
  101. '<li class="sitemap__section sitemap__section--subsection scripts-noposition">'+
  102. ' <h3 class="sitemap__section-header sitemap__section-header--subsection">Scripts</h3>'+
  103. ' <ul class="sitemap__pages scripts-header"></ul>'+
  104. '</li>'
  105. );
  106. break;
  107. }
  108.  
  109. // Click to open sub-menu.
  110. top_menu.on('click','.scripts-submenu>a',function(e){
  111. var link = $(e.target).parent();
  112. link.siblings('.scripts-submenu.open').removeClass('open');
  113. if (location.pathname.match(/^\/(review|lesson|extra_study)\/session/) === null) {
  114. var menu = $('[id="#sitemap__account"]');
  115. var submenu = link.find('.dropdown-menu');
  116. submenu.css('font-size', '12px');
  117. submenu.css('max-height', '');
  118. var submenu_ul = submenu.find('>ul');
  119. var top = Math.max(0, link.position().top);
  120. link.toggleClass('open');
  121. if (link.hasClass('open')) {
  122. submenu.css('top',top+'px');
  123. if (menu.outerHeight() - top < submenu.outerHeight())
  124. {
  125. top = Math.max(0, menu.outerHeight() - submenu.outerHeight());
  126. submenu.css('top', top+'px');
  127. submenu.css('max-height', menu.outerHeight() - top);
  128. }
  129. }
  130. } else {
  131. link.toggleClass('open');
  132. }
  133. // If we opened the menu, listen for off-menu clicks.
  134. if (link.hasClass('open')) {
  135. $('body').on('click.scripts-submenu',function(e){
  136. $('body').off('click.scripts-submenu');
  137. $('.scripts-submenu').removeClass('open');
  138. return true;
  139. })
  140. } else {
  141. $('body').off('click.scripts-submenu');
  142. }
  143. return false;
  144. });
  145. return true;
  146. }
  147.  
  148. //------------------------------
  149. // Sort menu items
  150. //------------------------------
  151. function sort_name(a,b) {
  152. return a.querySelector('a').innerText.localeCompare(b.querySelector('a').innerText);
  153. }
  154.  
  155. //------------------------------
  156. // Install Submenu, if not present.
  157. //------------------------------
  158. function install_scripts_submenu(name) {
  159. // Abort if already installed.
  160. var safe_name = escape_attr(name);
  161. var safe_text = escape_text(name);
  162. var submenu = $('.scripts-submenu[name="'+safe_name+'"]');
  163. if (submenu.length > 0) return submenu;
  164.  
  165. if (location.pathname.match(/^\/(review|lesson|extra_study)\/session/) !== null) {
  166. submenu = $(
  167. '<li class="scripts-submenu" name="'+safe_name+'">'+
  168. ' <a href="#">'+safe_text+'</a>'+
  169. ' <ul class="dropdown-menu">'+
  170. ' </ul>'+
  171. '</li>'
  172. );
  173. $('.scripts-header').after(submenu);
  174. } else {
  175. submenu = $(
  176. '<li class="sitemap__page scripts-submenu" name="'+safe_name+'">'+
  177. ' <a href="#">'+safe_text+'</a>'+
  178. ' <div class="sitemap__expandable-chunk dropdown-menu" data-expanded="true" aria-expanded="true">'+
  179. ' <ul class="sitemap__pages">'+
  180. ' </ul>'+
  181. ' </div>'+
  182. '</li>'
  183. );
  184. $('.scripts-header').append(submenu);
  185. }
  186. var items = $('.scripts-header').siblings('.scripts-submenu,.script-link').sort(sort_name);
  187. $('.scripts-header').after(items);
  188. return submenu;
  189. }
  190.  
  191. //------------------------------
  192. // Inserts script link into Wanikani menu.
  193. //------------------------------
  194. function insert_script_link(config) {
  195. // Abort if the script already exists
  196. var link_id = config.name+'_script_link';
  197. var link_text = escape_text(config.title);
  198. if ($('#'+link_id).length !== 0) return;
  199. install_scripts_header();
  200. var menu, classes, items, link_html;
  201. if (config.submenu) {
  202. var submenu = install_scripts_submenu(config.submenu);
  203.  
  204. // Append the script, and sort the menu.
  205. if (location.pathname.match(/^\/(review|lesson|extra_study)\/session/) !== null) {
  206. menu = submenu.find('.dropdown-menu');
  207. } else {
  208. menu = submenu.find('.dropdown-menu>ul');
  209. }
  210. classes = ['sitemap__page'];
  211. if (config.class) classes.push(config.class_html);
  212. link_html = '<li id="'+link_id+'" name="'+config.name+'" class="'+classes.join(' ')+'"><a href="#">'+link_text+'</a></li>';
  213. menu.append(link_html);
  214. menu.append(menu.children().sort(sort_name));
  215. } else {
  216. classes = ['sitemap__page', 'script-link'];
  217. if (config.class) classes.push(config.class_html);
  218. link_html = '<li id="'+link_id+'" name="'+config.name+'" class="'+classes.join(' ')+'"><a href="#">'+link_text+'</a></li>';
  219. if (location.pathname.match(/^\/(review|lesson|extra_study)\/session/) !== null) {
  220. $('.scripts-header').after(link_html);
  221. items = $('.scripts-header').siblings('.scripts-submenu,.script-link').sort(sort_name);
  222. $('.scripts-header').after(items);
  223. } else {
  224. $('.scripts-header').append(link_html);
  225. items = $('.scripts-header').siblings('.scripts-submenu,.script-link').sort(sort_name);
  226. $('.scripts-header').append(items);
  227. }
  228. }
  229.  
  230. // Add a callback for when the link is clicked.
  231. $('#'+link_id).on('click', function(e){
  232. $('body').off('click.scripts-link');
  233. $('#scripts-menu').removeClass('open');
  234. $('.scripts-submenu').removeClass('open');
  235. $('[class$="account"]').siblings('[data-navigation-section-toggle]').click();
  236. var nav_toggle = $('.navigation__toggle');
  237. if (nav_toggle.is(':visible')) nav_toggle.click();
  238. config.on_click(e);
  239. return false;
  240. });
  241. }
  242.  
  243. wkof.ready('document').then(set_ready_state);
  244.  
  245. function set_ready_state(){
  246. // Delay guarantees include() callbacks are called before ready() callbacks.
  247. setTimeout(function(){wkof.set_state('wkof.Menu', 'ready');},0);
  248. }
  249.  
  250. })(window);