<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 ReaderPage from './ReaderPage.svelte'; const reader = getReaderContext(); export let direction: Direction; export let layout: Layout; let chunks: Chunk[] = []; let lookup: number[] = []; let main: PageFragment; let secondary: PageFragment | undefined; function gotoChunk(to: number) { if (to < 0 || to >= chunks.length) return; $reader.page = chunks[to].index; } 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()); function clickMain(event: MouseEvent & { currentTarget: EventTarget | null }) { if (event.currentTarget instanceof Element) { const rect = event.currentTarget.getBoundingClientRect(); if (event.clientX - rect.left < rect.width / 2) { clickLeft(); } else { clickRight(); } } } $: [chunks, lookup] = partition($reader.pages, layout); $: layout, ({ main, secondary } = chunks[lookup[$reader.page]]); </script> <svelte:document use:binds={[ ['ArrowLeft', clickLeft], ['ArrowRight', clickRight], ['ArrowUp', prev], ['ArrowDown', next], ['PageUp', prev], ['PageDown', next], [' ', next], ['Backspace', prev] ]} /> {#if !secondary} <ReaderPage page={main} on:click={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" /> {:else} <ReaderPage page={secondary} on:click={next} --justify="flex-end" /> <ReaderPage page={main} on:click={prev} --justify="flex-start" /> {/if}