mirror of
https://github.com/ae-utbm/sith.git
synced 2025-06-06 11:15:20 +00:00
Add accordion animation with js
This commit is contained in:
parent
fb3fd9536e
commit
0980fccf93
25
core/static/bundled/core/accordion-index.ts
Normal file
25
core/static/bundled/core/accordion-index.ts
Normal file
@ -0,0 +1,25 @@
|
||||
const setMaxHeight = (element: HTMLDetailsElement) => {
|
||||
element.setAttribute("style", `max-height: ${element.scrollHeight}px`);
|
||||
};
|
||||
|
||||
// Initialize max-height at load
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
for (const el of document.querySelectorAll("details.accordion")) {
|
||||
setMaxHeight(el as HTMLDetailsElement);
|
||||
}
|
||||
});
|
||||
|
||||
// Accordion opened
|
||||
new MutationObserver((mutations: MutationRecord[]) => {
|
||||
for (const mutation of mutations) {
|
||||
const target = mutation.target as HTMLDetailsElement;
|
||||
if (target.tagName !== "DETAILS" || !target.classList.contains("accordion")) {
|
||||
continue;
|
||||
}
|
||||
setMaxHeight(target);
|
||||
}
|
||||
}).observe(document.body, {
|
||||
attributes: true,
|
||||
attributeFilter: ["open"],
|
||||
subtree: true,
|
||||
});
|
@ -50,31 +50,6 @@ details.accordion>.accordion-content {
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
@keyframes open {
|
||||
0% {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
/* closing animation */
|
||||
@keyframes close {
|
||||
0% {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
|
||||
details[open].accordion>summary~* {
|
||||
animation: open 700ms;
|
||||
}
|
||||
|
||||
details::not([open]).accordion>summary~* {
|
||||
animation: open 700ms;
|
||||
details.accordion {
|
||||
transition: max-height 300ms ease-in-out;
|
||||
}
|
@ -27,6 +27,7 @@
|
||||
<script type="module" src="{{ static('bundled/htmx-index.js') }}"></script>
|
||||
<script type="module" src="{{ static('bundled/country-flags-index.ts') }}"></script>
|
||||
<script type="module" src="{{ static('bundled/core/tooltips-index.ts') }}"></script>
|
||||
<script type="module" src="{{ static('bundled/core/accordion-index.ts') }}"></script>
|
||||
|
||||
<!-- Jquery declared here to be accessible in every django widgets -->
|
||||
<script src="{{ static('bundled/vendored/jquery.min.js') }}"></script>
|
||||
|
Loading…
x
Reference in New Issue
Block a user