blob: 45ac9ac6f822dd0e9366605701dd556521ba35f6 (
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
|
<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")
if (weeklies.length === 0) {
hideWeeklyButton.classList.add("hidden")
}
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 }}
|
