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}