section_list.js

 1function section_list(sections, selectAfter, def) {
 2	var group = document.createElement("div");
 3	group.id = "section-list";
 4	var select = document.createElement("select");
 5
 6	var showall = document.createElement("button");
 7	group.appendChild(showall);
 8	showall.textContent = "all";
 9	showall.addEventListener("click", function() {
10		sections.forEach(function(section) {
11			section.querySelector("h1").style.display = "block";
12			section.style.display = "block";
13		});
14		group.style.display = "none";
15		select = null;
16	});
17
18	sections.forEach(function(section) {
19		section.querySelector("h1").style.display = "none";
20		select[select.options.length] = new Option(
21			section.querySelector("h1").textContent,
22			section.id,
23			section.id == def,
24			window.location.hash ?
25				"#" + section.id == window.location.hash :
26				section.id == def
27		);
28	});
29
30	group.appendChild(select);
31	selectAfter.insertAdjacentElement("afterend", group);
32
33	window.addEventListener("hashchange", function() {
34		if(!select) return;
35
36		sections.forEach(function(section) { section.style.display = "none"; });
37		if(window.location.hash) {
38			document.querySelector(window.location.hash).style.display = "block";
39		}
40		select.value = window.location.hash.replace(/^#/, "");
41		var event = document.createEvent("HTMLEvents");
42		event.initEvent("change", false, true);
43		select.dispatchEvent(event);
44	});
45
46	window.location.hash = "";
47	window.location.hash = "#" + select.value;
48	select.addEventListener("change", function() {
49		window.location.hash = "#" + select.value;
50	});
51}