web/repo: a page loaded as a document paints with its open tab scrolled into view, instead of the strip jumping when the app starts
Signed-off-by: dawn <dawn@tangled.org>
12345678910111213141516171851 unmodified lines707172736061626364656667687475767778147 unmodified linesExpand all<script module lang="ts"> export const scrollToCurrent = (strip: HTMLElement) => { const current = strip.querySelector<HTMLElement>('[aria-current="page"]'); if (!current) return; const left = current.offsetLeft - strip.offsetLeft; if ( left < strip.scrollLeft || left + current.offsetWidth > strip.scrollLeft + strip.clientWidth ) { strip.scrollLeft = left + current.offsetWidth - strip.clientWidth; } };</script>
<script lang="ts"> import { resolve } from "$app/paths"; import { page } from "$app/state"; import Pending from "#lib/components/ui/Pending.svelte";51 unmodified lines
const showCurrent = (strip: HTMLElement) => { void active; void extra; const current = strip.querySelector<HTMLElement>('[aria-current="page"]'); if (!current) return; const left = current.offsetLeft - strip.offsetLeft; if ( left < strip.scrollLeft || left + current.offsetWidth > strip.scrollLeft + strip.clientWidth ) { strip.scrollLeft = left + current.offsetWidth - strip.clientWidth; } scrollToCurrent(strip); };
// static builds have no counts, and an empty count beats a fake 0 const ticketCount = (c: RepoCounts) =>147 unmodified linesExpand all4 unmodified lines5678910111213147 unmodified linesExpand all161162163164165166167168169170171154 unmodified linesExpand all326327328329330331332333334335279 unmodified linesExpand all4 unmodified lines import { afterNavigate, goto, onNavigate } from "$app/navigation"; import { resolve } from "$app/paths"; import { navigating, page } from "$app/state"; import RepoChrome from "#lib/components/repo/RepoChrome.svelte"; import { scrollToCurrent } from "#lib/components/repo/RepoTabs.svelte"; import RepoSidebar from "#lib/components/repo/sidebar/RepoSidebar.svelte"; import AccountCorner from "#lib/components/shell/AccountCorner.svelte"; import PageBar from "#lib/components/repo/PageBar.svelte"; import PaneError from "#lib/components/svfe/PaneError.svelte";147 unmodified linesExpand all // the strip runs from the click until the page's skeletons are gone (Pending sets // html[data-suspended]). a page loaded as a document keeps it from the old page until the // new one's app is up (app.html) const loading = $derived(!!navigating.to); // runs as the html parses, once the row is whole, so a page loaded as a document paints with // its open tab in view instead of scrolling to it when the app starts const SCROLL_TABS = `<script>(${scrollToCurrent})(document.currentScript.parentElement.querySelector(".tabs"))</${"script"}>`; // a client navigation renders the new page in one long task: a frame first, so the strip shows onNavigate( () => new Promise<void>((resolve) => requestAnimationFrame(() => setTimeout(resolve))) );154 unmodified linesExpand all </Pending> <PageBar /> <!-- the account sits outside the pending boundary and hydrates from the root layout --> <div class="acct"><AccountCorner /></div> <!-- eslint-disable-next-line svelte/no-at-html-tags -- our own code, see SCROLL_TABS --> {@html SCROLL_TABS} </div> <div class="body"> <div class="prog" class:on={loading} aria-hidden="true"></div> <div class="scroll" id="pane" tabindex="-1">{@render body()}</div>279 unmodified linesExpand all