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

feat: add updateEpisodeNavigation and focus restore in updateEpisodeHighlight

Browse Source
This commit is contained in:
mkelvers
2026-07-04 05:03:10 +02:00
parent 72c5c99737
commit 66fa70e6ad
1 changed files with 38 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
static/player/episodes/ui.ts
View File

@@ -36,21 +36,53 @@ const getEpisodeEls = () => {
}; };
}; };
/** Highlights current episode in grid and list. Scrolls to episode into view. */ /** Highlights current episode in grid and list. */
export const updateEpisodeHighlight = (num: number): void => { export const updateEpisodeHighlight = (num: number, restoreFocus: boolean = false): void => {
const { gridEls, listEls } = getEpisodeEls(); const { gridEls, listEls } = getEpisodeEls();
// clear old highlights // clear old highlights
[...gridEls, ...listEls].forEach((el) => { [...gridEls, ...listEls].forEach((el) => {
el.classList.remove("ring-2", "ring-accent", "bg-accent/20", "text-accent"); el.classList.remove("ring-1", "ring-accent", "bg-accent/15", "bg-accent/20", "text-accent");
el.removeAttribute("aria-current");
}); });
// apply new highlight // apply new highlight
const gridEl = state.elements.episodeGrid?.querySelector(`[data-episode-id="${num}"]`); const gridEl = state.elements.episodeGrid?.querySelector(`[data-episode-id="${num}"]`);
const listEl = state.elements.episodeList?.querySelector(`[data-episode-id="${num}"]`); const listEl = state.elements.episodeList?.querySelector(`[data-episode-id="${num}"]`);
gridEl?.classList.add("ring-2", "ring-accent"); gridEl?.classList.add("bg-accent/15", "text-accent", "ring-1", "ring-accent");
listEl?.classList.add("ring-2", "ring-accent"); listEl?.classList.add("bg-accent/20");
gridEl?.setAttribute("aria-current", "page");
listEl?.setAttribute("aria-current", "page");
// scroll into view // scroll into view
(gridEl ?? listEl)?.scrollIntoView({ behavior: "smooth", block: "center" }); const activeElement = gridEl ?? listEl;
activeElement?.scrollIntoView({ behavior: "smooth", block: "center" });
if (restoreFocus && activeElement instanceof HTMLElement) {
activeElement.focus({ preventScroll: true });
}
};
const setNavigationLink = (selector: string, episode: number, visible: boolean): void => {
const anchor = document.querySelector(selector) as HTMLAnchorElement | null;
if (!anchor) {
return;
}
const url = new URL(anchor.href, window.location.href);
url.searchParams.set("ep", String(episode));
anchor.href = url.toString();
anchor.dataset.episodeId = String(episode);
anchor.classList.toggle("hidden", !visible);
anchor.classList.toggle("inline-flex", visible);
anchor.setAttribute("aria-hidden", visible ? "false" : "true");
anchor.tabIndex = visible ? 0 : -1;
};
/** Keeps the real Previous and Next links correct after an in-page transition. */
export const updateEpisodeNavigation = (episode: number): void => {
setNavigationLink("[data-episode-prev]", Math.max(1, episode - 1), episode > 1);
setNavigationLink(
"[data-episode-next]",
state.episode.total > 0 ? Math.min(state.episode.total, episode + 1) : episode + 1,
state.episode.total === 0 || episode < state.episode.total,
);
}; };
/** Switches visible episode range in grid. Updates dropdown label and hides/shows episode cards. */ /** Switches visible episode range in grid. Updates dropdown label and hides/shows episode cards. */