melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: format static/dropdown.ts

Browse Source
This commit is contained in:
mkelvers
2026-06-21 02:04:31 +02:00
committed by Milas Holsting
parent 8cd9ac94e9
commit 9ca3eb0a27
1 changed files with 40 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
static/dropdown.ts
View File

@@ -42,7 +42,9 @@ class UIDropdown extends HTMLElement {
} }
open(): void { open(): void {
if (!this.contentEl || this.isOpen) return; if (!this.contentEl || this.isOpen) {
return;
}
document.querySelectorAll<UIDropdown>("ui-dropdown").forEach((dropdown) => { document.querySelectorAll<UIDropdown>("ui-dropdown").forEach((dropdown) => {
if (dropdown !== this) { if (dropdown !== this) {
@@ -60,7 +62,9 @@ class UIDropdown extends HTMLElement {
} }
close(options: { restoreFocus?: boolean } = {}): void { close(options: { restoreFocus?: boolean } = {}): void {
if (!this.contentEl || !this.isOpen) return; if (!this.contentEl || !this.isOpen) {
return;
}
this.isOpen = false; this.isOpen = false;
this.contentEl.classList.add("hidden"); this.contentEl.classList.add("hidden");
this.contentEl.setAttribute("aria-hidden", "true"); this.contentEl.setAttribute("aria-hidden", "true");
@@ -85,15 +89,25 @@ class UIDropdown extends HTMLElement {
} }
handleDocumentClick(event: MouseEvent): void { handleDocumentClick(event: MouseEvent): void {
if (!this.isOpen) return; if (!this.isOpen) {
if (!(event.target instanceof Node)) return; return;
if (this.contains(event.target)) return; }
if (!(event.target instanceof Node)) {
return;
}
if (this.contains(event.target)) {
return;
}
this.close({ restoreFocus: false }); this.close({ restoreFocus: false });
} }
handleKeydown(event: KeyboardEvent): void { handleKeydown(event: KeyboardEvent): void {
if (!this.isOpen) return; if (!this.isOpen) {
if (event.key !== "Escape") return; return;
}
if (event.key !== "Escape") {
return;
}
event.preventDefault(); event.preventDefault();
this.close(); this.close();
} }
@@ -103,15 +117,21 @@ customElements.define("ui-dropdown", UIDropdown);
const initStudioDropdown = (): void => { const initStudioDropdown = (): void => {
document.addEventListener("click", (e) => { document.addEventListener("click", (e) => {
const target = e.target; const { target } = e;
if (!(target instanceof Element)) return; if (!(target instanceof Element)) {
return;
}
const btn = target.closest<HTMLButtonElement>("button[data-studio-select]"); const btn = target.closest<HTMLButtonElement>("button[data-studio-select]");
if (!btn) return; if (!btn) {
return;
}
const input = document.getElementById("studio-input"); const input = document.querySelector("#studio-input");
const form = document.getElementById("browse-search-form"); const form = document.querySelector("#browse-search-form");
if (!(input instanceof HTMLInputElement) || !(form instanceof HTMLFormElement)) return; if (!(input instanceof HTMLInputElement) || !(form instanceof HTMLFormElement)) {
return;
}
input.value = btn.dataset.studioSelect ?? ""; input.value = btn.dataset.studioSelect ?? "";
form.requestSubmit(); form.requestSubmit();
@@ -126,7 +146,9 @@ const initStudioDropdown = (): void => {
const initCheckboxVisuals = (): void => { const initCheckboxVisuals = (): void => {
const syncCheckboxVisual = (input: HTMLInputElement): void => { const syncCheckboxVisual = (input: HTMLInputElement): void => {
const box = input.nextElementSibling; const box = input.nextElementSibling;
if (!(box instanceof HTMLElement)) return; if (!(box instanceof HTMLElement)) {
return;
}
const icon = box.querySelector("svg"); const icon = box.querySelector("svg");
icon?.classList.toggle("hidden", !input.checked); icon?.classList.toggle("hidden", !input.checked);
@@ -153,8 +175,10 @@ const initCheckboxVisuals = (): void => {
}; };
document.addEventListener("change", (event) => { document.addEventListener("change", (event) => {
const target = event.target; const { target } = event;
if (!(target instanceof HTMLInputElement)) return; if (!(target instanceof HTMLInputElement)) {
return;
}
if (!target.matches("[data-checkbox-visual], [data-sfw-checkbox], [data-genre-visual]")) { if (!target.matches("[data-checkbox-visual], [data-sfw-checkbox], [data-genre-visual]")) {
return; return;
} }