Advertisement
Guest User

Nested ZSR Navi Menu 0.5

a guest
May 18th, 2013
144
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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>&nbsp;</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();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement