85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
import { parseClassList } from "./utils";
|
|
|
|
const initSynopsisToggle = (): void => {
|
|
document.addEventListener("click", (e) => {
|
|
const target = e.target;
|
|
if (!(target instanceof Element)) return;
|
|
|
|
const btn = target.closest<HTMLButtonElement>("[data-synopsis-toggle]");
|
|
if (!btn) return;
|
|
const container = document.getElementById("synopsis-container");
|
|
if (!container) return;
|
|
|
|
const isClamped = container.classList.contains("line-clamp-6");
|
|
if (isClamped) {
|
|
container.classList.remove("line-clamp-6");
|
|
btn.textContent = "Show less";
|
|
return;
|
|
}
|
|
container.classList.add("line-clamp-6");
|
|
btn.textContent = "Read more";
|
|
});
|
|
};
|
|
|
|
initSynopsisToggle();
|
|
|
|
const setDropdownMenuState = (menu: HTMLElement, isOpen: boolean): void => {
|
|
// data attributes store the class lists to add/remove
|
|
const openClasses = parseClassList(menu.getAttribute("data-dropdown-open-classes"));
|
|
const closedClasses = parseClassList(menu.getAttribute("data-dropdown-closed-classes"));
|
|
|
|
if (isOpen) {
|
|
menu.classList.remove(...closedClasses);
|
|
menu.classList.add(...openClasses);
|
|
return;
|
|
}
|
|
|
|
menu.classList.remove(...openClasses);
|
|
menu.classList.add(...closedClasses);
|
|
};
|
|
|
|
const setWatchlistDropdownState = (isOpen: boolean): void => {
|
|
const dropdown = document.getElementById("watchlist-dropdown");
|
|
if (!dropdown) {
|
|
return;
|
|
}
|
|
|
|
dropdown.classList.toggle("open", isOpen);
|
|
const menu = dropdown.querySelector("[data-dropdown-menu]");
|
|
if (menu instanceof HTMLElement) {
|
|
setDropdownMenuState(menu, isOpen);
|
|
}
|
|
};
|
|
|
|
const toggleWatchlistDropdown = (): void => {
|
|
const dropdown = document.getElementById("watchlist-dropdown");
|
|
if (!dropdown) {
|
|
return;
|
|
}
|
|
|
|
setWatchlistDropdownState(!dropdown.classList.contains("open"));
|
|
};
|
|
|
|
const closeDropdownOnOutsideClick = (event: MouseEvent): void => {
|
|
const dropdown = document.getElementById("watchlist-dropdown");
|
|
if (!dropdown) {
|
|
return;
|
|
}
|
|
|
|
const target = event.target;
|
|
if (!(target instanceof Node)) {
|
|
return;
|
|
}
|
|
|
|
if (!dropdown.contains(target)) {
|
|
setWatchlistDropdownState(false);
|
|
}
|
|
};
|
|
|
|
const initWatchlistDropdown = (): void => {
|
|
(window as Window & { toggleDropdown?: () => void }).toggleDropdown = toggleWatchlistDropdown;
|
|
document.addEventListener("click", closeDropdownOnOutsideClick);
|
|
};
|
|
|
|
initWatchlistDropdown();
|