From 8190f7d579443513abfdcf0826fe46dcb73f22a4 Mon Sep 17 00:00:00 2001 From: mattkae Date: Tue, 20 Jun 2023 11:35:35 -0400 Subject: Tying up the loose strings around the new blogging system --- posts/post.js | 86 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 posts/post.js (limited to 'posts/post.js') diff --git a/posts/post.js b/posts/post.js new file mode 100644 index 0000000..0b5a4e4 --- /dev/null +++ b/posts/post.js @@ -0,0 +1,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; -- cgit v1.2.1