Wanikani Open Framework - Menu module

Menu module for Wanikani Open Framework

目前為 2018-07-12 提交的版本,檢視 最新版本

此腳本不應該直接安裝,它是一個供其他腳本使用的函式庫。欲使用本函式庫,請在腳本 metadata 寫上: // @require https://update.cn-greasyfork.org/scripts/38578/612205/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.4
  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 '/review/session':
  35. // Install css and html.
  36. if ($('style[name="scripts_submenu"]').length === 0) {
  37. $('head').append(
  38. '<style name="scripts_submenu">'+
  39. '#scripts-menu.scripts-menu-icon {display:inline-block}'+
  40. '#scripts-menu .scripts-icon {display:inline-block}'+
  41. '#scripts-menu:not(.open) > .dropdown-menu {display:none;}'+
  42. '#scripts-menu .scripts-submenu:not(.open) > .dropdown-menu {display:none;}'+
  43. '#scripts-menu .dropdown-menu {position:absolute; background-color:#eee; margin:0; padding:5px 0; list-style-type:none; border:1px solid #333;}'+
  44. '#scripts-menu .dropdown-menu > li {text-align:left; color:#333; white-space:nowrap; line-height:20px; padding:3px 0;}'+
  45. '#scripts-menu .dropdown-menu > li.scripts-header {text-transform:uppercase; font-size:11px; font-weight:bold; padding:3px 20px;}'+
  46. '#scripts-menu .dropdown-menu > li:hover:not(.scripts-header) {background-color:rgba(0,0,0,0.15)}'+
  47. '#scripts-menu .dropdown-menu a {padding:3px 20px; color:#333; opacity:1;}'+
  48. '#scripts-menu .scripts-submenu {position:relative;}'+
  49. '#scripts-menu .scripts-submenu > a:after {content:"\uf0da"; font-family:"FontAwesome"; position:absolute; top:0; right:0; padding:3px 4px 3px 0;}'+
  50. '#scripts-menu .scripts-submenu .dropdown-menu {left:100%; top:-6px;}'+
  51. '</style>'
  52. );
  53. }
  54. $('#summary-button a[href="/review"]').after(
  55. '<div id="scripts-menu" class="scripts-menu-icon">'+
  56. ' <a class="scripts-icon" href="#"><i class="icon-gear" title="Script Menu"></i></a>'+
  57. ' <ul class="dropdown-menu">'+
  58. ' <li class="scripts-header">Script Menu</li>'+
  59. ' </ul>'+
  60. '</div>'
  61. );
  62. top_menu = $('#scripts-menu');
  63. $('#scripts-menu > a.scripts-icon').on('click', function(e){
  64. top_menu.toggleClass('open');
  65. if (top_menu.hasClass('open')) {
  66. $('body').on('click.scripts-menu', function(){
  67. top_menu.removeClass('open');
  68. $('body').off('.scripts-menu');
  69. });
  70. }
  71. return false;
  72. });
  73. break;
  74.  
  75. default:
  76. // Install css and html.
  77. top_menu = $('.dropdown.account');
  78. if ($('style[name="scripts_submenu"]').length === 0) {
  79. $('head').append(
  80. '<style name="scripts_submenu">'+
  81. 'html#main .navbar .scripts-submenu {position:relative;}'+
  82. 'html#main .navbar .scripts-submenu.open>.dropdown-menu {display:block;position:absolute;top:0px;}'+
  83. '.scripts-submenu>a:before {content:"\uf0d9 "; font-family:"FontAwesome";}'+
  84. '@media (max-width: 979px) {'+
  85. ' .scripts-submenu>a:before {content:"";}'+
  86. ' html#main .navbar .scripts-submenu {margin-left:1.5em;}'+
  87. ' html#main .navbar .scripts-submenu>a {text-align:left;}'+
  88. ' html#main .navbar .scripts-submenu>ul.dropdown-menu {margin-left:.5em;}'+
  89. ' html#main .navbar .dropdown.account>.dropdown-menu>.script-link {margin-left:1.5em;}'+
  90. ' html#main .navbar .dropdown.account>.dropdown-menu>.script-link>a {text-align:left;}'+
  91. ' html#main .navbar .dropdown-menu>li:not(.nav-header).scripts-submenu {display:block;width:100%;}'+
  92. ' html#main .navbar .scripts-submenu>.dropdown-menu {display:block;padding:0;margin:0;box-shadow:none;}'+
  93. ' html#main .navbar .scripts-submenu.open>.dropdown-menu {position:relative;top:0px;left:initial;right:initial;}'+
  94. ' html#main .navbar .dropdown-menu>li:not(.nav-header).scripts-submenu>.dropdown-menu>li {width:auto;padding:0 1em;}'+
  95. '}'+
  96. '</style>'
  97. );
  98. }
  99. $('.nav-header:contains("Account")').before(
  100. '<li class="scripts-header nav-header">Scripts</li>'
  101. );
  102. break;
  103. }
  104.  
  105. // Click to open sub-menu.
  106. top_menu.on('click','.scripts-submenu>a',function(e){
  107. var link = $(e.target).parent();
  108. link.siblings('.scripts-submenu.open').removeClass('open');
  109. link.toggleClass('open');
  110. // If we opened the menu, listen for off-menu clicks.
  111. if (link.hasClass('open')) {
  112. $('body').on('click.scripts-submenu',function(e){
  113. $('body').off('click.scripts-submenu');
  114. $('.scripts-submenu').removeClass('open');
  115. return true;
  116. })
  117. } else {
  118. $('body').off('click.scripts-submenu');
  119. }
  120. return false;
  121. });
  122. return true;
  123. }
  124.  
  125. //------------------------------
  126. // Sort menu items
  127. //------------------------------
  128. function sort_name(a,b) {
  129. return a.querySelector('a').innerText.localeCompare(b.querySelector('a').innerText);
  130. }
  131.  
  132. //------------------------------
  133. // Install Submenu, if not present.
  134. //------------------------------
  135. function install_scripts_submenu(name) {
  136. // Abort if already installed.
  137. var safe_name = escape_attr(name);
  138. var safe_text = escape_text(name);
  139. var submenu = $('.scripts-submenu[name="'+safe_name+'"]');
  140. if (submenu.length > 0) return submenu;
  141.  
  142. submenu = $(
  143. '<li class="scripts-submenu" name="'+safe_name+'">'+
  144. ' <a href="#">'+safe_text+'</a>'+
  145. ' <ul class="dropdown-menu">'+
  146. ' </ul>'+
  147. '</li>'
  148. );
  149. $('.scripts-header').after(submenu);
  150. var items = $('.scripts-header').siblings('.scripts-submenu,.script-link').sort(sort_name);
  151. $('.scripts-header').after(items);
  152. return submenu;
  153. }
  154.  
  155. //------------------------------
  156. // Inserts script link into Wanikani menu.
  157. //------------------------------
  158. function insert_script_link(config) {
  159. // Abort if the script already exists
  160. var link_id = config.name+'_script_link';
  161. var link_text = escape_text(config.title);
  162. if ($('#'+link_id).length !== 0) return;
  163. install_scripts_header();
  164. if (config.submenu) {
  165. var submenu = install_scripts_submenu(config.submenu);
  166.  
  167. // Append the script, and sort the menu.
  168. var menu = submenu.find('.dropdown-menu');
  169. var class_html = (config.class ? ' class="'+config.class+'"': '');
  170. menu.append('<li id="'+link_id+'" name="'+config.name+'"'+class_html+'><a href="#">'+link_text+'</a></li>');
  171. menu.append(menu.children().sort(sort_name));
  172. } else {
  173. var class_html = (config.class ? ' '+classes:'');
  174. $('.scripts-header').after('<li id="'+link_id+'" name="'+config.name+'" class="script-link'+class_html+'"><a href="#">'+link_text+'</a></li>');
  175. var items = $('.scripts-header').siblings('.scripts-submenu,.script-link').sort(sort_name);
  176. $('.scripts-header').after(items);
  177. }
  178.  
  179. // Add a callback for when the link is clicked.
  180. $('#'+link_id).on('click', function(e){
  181. $('body').off('click.scripts-link');
  182. $('.dropdown.account').removeClass('open');
  183. $('#scripts-menu').removeClass('open');
  184. $('.scripts-submenu').removeClass('open');
  185. config.on_click(e);
  186. return false;
  187. });
  188. }
  189.  
  190. wkof.ready('document').then(set_ready_state);
  191.  
  192. function set_ready_state(){
  193. // Delay guarantees include() callbacks are called before ready() callbacks.
  194. setTimeout(function(){wkof.set_state('wkof.Menu', 'ready');},0);
  195. }
  196.  
  197. })(window);