blob: 997ed7d0773151dbd9c5e938d8365ac07855cf7e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
{{ define "main" }}
<script>
document.addEventListener("DOMContentLoaded", () => {
for (const e of document.getElementsByClassName("js-only")) {
e.classList.remove("js-only");
}
const songs = document.querySelectorAll("li");
const search = document.getElementById("search");
const songlist = document.getElementById("song-list");
const normalize = str => str.normalize('NFD').replace(/\p{Diacritic}/gu, "");
search.addEventListener("input", () => {
const searchText = search.value.toLowerCase().trim();
const searchTerms = normalize(searchText).split(" ");
const hasFilter = searchText.length > 0;
songlist.classList.toggle("list-searched", hasFilter);
songs.forEach(song => {
const songText = normalize(`${song.textContent} ${song.dataset.alias}`).toLowerCase();
const isMatch = searchTerms.every(term => songText.includes(term));
song.hidden = !isMatch;
});
});
const clearSearch = document.getElementById("clear-search");
clearSearch.addEventListener("click", () => {
search.value = "";
songs.forEach(song => {
song.hidden = false;
});
songlist.classList.remove("list-searched");
});
});
</script>
<div class="list-container">
{{ $tagsPage := eq .Title "Tags"}}
<h2 class="center">What do you want to sing?</h2>
<div class="search-bar-container">
<div class="search-wrapper">
<input type="text" id="search" class="search-bar" placeholder="Search ALL Songs...">
<button id="clear-search" class="js-only">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<title>Backspace</title>
<path
d="M135.19 390.14a28.79 28.79 0 0021.68 9.86h246.26A29 29 0 00432 371.13V140.87A29 29 0 00403.13 112H156.87a28.84 28.84 0 00-21.67 9.84v0L46.33 256l88.86 134.11z"
fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
d="M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33">
</path>
</svg></button>
</div>
</div>
<ul id="song-list">
{{ range .Pages }}
<li data-alias={{ if .Params.alias }}{{ .Params.alias }}{{ else }}{{ .Params.title }}{{ end }}>
<a href="{{ .RelPermalink }}">
{{ .Title }}
</a>
</li>
{{ end }}
</ul>
</div>
<div class="about">
{{ .Content }}
</div>
<div id="setlist-tab">Setlist</div>
<div id="setlist-sidebar" class="hidden">
<h6>Set List</h3>
<ul id="setlist"></ul>
<button id="add-to-setlist" style="display: none">＋ Add Song</button>
</div>
<div class="back-to-top">
<a href="#top">
back to top
</a>
</div>
{{ end }}
|
