blob: 0b5a4e4801f2faeb53eeae1b832d0ee2398f070a (
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
|
function main() {
// Gather the used set oof tags
const tagSet = new Set();
const postList = [];
const tagContainers = document.getElementsByClassName('sitemap_tag');
for (let index = 0; index < tagContainers.length; index++) {
const container = tagContainers[index];
const pContainer = container.children[0];
if (!pContainer) {
continue;
}
const tagList = pContainer.textContent.split(',');
tagList.forEach(tag => tagSet.add(tag));
postList.push({
container: container.parentElement,
tagList: tagList,
enabled: tagList.length
});
}
// Create the tag container
const contentContainer = document.getElementById('content');
const tagContainer = document.createElement('div');
tagContainer.id = 'tag-filter-container';
contentContainer.before(tagContainer);
let numEnabled = tagSet.size;
for (const tag of tagSet) {
const tagElement = document.createElement('div');
tagElement.className = "tag-filter-item";
const tagElementLabel = document.createElement('span');
tagElementLabel.innerHTML = tag;
const tagElementButton = document.createElement('button');
tagElement.append(tagElementLabel, tagElementButton);
tagContainer.append(tagElement);
// Whenever a tag is clicked, execute the filtering behavior
tagElementButton.onclick = function() {
// Handle enable/disable
tagElement.remove();
if (tagElement.classList.contains('disabled')) {
tagElement.classList.remove('disabled');
if (numEnabled === 0) {
tagContainer.prepend(tagElement);
}
else {
tagContainer.children[numEnabled - 1].after(tagElement);
}
numEnabled++;
// Filter
postList.forEach(post => {
if (post.tagList.includes(tag)) {
post.enabled++;
if (post.enabled) {
post.container.style.display = 'list-item';
}
}
});
}
else {
tagElement.classList.add('disabled');
tagContainer.append(tagElement);
numEnabled--;
// Filter
postList.forEach(post => {
if (post.tagList.includes(tag)) {
post.enabled--;
if (!post.enabled) {
post.container.style.display = 'none';
}
}
});
}
};
}
}
window.onload = main;
|
