From fa987c5f4a2420c6daf0c8c00514a9564991a57e Mon Sep 17 00:00:00 2001 From: metamuffin Date: Sun, 14 Apr 2024 15:44:02 +0200 Subject: jst: restore scroll properly --- web/script/player/player.ts | 8 ++------ web/script/transition.ts | 20 +++++++++++++------- 2 files changed, 15 insertions(+), 13 deletions(-) (limited to 'web') diff --git a/web/script/player/player.ts b/web/script/player/player.ts index 640a6d6..53b17cb 100644 --- a/web/script/player/player.ts +++ b/web/script/player/player.ts @@ -166,12 +166,8 @@ export class Player { this.active_tracks.change() } - play() { - this.video.play() - } - pause() { - this.video.pause() - } + play() { this.video.play() } + pause() { this.video.pause() } frame_forward() { //@ts-ignore trust me bro this.video["seekToNextFrame"]() diff --git a/web/script/transition.ts b/web/script/transition.ts index 5e8e9e2..a118c71 100644 --- a/web/script/transition.ts +++ b/web/script/transition.ts @@ -7,13 +7,17 @@ import { e } from "./jshelper/src/element.ts"; +interface HistoryState { + top: number +} + const DURATION = 200 globalThis.addEventListener("DOMContentLoaded", () => { patch_page() }) -globalThis.addEventListener("popstate", async (_e) => { - await transition_to(window.location.href, true) +globalThis.addEventListener("popstate", async e => { + await transition_to(window.location.href, e.state) }) let disable_transition = false @@ -31,10 +35,10 @@ function patch_page() { }) } -async function transition_to(href: string, back?: boolean) { +async function transition_to(href: string, state?: HistoryState) { stop() // nice! if (disable_transition) return window.location.href = href - const trigger_load = prepare_load(href, back) + const trigger_load = prepare_load(href, state) await fade(false) trigger_load() disable_transition = false; @@ -46,7 +50,8 @@ function show_message(mesg: string, mode: "error" | "success" = "error") { document.body.append(e("span", { class: ["jst-message", mode] }, mesg)) } -function prepare_load(href: string, back?: boolean) { +let i = 0; +function prepare_load(href: string, state?: HistoryState) { const r_promise = fetch(href, { headers: { accept: "text/html" }, redirect: "manual" }) return async () => { let rt = "" @@ -65,12 +70,13 @@ function prepare_load(href: string, back?: boolean) { return show_message("unknown error when fetching page") } const [head, body] = rt.split("")[1].split("") - if (!back) window.history.pushState({}, "", href) + window.history.replaceState({ top: globalThis.scrollY, index: i++ } as HistoryState, "") + if (!state) window.history.pushState({}, "", href) clear_spinner() document.head.innerHTML = head document.body.outerHTML = body globalThis.dispatchEvent(new Event("DOMContentLoaded")) - globalThis.scrollTo({ top: 0 }); + globalThis.scrollTo({ top: state?.top ?? 0 }); fade(true) } } -- cgit v1.2.3-70-g09d2