feat: add filters to term page

- refactor term page structure with partials
- add "reverse order" button
- add "hide weekly posts" button
- i18n support


Former-commit-id: f312afd11e292b6ccd5cc3767b1be08aaf4f1495

1 files changed, 69 insertions, 0 deletions

diff --git a/layouts/_partials/term/term-scripts.html b/layouts/_partials/term/term-scripts.html
new file mode 100644
index 00000000..b061794a
--- /dev/null
+++ b/layouts/_partials/term/term-scripts.html
@@ -0,0 +1,69 @@
+<script>
+  const postList = document.getElementById("term-posts")
+  const reverseButton = document.getElementById("reverse-order")
+  const reverseOrder = () => {
+    // play exit animation
+    postList.classList.remove("animate-fade-in")
+    postList.classList.add("animate-fade-out")
+    setTimeout(() => {
+      // reverse order
+      postList.classList.toggle("flex-col")
+      postList.classList.toggle("flex-col-reverse")
+
+      // play entrance animation
+      postList.classList.remove("animate-fade-out")
+      postList.classList.add("animate-fade-in")
+    }, 100)
+  }
+  reverseButton.addEventListener('click', reverseOrder)
+</script>
+
+{{ if eq .Data.Singular "tag" }}
+<script>
+    const hideWeeklyButton = document.getElementById("hide-weekly")
+    const weeklies = postList.querySelectorAll(".weekly")
+
+    const entranceAnimation = "animate-flip-in-x"
+    const exitAnimation = "animate-flip-out-x"
+    const animationDuration = 500
+
+    const toggleWeekly = () => {
+    if (postList.classList.contains("weekly-hidden")) {
+        // show weekly posts
+        postList.classList.remove("weekly-hidden")
+        weeklies.forEach(weekly => {
+        weekly.classList.remove("hidden!")
+        weekly.classList.add(entranceAnimation)
+        setTimeout(() => {
+            weekly.classList.remove(entranceAnimation)
+        }, animationDuration)
+        })
+    } else {
+        // hide weekly posts
+        postList.classList.add("weekly-hidden")
+        weeklies.forEach(weekly => {
+        weekly.classList.add(exitAnimation)
+        setTimeout(() => {
+            weekly.classList.add("hidden!")
+            weekly.classList.remove(exitAnimation)
+        }, animationDuration)
+        })
+    }
+    }
+
+    const highlightClasses = ["animate-flash", "opacity-50"]
+
+    const highlightWeekly = () => {
+    if (weeklies[0].classList.contains(highlightClasses[0])) return;
+    weeklies.forEach(e => e.classList.add(...highlightClasses))
+    }
+
+    const unhighlightWeekly = () => {
+    weeklies.forEach(e => e.classList.remove(...highlightClasses))
+    }
+
+    hideWeeklyButton.addEventListener("click", toggleWeekly)
+    hideWeeklyButton.addEventListener("mouseover", highlightWeekly)
+    hideWeeklyButton.addEventListener("mouseout", unhighlightWeekly)
+</script>
+{{ end }}