klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-06-08 12:15:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve accordion animation

Browse Source
This commit is contained in:
Antoine Bartuccio 2025-06-05 20:37:58 +02:00
parent d58c713fc5
commit 4774a7b741
Signed by: klmp200
GPG Key ID: E7245548C53F904B
2 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
core/static/bundled/core/accordion-index.ts
View File

@ -1,11 +1,19 @@
const setMaxHeight = (element: HTMLDetailsElement) => {
element.setAttribute("style", `max-height: ${element.scrollHeight}px`);
const updateMaxHeight = (element: HTMLDetailsElement) => {
const content = element.querySelector(".accordion-content") as HTMLElement | null;
if (!content) {
return;
}
if (element.hasAttribute("open")) {
content.style.maxHeight = `${content.scrollHeight}px`;
} else {
content.style.maxHeight = "0px";
}
};
// Initialize max-height at load
window.addEventListener("DOMContentLoaded", () => {
for (const el of document.querySelectorAll("details.accordion")) {
setMaxHeight(el as HTMLDetailsElement);
updateMaxHeight(el as HTMLDetailsElement);
}
});
@ -16,7 +24,7 @@ new MutationObserver((mutations: MutationRecord[]) => {
if (target.tagName !== "DETAILS" || !target.classList.contains("accordion")) {
continue;
}
setMaxHeight(target);
updateMaxHeight(target);
}
}).observe(document.body, {
attributes: true,

11
core/static/core/accordion.scss
View File

@ -44,12 +44,17 @@ details.accordion>.accordion-content {
background: #ffffff;
color: #333333;
padding: 1em 2.2em;
overflow: auto;
border: 1px solid #dddddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
opacity: 0;
overflow: hidden;
}
details.accordion {
transition: max-height 300ms ease-in-out;
details[open].accordion>.accordion-content {
opacity: 1;
// Setting a transition on all states of the content
// will create a strange behavior where the transition
// continues without being shown, creating inconsistenties
transition: all 300ms ease-out;
}