mirror of
https://code.castopod.org/adaures/castopod.git
synced 2024-09-08 03:39:20 +02:00
- add podcast sidebar navigation - add podcast dashboard with latest episodes - add pagination to podcast episodes - add components helper to reuse ui components (button, data_table, etc.) - enhance podcast and episode forms by splitting them into form sections - add hint tooltips to podcast and episode forms - transform radio inputs as buttons for better ux - replace explicit field by parental_advisory - replace author field by publisher - add podcasts_categories table to set multiple categories - use choices.js to enhance multiselect fields - update Language files - update js dependencies to latest versions closes #31, #9
63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
const SidebarToggler = (): void => {
|
|
const sidebar = document.querySelector(
|
|
"aside[id='admin-sidebar']"
|
|
) as HTMLElement;
|
|
const toggler = document.querySelector(
|
|
"button[id='sidebar-toggler']"
|
|
) as HTMLButtonElement;
|
|
const sidebarBackdrop = document.querySelector(
|
|
"div[id='sidebar-backdrop']"
|
|
) as HTMLElement;
|
|
|
|
const setAriaExpanded = (isExpanded: "true" | "false") => {
|
|
toggler.setAttribute("aria-expanded", isExpanded);
|
|
sidebarBackdrop.setAttribute("aria-expanded", isExpanded);
|
|
};
|
|
|
|
const hideSidebar = () => {
|
|
setAriaExpanded("false");
|
|
sidebar.classList.add("-translate-x-full");
|
|
sidebarBackdrop.classList.add("hidden");
|
|
toggler.style.transform = "translateX(0px)";
|
|
};
|
|
|
|
const showSidebar = () => {
|
|
setAriaExpanded("true");
|
|
sidebar.classList.remove("-translate-x-full");
|
|
sidebarBackdrop.classList.remove("hidden");
|
|
toggler.style.transform =
|
|
"translateX(" + sidebar.getBoundingClientRect().width + "px)";
|
|
};
|
|
|
|
toggler.addEventListener("click", () => {
|
|
if (sidebar.classList.contains("-translate-x-full")) {
|
|
showSidebar();
|
|
} else {
|
|
hideSidebar();
|
|
}
|
|
});
|
|
|
|
sidebarBackdrop.addEventListener("click", () => {
|
|
if (!sidebar.classList.contains("-translate-x-full")) {
|
|
hideSidebar();
|
|
}
|
|
});
|
|
|
|
const setAriaExpandedOnWindowEvent = () => {
|
|
const isExpanded =
|
|
!sidebar.classList.contains("-translate-x-full") ||
|
|
window.innerWidth >= 768;
|
|
const ariaExpanded = toggler.getAttribute("aria-expanded");
|
|
if (isExpanded && (!ariaExpanded || ariaExpanded === "false")) {
|
|
setAriaExpanded("true");
|
|
} else if (!isExpanded && (!ariaExpanded || ariaExpanded === "true")) {
|
|
setAriaExpanded("false");
|
|
}
|
|
};
|
|
|
|
window.addEventListener("load", setAriaExpandedOnWindowEvent);
|
|
window.addEventListener("resize", setAriaExpandedOnWindowEvent);
|
|
};
|
|
|
|
export default SidebarToggler;
|