Tying up the loose strings around the new blogging system

1 files changed, 86 insertions, 0 deletions

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;