quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

rewrite DocsCollapsible

Browse source 
now with disabled js support and less broken animations
This commit is contained in:
outfoxxed 2024-10-19 01:49:00 -07:00
parent 22b8e154f3
commit 45fc2eed5a
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
9 changed files with 136 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/components/Accordion.astro Normal file
View file

@ -0,0 +1,55 @@
---
import "@styles/components/accordion.css"
---
<details class=`accordion ${Astro.props.class ?? ""}` {...Astro.props}>
<summary>
<slot name="header"/>
</summary>
<div class="accordion-container">
<div>
<slot/>
</div>
</div>
</details>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll(".accordion").forEach(element => {
const accordion = element as HTMLDetailsElement;
const summary = accordion.querySelector("summary")!;
const body = accordion.querySelector(".accordion-container") as HTMLDivElement;
summary.addEventListener("click", event => {
event.preventDefault();
body.classList.toggle("animate", true);
if (!accordion.open || accordion.classList.contains("closing")) {
accordion.classList.toggle("closing", false);
body.style.setProperty("--height", "0px");
requestAnimationFrame(() => {
accordion.open = true;
body.style.setProperty("--height", body.scrollHeight + "px");
});
} else {
body.style.setProperty("--height", body.scrollHeight + "px");
requestAnimationFrame(() => {
accordion.classList.toggle("closing", true);
body.style.setProperty("--height", "0px");
});
}
});
body.addEventListener("transitionend", event => {
if ((event as TransitionEvent).propertyName == "max-height") {
body.classList.toggle("animate", false);
if (accordion.classList.contains("closing")) {
accordion.classList.toggle("closing", false);
accordion.open = false;
}
}
});
});
});
</script>