View difference between Paste ID: yp1icRXD and 8SmkPu5P
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>&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();