From dc4db405d2991d3ec6a114f3b08d3fccd057d3ee Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Thu, 13 Feb 2025 17:52:16 +0100
Subject: frontend: Migrate to Svelte 5
---
frontend/src/lib/reader/PageView.svelte | 26 ++++----
frontend/src/lib/reader/Reader.svelte | 76 ++++++++++++++++++++--
frontend/src/lib/reader/ReaderPage.svelte | 14 ++--
.../lib/reader/components/CloseReaderButton.svelte | 15 +++--
.../src/lib/reader/components/PageIndicator.svelte | 4 +-
.../lib/reader/components/ReaderMenuButton.svelte | 11 ++--
6 files changed, 111 insertions(+), 35 deletions(-)
(limited to 'frontend/src/lib/reader')
diff --git a/frontend/src/lib/reader/PageView.svelte b/frontend/src/lib/reader/PageView.svelte
index 08764b7..81fbb97 100644
--- a/frontend/src/lib/reader/PageView.svelte
+++ b/frontend/src/lib/reader/PageView.svelte
@@ -1,8 +1,8 @@
<script lang="ts">
import { Direction, Layout, type PageFragment } from '$gql/graphql';
- import { getReaderContext, partition, type Chunk } from '$lib/Reader';
import { binds } from '$lib/Shortcuts';
import { src } from '$lib/Utils';
+ import { getReaderContext, partition, type Chunk } from './Reader.svelte';
import ReaderPage from './ReaderPage.svelte';
const reader = getReaderContext();
@@ -19,14 +19,14 @@
function gotoChunk(to: number) {
if (to < 0 || to >= chunks.length) return;
- $reader.page = chunks[to].index;
+ reader.page = chunks[to].index;
}
function pagesAround(around: number) {
const peek = (at: number) => {
if (at < 0 || at >= chunks.length) return [];
- const pages = [chunks[at].main];
+ const pages: PageFragment[] = [chunks[at].main];
if (chunks[at].secondary) {
pages.push(chunks[at].secondary);
@@ -38,8 +38,8 @@
return [...peek(lookup[around] + 1), ...peek(lookup[around] - 1)];
}
- const next = () => gotoChunk(lookup[$reader.page] + 1);
- const prev = () => gotoChunk(lookup[$reader.page] - 1);
+ const next = () => gotoChunk(lookup[reader.page] + 1);
+ const prev = () => gotoChunk(lookup[reader.page] - 1);
const clickLeft = () => (direction === Direction.LeftToRight ? prev() : next());
const clickRight = () => (direction === Direction.RightToLeft ? prev() : next());
@@ -56,8 +56,8 @@
}
}
- $: [chunks, lookup] = partition($reader.pages, layout);
- $: layout, ({ main, secondary } = chunks[lookup[$reader.page]]);
+ $: [chunks, lookup] = partition(reader.pages, layout);
+ $: layout, ({ main, secondary } = chunks[lookup[reader.page]]);
</script>
<svelte:document
@@ -76,16 +76,16 @@
/>
{#if !secondary}
- <ReaderPage page={main} on:click={clickMain} --justify="center" />
+ <ReaderPage page={main} onclick={clickMain} --justify="center" />
{:else if direction === Direction.LeftToRight}
- <ReaderPage page={main} on:click={prev} --justify="flex-end" />
- <ReaderPage page={secondary} on:click={next} --justify="flex-start" />
+ <ReaderPage page={main} onclick={prev} --justify="flex-end" />
+ <ReaderPage page={secondary} onclick={next} --justify="flex-start" />
{:else}
- <ReaderPage page={secondary} on:click={next} --justify="flex-end" />
- <ReaderPage page={main} on:click={prev} --justify="flex-start" />
+ <ReaderPage page={secondary} onclick={next} --justify="flex-end" />
+ <ReaderPage page={main} onclick={prev} --justify="flex-start" />
{/if}
<div class="invisible absolute">
- {#each pagesAround($reader.page) as page}
+ {#each pagesAround(reader.page) as page}
<img src={src(page.image, 'full')} alt="" />
{/each}
</div>
diff --git a/frontend/src/lib/reader/Reader.svelte b/frontend/src/lib/reader/Reader.svelte
index 9bc7a82..b5cc725 100644
--- a/frontend/src/lib/reader/Reader.svelte
+++ b/frontend/src/lib/reader/Reader.svelte
@@ -1,32 +1,96 @@
+<script lang="ts" module>
+ import { Layout, type PageFragment } from '$gql/graphql';
+ import { getContext, setContext } from 'svelte';
+
+ export interface Chunk {
+ main: PageFragment;
+ secondary?: PageFragment;
+ index: number;
+ }
+
+ class ReaderContext {
+ visible = $state(false);
+ sidebar = $state(false);
+ pages: PageFragment[] = $state([]);
+ page = $state(0);
+
+ open = (page: number) => {
+ this.page = page;
+ this.visible = true;
+ };
+ }
+
+ export function initReaderContext() {
+ return setContext<ReaderContext>('reader', new ReaderContext());
+ }
+
+ export function getReaderContext() {
+ return getContext<ReaderContext>('reader');
+ }
+
+ export function partition(pages: PageFragment[], layout: Layout): [Chunk[], number[]] {
+ const single = layout === Layout.Single;
+ const offset = layout === Layout.DoubleOffset;
+
+ const chunks: Chunk[] = [];
+ const lookup: number[] = Array<number>(pages.length);
+
+ for (let chunkIndex = 0, pageIndex = 0; pageIndex < pages.length; chunkIndex++) {
+ const wide = () => pages[pageIndex].image.aspectRatio > 1;
+
+ const nextPage = () => {
+ lookup[pageIndex] = chunkIndex;
+ return pages[pageIndex++];
+ };
+
+ const offsetFirst = pageIndex === 0 && offset;
+ const full = single || wide() || offsetFirst;
+
+ const chunk: Chunk = { index: pageIndex, main: nextPage() };
+
+ if (!full && pageIndex < pages.length) {
+ if (!wide()) {
+ chunk.secondary = nextPage();
+ }
+ }
+
+ chunks.push(chunk);
+ }
+ return [chunks, lookup];
+ }
+</script>
+
<script lang="ts">
import { trapFocus } from '$lib/Actions';
- import { getReaderContext } from '$lib/Reader';
import { fadeDefault, slideXDefault } from '$lib/Transitions';
+ import type { Snippet } from 'svelte';
import { fade, slide } from 'svelte/transition';
import CloseReaderButton from './components/CloseReaderButton.svelte';
import PageIndicator from './components/PageIndicator.svelte';
import ReaderMenuButton from './components/ReaderMenuButton.svelte';
+ let { sidebar, children }: { sidebar?: Snippet; children?: Snippet } = $props();
+
const reader = getReaderContext();
</script>
-{#if $reader.visible}
+{#if reader.visible}
<div
role="dialog"
class="fixed bottom-0 left-0 right-0 top-0 z-10 flex h-full w-full bg-black"
transition:fade={fadeDefault}
use:trapFocus
>
- {#if $$slots.sidebar && $reader.sidebar}
+ {#if sidebar && reader.sidebar}
<aside class="w-[36rem] shrink-0 bg-slate-800" transition:slide={slideXDefault}>
<div class="flex h-full min-w-[36rem] flex-col gap-4 overflow-auto p-4">
- <slot name="sidebar" />
+ {@render sidebar?.()}
</div>
</aside>
{/if}
<main class="relative flex grow">
<div class="absolute flex w-full p-1 text-lg [&>*:last-child]:ml-auto">
- {#if $$slots.sidebar}
+ {#if sidebar}
<ReaderMenuButton />
{/if}
<CloseReaderButton />
@@ -36,7 +100,7 @@
</div>
<div class="flex grow">
- <slot />
+ {@render children?.()}
</div>
</main>
</div>
diff --git a/frontend/src/lib/reader/ReaderPage.svelte b/frontend/src/lib/reader/ReaderPage.svelte
index fb3e780..83b2d1b 100644
--- a/frontend/src/lib/reader/ReaderPage.svelte
+++ b/frontend/src/lib/reader/ReaderPage.svelte
@@ -1,13 +1,19 @@
<script lang="ts">
import type { PageFragment } from '$gql/graphql';
import { src } from '$lib/Utils';
+ import type { MouseEventHandler } from 'svelte/elements';
- export let page: PageFragment;
+ interface Props {
+ page: PageFragment;
+ onclick: MouseEventHandler<HTMLDivElement>;
+ }
+
+ let { page, onclick }: Props = $props();
</script>
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="flex grow" on:click>
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="flex grow" {onclick}>
<img
class="h-auto w-auto object-contain"
width={page.image.width}
diff --git a/frontend/src/lib/reader/components/CloseReaderButton.svelte b/frontend/src/lib/reader/components/CloseReaderButton.svelte
index 0c88323..f3eb4ba 100644
--- a/frontend/src/lib/reader/components/CloseReaderButton.svelte
+++ b/frontend/src/lib/reader/components/CloseReaderButton.svelte
@@ -1,19 +1,22 @@
<script lang="ts">
- import { getReaderContext } from '$lib/Reader';
import { accelerator } from '$lib/Shortcuts';
+ import { getReaderContext } from '../Reader.svelte';
const reader = getReaderContext();
+
+ function onclick() {
+ reader.visible = false;
+ reader.sidebar = false;
+ }
</script>
<button
type="button"
class="btn floating"
title="Close reader"
- on:click={() => {
- $reader.visible = false;
- $reader.sidebar = false;
- }}
+ aria-label="Close reader"
+ {onclick}
use:accelerator={'Escape'}
>
- <span class="icon-lg icon-[material-symbols--close]" />
+ <span class="icon-lg icon-[material-symbols--close]"></span>
</button>
diff --git a/frontend/src/lib/reader/components/PageIndicator.svelte b/frontend/src/lib/reader/components/PageIndicator.svelte
index f79fc00..35190b3 100644
--- a/frontend/src/lib/reader/components/PageIndicator.svelte
+++ b/frontend/src/lib/reader/components/PageIndicator.svelte
@@ -1,9 +1,9 @@
<script lang="ts">
- import { getReaderContext } from '$lib/Reader';
+ import { getReaderContext } from '../Reader.svelte';
const reader = getReaderContext();
</script>
<div class="floating !p-2">
- {$reader.page + 1}/{$reader.pages.length}
+ {reader.page + 1}/{reader.pages.length}
</div>
diff --git a/frontend/src/lib/reader/components/ReaderMenuButton.svelte b/frontend/src/lib/reader/components/ReaderMenuButton.svelte
index aa20206..58648e8 100644
--- a/frontend/src/lib/reader/components/ReaderMenuButton.svelte
+++ b/frontend/src/lib/reader/components/ReaderMenuButton.svelte
@@ -1,16 +1,19 @@
<script lang="ts">
- import { getReaderContext } from '$lib/Reader';
import { accelerator } from '$lib/Shortcuts';
+ import { getReaderContext } from '../Reader.svelte';
const reader = getReaderContext();
+
+ let title = $derived(`${reader.sidebar ? 'Hide' : 'Show'} menu`);
</script>
<button
type="button"
class="btn floating invisible xl:visible"
- title={`${$reader.sidebar ? 'Hide' : 'Show'} menu`}
- on:click={() => ($reader.sidebar = !$reader.sidebar)}
+ {title}
+ aria-label={title}
+ onclick={() => (reader.sidebar = !reader.sidebar)}
use:accelerator={'z'}
>
- <span class="icon-lg icon-[material-symbols--dock-to-right]" />
+ <span class="icon-lg icon-[material-symbols--dock-to-right]"></span>
</button>
--
cgit v1.2.3-2-gb3c3