chore: format anime and dedupe
This commit is contained in:
@@ -1,23 +1,23 @@
|
|||||||
import { parseClassList } from './utils';
|
import { parseClassList } from "./utils";
|
||||||
|
|
||||||
const initSynopsisToggle = (): void => {
|
const initSynopsisToggle = (): void => {
|
||||||
document.addEventListener('click', e => {
|
document.addEventListener("click", (e) => {
|
||||||
const target = e.target;
|
const target = e.target;
|
||||||
if (!(target instanceof Element)) return;
|
if (!(target instanceof Element)) return;
|
||||||
|
|
||||||
const btn = target.closest<HTMLButtonElement>('[data-synopsis-toggle]');
|
const btn = target.closest<HTMLButtonElement>("[data-synopsis-toggle]");
|
||||||
if (!btn) return;
|
if (!btn) return;
|
||||||
const container = document.getElementById('synopsis-container');
|
const container = document.getElementById("synopsis-container");
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
|
|
||||||
const isClamped = container.classList.contains('line-clamp-6');
|
const isClamped = container.classList.contains("line-clamp-6");
|
||||||
if (isClamped) {
|
if (isClamped) {
|
||||||
container.classList.remove('line-clamp-6');
|
container.classList.remove("line-clamp-6");
|
||||||
btn.textContent = 'Show less';
|
btn.textContent = "Show less";
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
container.classList.add('line-clamp-6');
|
container.classList.add("line-clamp-6");
|
||||||
btn.textContent = 'Read more';
|
btn.textContent = "Read more";
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -25,8 +25,8 @@ initSynopsisToggle();
|
|||||||
|
|
||||||
const setDropdownMenuState = (menu: HTMLElement, isOpen: boolean): void => {
|
const setDropdownMenuState = (menu: HTMLElement, isOpen: boolean): void => {
|
||||||
// data attributes store the class lists to add/remove
|
// data attributes store the class lists to add/remove
|
||||||
const openClasses = parseClassList(menu.getAttribute('data-dropdown-open-classes'));
|
const openClasses = parseClassList(menu.getAttribute("data-dropdown-open-classes"));
|
||||||
const closedClasses = parseClassList(menu.getAttribute('data-dropdown-closed-classes'));
|
const closedClasses = parseClassList(menu.getAttribute("data-dropdown-closed-classes"));
|
||||||
|
|
||||||
if (isOpen) {
|
if (isOpen) {
|
||||||
menu.classList.remove(...closedClasses);
|
menu.classList.remove(...closedClasses);
|
||||||
@@ -39,29 +39,29 @@ const setDropdownMenuState = (menu: HTMLElement, isOpen: boolean): void => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const setWatchlistDropdownState = (isOpen: boolean): void => {
|
const setWatchlistDropdownState = (isOpen: boolean): void => {
|
||||||
const dropdown = document.getElementById('watchlist-dropdown');
|
const dropdown = document.getElementById("watchlist-dropdown");
|
||||||
if (!dropdown) {
|
if (!dropdown) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
dropdown.classList.toggle('open', isOpen);
|
dropdown.classList.toggle("open", isOpen);
|
||||||
const menu = dropdown.querySelector('[data-dropdown-menu]');
|
const menu = dropdown.querySelector("[data-dropdown-menu]");
|
||||||
if (menu instanceof HTMLElement) {
|
if (menu instanceof HTMLElement) {
|
||||||
setDropdownMenuState(menu, isOpen);
|
setDropdownMenuState(menu, isOpen);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const toggleWatchlistDropdown = (): void => {
|
const toggleWatchlistDropdown = (): void => {
|
||||||
const dropdown = document.getElementById('watchlist-dropdown');
|
const dropdown = document.getElementById("watchlist-dropdown");
|
||||||
if (!dropdown) {
|
if (!dropdown) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setWatchlistDropdownState(!dropdown.classList.contains('open'));
|
setWatchlistDropdownState(!dropdown.classList.contains("open"));
|
||||||
};
|
};
|
||||||
|
|
||||||
const closeDropdownOnOutsideClick = (event: MouseEvent): void => {
|
const closeDropdownOnOutsideClick = (event: MouseEvent): void => {
|
||||||
const dropdown = document.getElementById('watchlist-dropdown');
|
const dropdown = document.getElementById("watchlist-dropdown");
|
||||||
if (!dropdown) {
|
if (!dropdown) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -78,7 +78,7 @@ const closeDropdownOnOutsideClick = (event: MouseEvent): void => {
|
|||||||
|
|
||||||
const initWatchlistDropdown = (): void => {
|
const initWatchlistDropdown = (): void => {
|
||||||
(window as Window & { toggleDropdown?: () => void }).toggleDropdown = toggleWatchlistDropdown;
|
(window as Window & { toggleDropdown?: () => void }).toggleDropdown = toggleWatchlistDropdown;
|
||||||
document.addEventListener('click', closeDropdownOnOutsideClick);
|
document.addEventListener("click", closeDropdownOnOutsideClick);
|
||||||
};
|
};
|
||||||
|
|
||||||
initWatchlistDropdown();
|
initWatchlistDropdown();
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
const dedupe = (): void => {
|
const dedupe = (): void => {
|
||||||
const seen = new Set<string>();
|
const seen = new Set<string>();
|
||||||
const elements = document.querySelectorAll('[data-id]');
|
const elements = document.querySelectorAll("[data-id]");
|
||||||
|
|
||||||
elements.forEach(item => {
|
elements.forEach((item) => {
|
||||||
const id = item.getAttribute('data-id');
|
const id = item.getAttribute("data-id");
|
||||||
if (!id) {
|
if (!id) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -16,11 +16,11 @@ const dedupe = (): void => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// run on DOM ready or immediately if already loaded
|
// run on DOM ready or immediately if already loaded
|
||||||
if (document.readyState === 'loading') {
|
if (document.readyState === "loading") {
|
||||||
document.addEventListener('DOMContentLoaded', dedupe);
|
document.addEventListener("DOMContentLoaded", dedupe);
|
||||||
} else {
|
} else {
|
||||||
dedupe();
|
dedupe();
|
||||||
}
|
}
|
||||||
|
|
||||||
// also run on load as a fallback (e.g. htmx swaps)
|
// also run on load as a fallback (e.g. htmx swaps)
|
||||||
window.addEventListener('load', dedupe);
|
window.addEventListener("load", dedupe);
|
||||||
|
|||||||
Reference in New Issue
Block a user