https://kanguen.github.io/js/navigation.js

1"use strict";
2
3window.addEventListener(
4	'load',
5	function () {
6		navigation();
7		currentPage();
8	}, false
9);
10
11const CHILD_PAGES = {
12	"adventure.html": "adventures.html"
13};
14
15function currentPage () {
16	let currentPage = window.location.pathname;
17	currentPage = currentPage.substr(currentPage.lastIndexOf('/') + 1);
18
19	if (!currentPage) currentPage = "index.html";
20	if (CHILD_PAGES[currentPage]) currentPage = CHILD_PAGES[currentPage];
21
22	if (currentPage.toLowerCase() === "book.html") {
23		const hashPart = window.location.hash.split(",")[0];
24		if (hashPart) {
25			currentPage += hashPart.toLowerCase();
26		}
27	}
28
29	const current = $(`li[data-page="${currentPage}"]`);
30	current.addClass("active");
31	current.siblings().removeClass("active");
32	current.parent().closest("li").addClass("active");
33}
34
35function navigation () {
36	LI('navbar', 'index.html', 'Anasayfa');
37	LI('navbar', 'quickreference.html', 'Oynanış ve Kurallar')
38
39	LIDropdown('navbar', 'players', 'dropdown');
40	A('players', 'playerOption', 'dropdown-toggle', 'dropdown', '#', 'button', 'true', 'false', "Oyuncu Seçenekleri <span class='caret'></span>");
41	UL('players', 'ul_players', 'dropdown-menu');
42	LI('ul_players', 'classes.html', 'Sınıflar');
43	LI('ul_players', 'spells.html', 'Büyüler');
44	LI('ul_players', 'races.html', 'Irklar');
45	LI('ul_players', 'backgrounds.html', 'Karakter Geçmişleri');
46	LI('ul_players', 'feats.html', 'Hünerler');
47	LI('ul_players', 'items.html', 'Eşyalar');
48	//LI('ul_players', 'invocations.html', 'Yakarışlar');
49	//LI('ul_players', 'lifegen.html', 'Hayatın Bu');
50	LI('ul_players', 'names.html', 'Ä°simler');
51	LI('ul_players', 'conditions.html', 'Durumlar');
52
53	//LIDropdown('navbar', 'references', 'dropdown');
54	//A('references', 'references', 'dropdown-toggle', 'dropdown', '#', 'button', 'true', 'false', "Referanslar <span class='caret'></span>");
55	//UL('references', 'ul_references', 'dropdown-menu');
56	//LI('ul_references', 'bestiary.html', 'Yaratık Ansiklopedisi');
57	//LI('ul_references', 'deities.html', 'Tanrılar');
58	//LI('ul_references', 'items.html', 'Eşyalar');
59	//LI('ul_references', 'rewards.html', 'Diğer Ödüller');
60	//LI('ul_references', 'psionics.html', 'Psionikler');
61//
62	LI('navbar', 'statgen.html', 'Statgen');
63
64	/*LIDropdown('navbar', 'utils', 'dropdown');
65	A('utils', 'utils', 'dropdown-toggle', 'dropdown', '#', 'button', 'true', 'false', "Yardımcı Uygulamalar <span class='caret'></span>");
66	UL('utils', 'ul_utils', 'dropdown-menu');
67	LI('ul_utils', 'blacklist.html', 'İçerik Karalistesi');
68	LI('ul_utils', 'converter.html', 'Stat Block to JSON');
69	LI('ul_utils', 'demo.html', 'Renderer Demo');
70	LI('ul_utils', 'roll20.html', 'Roll20 Script Help');*/
71
72	LISwitcher('navbar', 'daynightMode', 'nightModeToggle', '#', 'styleSwitcher.toggleActiveStyleSheet(); return false;');
73
74	/**
75	 * Adds a link for the LIDropdowns
76	 * @param {String} append_to_id - Which ID does this link belong too .
77	 * @param {String} _id - What ID should this link have.
78	 * @param {String} _class - What class(es) should this link have.
79	 * @param {String} _datatoggle - What type of datatoggle.
80	 * @param {String} _href - Where does this link to.
81	 * @param {String} _role - Specific role.
82	 * @param {String} _ariahaspop - Aria has pop.
83	 * @param {String} _ariaexpanded - Default state.
84	 * @param {String} _text - Text of the link.
85	 */
86	function A (append_to_id, _id, _class, _datatoggle, _href, _role, _ariahaspop, _ariaexpanded, _text) {
87		const a = document.createElement('a');
88		a.id = _id;
89		a.className = _class;
90		a.setAttribute('data-toggle', _datatoggle);
91		a.href = _href;
92		a.setAttribute('role', _role);
93		a.setAttribute('aria-haspopup', _ariahaspop);
94		a.setAttribute('aria-expanded', _ariaexpanded);
95		a.innerHTML = _text;
96
97		const appendTo = document.getElementById(append_to_id);
98		appendTo.appendChild(a);
99	}
100
101	/**

102	 * Adds a new list to the navigation bar
103	 * @param {String} append_to_id - Which ID does this link belong too .
104	 * @param {String} ul_id - What ID should this UL have.
105	 * @param {String} _class - What class(es) should this link have.
106	 */
107	function UL (append_to_id, ul_id, _class) {
108		const ul = document.createElement('ul');
109		ul.id = ul_id;
110		ul.className = _class;
111
112		const appendTo = document.getElementById(append_to_id);
113		appendTo.appendChild(ul);
114	}
115
116	/**
117	 * Adds a new item to the navigation bar. Can be used either in root, or in a different UL.
118	 * @param append_to_id - Which ID does this link belong too .
119	 * @param a_href - Where does this link to.
120	 * @param a_text - What text does this link have.
121	 * @param a_hash - Optional hash to be appended to the base href
122	 */
123	function LI (append_to_id, a_href, a_text, a_hash) {
124		const hashPart = a_hash ? `#${a_hash}`.toLowerCase() : "";
125		$(`#${append_to_id}`)
126			.append(`
127				<li role="presentation" id="${a_text.toLowerCase().replace(/\s+/g, '')}" data-page="${a_href}${hashPart}">
128					<a href="${a_href}${hashPart}">${a_text}</a>
129				</li>
130			`);
131	}
132
133	function LIDivider (append_to_id) {
134		$(`#${append_to_id}`).append(`<li role="presentation" class="divider"></li>`);
135	}
136
137	/**

138	 * Adds a new outbound item to the navigation bar. Can be used either in root, or in a different UL.
139	 * @param {String} append_to_id - Which ID does this link belong too .
140	 * @param {String} a_href - Where does this link to.
141	 * @param {String} a_text - What text does this link have.
142	 * @param {String} a_target - Where does this link target too.
143	 * @param {String} a_title - What subtext does this link have.
144	 */
145	function LISpecial (append_to_id, a_href, a_text, a_target, a_title) {
146		const $li = `
147			<li role="presentation">
148				<a href="${a_href}" target="${a_target}" title="${a_title}" class="dropdown-ext-link">
149					<span>${a_text}</span>
150					<span class="glyphicon glyphicon-log-out"></span>
151				</a>
152			</li>
153		`;
154
155		const $appendTo = $(`#${append_to_id}`);
156		$appendTo.append($li);
157	}
158
159	/**
160	 * Adds a new dropdown starting list to the navigation bar
161	 * @param {String} append_to_id - Which ID does this link belong too .
162	 * @param {String} li_id - What ID should this LI have.
163	 * @param {String} _class - What class(es) should this LI have.
164	 */
165	function LIDropdown (append_to_id, li_id, _class) {
166		const li = document.createElement('li');
167		li.id = li_id;
168		li.setAttribute('role', 'presentation');
169		li.className = _class;
170
171		const appendTo = document.getElementById(append_to_id);
172		appendTo.appendChild(li);
173	}
174
175	/**
176	 * Special LI for the Day/Night Switcher
177	 * @param {String} append_to_id - Which ID does this link belong too .
178	 * @param {String} li_id - What ID should this LI have.
179	 * @param {String} a_class - What class(es) should this link have.
180	 * @param {String} a_href - Where does this link to.
181	 * @param {String} a_class - What should the link do when you click on it.
182	 */
183	function LISwitcher (append_to_id, li_id, a_class, a_href, a_onclick) {
184		const a = document.createElement('a');
185		a.href = a_href;
186		a.className = a_class;
187		a.setAttribute('onclick', a_onclick);
188		a.innerHTML = styleSwitcher.getActiveStyleSheet() === StyleSwitcher.STYLE_DAY ? "Gece Modu" : "Gün Modu";
189
190		const li = document.createElement('li');
191		li.id = li_id;
192		li.setAttribute('role', 'presentation');
193		li.appendChild(a);
194
195		const appendTo = document.getElementById(append_to_id);
196		appendTo.appendChild(li);
197	}
198}