SHOW:
|
|
- or go back to the newest paste.
| 1 | // ==UserScript== | |
| 2 | // @name Nested ZSR Navi Menu | |
| 3 | // @namespace http://cloudmodding.com/ | |
| 4 | // @version 0.5 | |
| 5 | // @description A ZSR Navi menu modification that adds nesting for the various header levels. The script also contain a Plus version with additional features that're listed bellow. Disable it by removing the function call in the init function. | |
| 6 | // @author CloudMax | |
| 7 | // @match http://zeldaspeedruns.com/* | |
| 8 | // @match www.zeldaspeedruns.com/* | |
| 9 | // @copyright 2012+, CloudMax | |
| 10 | // @require http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js | |
| 11 | // ==/UserScript== | |
| 12 | ||
| 13 | //Changelong//////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| 14 | //0.5 | |
| 15 | //The script now run when visiting the website using www | |
| 16 | //Added a validation so that the script only run if you're in the Games section of ZSR | |
| 17 | //The Navi Menu can no longer appear in a game sections front page | |
| 18 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| 19 | ||
| 20 | //Screenshot Album////////////////////////////////////////////////////////////////////////////////////////////////// | |
| 21 | // http://imgur.com/a/odWG8 | |
| 22 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| 23 | ||
| 24 | /* | |
| 25 | *This script was created for Tampermonkey(Chrome)/Greasemonkey(Firefox) | |
| 26 | *The nested unordered lists that are generated gets a class applied to them by the name of naviSub<headerNumber> so that each level can be styled. (it is also used for the generating process to find the last suitable list) | |
| 27 | *By clicking on the yellow triforce symbols you can show/hide nested lists. | |
| 28 | *A magin/padding trick has been applied to all page content headers (this is normally only applied to h2 headers) so that when you go to a specific anchor, the header will also be displayed. | |
| 29 | */ | |
| 30 | ||
| 31 | //Plus Features///////////////////////////////////////////////////////////////////////////////////////////////////// | |
| 32 | //Enables the Navi Menu on all pages. You can set the required amount of headers for the Navi Menu to appear. | |
| 33 | //Changes the Navi Menu title to "Navigation+" to indicate that the plus features are enabled. | |
| 34 | //The Navi Menu width is dynamic so that it can become slightly wider if the list items doesn't fit. | |
| 35 | //If a page displays 2 h1 headers at the top of the page, the header with the page name will be removed. | |
| 36 | //Wraps a link around the game logo in the upper left so that it takes you to the specified games main page. | |
| 37 | //The Triforce font doesn't have a % symbol, so it is replaced with "Percent" in headers. Ex: "Any%" to "AnyPercent" (DISABLED) | |
| 38 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| 39 | ||
| 40 | //Settings////////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| 41 | var defLvl = 2, //All headers with a higher value will be hidden in the Navi Menu by default. | |
| 42 | nestLimit = 3, //How many header levels the menu will nest. | |
| 43 | minHeaders = 3, //The amount of headers that must be available for the Navi Menu to appear. (Plus feature) | |
| 44 | pathSections = location.pathname.replace(/\/+$/, "").split('/'), //Used for page check and when generating links
| |
| 45 | headers = ''; //This variable will store the header selector using for the loop. | |
| 46 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| 47 | ||
| 48 | //creates the header selector | |
| 49 | for (var i = 1; i <= nestLimit; i++) {
| |
| 50 | headers += 'h' + i + ','; | |
| 51 | } | |
| 52 | headers = headers.slice(0, headers.length - 1); //Removes the last comma | |
| 53 | ||
| 54 | var NaviMenu = {
| |
| 55 | init: function () {
| |
| 56 | if ($("li.active > a:contains('Games')").length > 0) { //By checking if the Games dropdown in the navbar is active, we can validate whether or not you're visiting a game page.
| |
| 57 | NaviMenu.activateMenuPlus(); //Enables all the plus features. | |
| 58 | if ($('#navi').length > 0) { //Make sure that there is a Navi Menu before generating the content.
| |
| 59 | NaviMenu.createLinks(); | |
| 60 | } | |
| 61 | } | |
| 62 | }, | |
| 63 | createLinks: function () {
| |
| 64 | $('#navi ul').remove(); //Clear the Navi Menu in case one has already been generated.
| |
| 65 | ||
| 66 | var ul = $('#navi').append('<ul></ul>').find('ul');
| |
| 67 | ||
| 68 | $('#pagecontent').children(headers).each(function () {
| |
| 69 | var self = $(this), | |
| 70 | txt = self.text(), | |
| 71 | tag = self.prop("tagName").toLowerCase();
| |
| 72 | ||
| 73 | if (tag == "h1") {
| |
| 74 | var parent = ul; //The header is a h1, so it will be placed in the root ul | |
| 75 | } else {
| |
| 76 | /*Old code. This one breaks if the page headers are set up in an odd manner (if the author didn't properly nest the headers, skipping a level.) | |
| 77 | var parent = ul.find('.naviSub' + parseInt(tag.substring(1)) + ':last'); //It is a sub-header, so it will be placed in the first list with the proper nesting level
| |
| 78 | */ | |
| 79 | ||
| 80 | var subLists = ''; | |
| 81 | for (var i = 1; i <= parseInt(tag.substring(1)); i++) { //Loop through and create a .naviSub selector list for all the values that're lower than the current one
| |
| 82 | subLists += '.naviSub' + i + ','; | |
| 83 | } | |
| 84 | subLists = subLists.slice(0, subLists.length - 1); //Removes the last comma | |
| 85 | ||
| 86 | var parent = ul.find(subLists).last(); //Use the generated selector to find the last list that has a lower nesting level. | |
| 87 | } | |
| 88 | ||
| 89 | //Create the List Item | |
| 90 | var li = parent.append('<li><span class="bullet"></span><a href="#' + NaviMenu.slug(txt) + '">' + txt + '</a></li>').find('li:last');
| |
| 91 | ||
| 92 | li.append('<ul class="naviSub' + (parseInt(tag.substring(1)) + 1) + '" style="margin-left:10px;list-style-type: none;"></ul>');
| |
| 93 | ||
| 94 | //Hides the nested list if the nesting level is higher than the specified default level | |
| 95 | if (parseInt(tag.substring(1)) + 1 > defLvl) | |
| 96 | li.find('ul:last').hide()
| |
| 97 | ||
| 98 | //Generates the anchor ID for the header element | |
| 99 | $(this).attr("id", NaviMenu.slug(txt));
| |
| 100 | ||
| 101 | }); | |
| 102 | ||
| 103 | //Remove the main page header in the Navi Menu if it isn't used. | |
| 104 | if ($('#pagecontent > h1:first').next().prop("tagName").toLowerCase() == "h1") {
| |
| 105 | ul.find('li:first').remove();
| |
| 106 | } | |
| 107 | ||
| 108 | //Remove all the empty lists. | |
| 109 | ul.find('ul:empty').remove();
| |
| 110 | ||
| 111 | //Adds a nested class to all li elements with a list in them so that CSS can be applied to them easily | |
| 112 | ul.find('ul').parent().addClass('nested');
| |
| 113 | ||
| 114 | //Set the Triforce color of list items with a nested menu to yellow, and those without one to SandyBrown. This gives a visual indication that you can toggle an item (the yellow ones) | |
| 115 | $('li:not(.nested) > .bullet').css('color', 'SandyBrown');
| |
| 116 | $('.nested > .bullet').css('color', 'Yellow');
| |
| 117 | ||
| 118 | //Set the cursor to pointer for the items that can be toggled (the yellow ones) | |
| 119 | $('.nested > .bullet').css('cursor', 'pointer');
| |
| 120 | ||
| 121 | //Applies the padding/margin-top trick to all page content headers so that when you use the navi menu, you'll scroll to the top of the header, instead of bellow it. | |
| 122 | $('#pagecontent').children(headers).css({
| |
| 123 | "padding-top": "44px", | |
| 124 | "margin-top": "-44px" | |
| 125 | }); | |
| 126 | ||
| 127 | //Allows you to toggle nested menues by clicking on the yellow triforce symbols that are displayed. | |
| 128 | $('#navi span').click(function (e) {
| |
| 129 | $(this).siblings('ul:last').slideToggle();
| |
| 130 | }); | |
| 131 | }, | |
| 132 | slug: function (txt) { //I took this from the original code. Generates a anchor friendly path out of the header text
| |
| 133 | return txt.toLowerCase().replace(/[^\w|\s]/g, '').replace(/[ _]+/g, '-'); | |
| 134 | }, | |
| 135 | activateMenuPlus: function () {
| |
| 136 | //Enables the Navi Menu on all pages which normally doesn't have one that has the required amount of headers, except for the game front page. | |
| 137 | if ($('#navi').length == 0 && $('#pagecontent').children(headers).length >= minHeaders && pathSections.length >= 4) {
| |
| 138 | $('#pagecontent').prepend('<div id="navi" class="navi"/>');
| |
| 139 | $('#navi').append('<h1> </h1>')
| |
| 140 | .css({
| |
| 141 | "min-height": "57px", | |
| 142 | "width": "62px" | |
| 143 | }); | |
| 144 | } | |
| 145 | ||
| 146 | //Changes the Navi Menu title to "Navigation+". (Indicates that the plus features are enabled) | |
| 147 | $('#navi h1').text('Navigation+');
| |
| 148 | ||
| 149 | //The Navi Menu width is modified so that it can become slightly wider if the list items doesn't fit. | |
| 150 | $('#navi').css({
| |
| 151 | "min-width": "230px", | |
| 152 | "max-width": "300px", | |
| 153 | "width": "auto" | |
| 154 | }); | |
| 155 | ||
| 156 | //If a page displays 2 h1 headers at the top of the page, the header with the page name will be removed. | |
| 157 | if ($('#pagecontent > h1:first').next().prop("tagName").toLowerCase() == "h1") {
| |
| 158 | $('#pagecontent > h1:first').remove();
| |
| 159 | } | |
| 160 | ||
| 161 | //Wraps a link around the game logo in the upper left that takes you to the specified games main game. | |
| 162 | $(".game-logo > img").wrap('<a href="/' + pathSections[1] + '" />');
| |
| 163 | ||
| 164 | //Replaces the "%" symbol in all h1 headers with "Percent" as the Triforce font doesn't have a % symbol. | |
| 165 | /* | |
| 166 | $("h1").each(function () {
| |
| 167 | $(this).text($(this).text().replace('%', 'Percent'));
| |
| 168 | }); | |
| 169 | */ | |
| 170 | } | |
| 171 | }; | |
| 172 | ||
| 173 | NaviMenu.init(); |