path: root/frontend/src/lib/reader/PageView.svelte

<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 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;
	}

	function pagesAround(around: number) {
		const peek = (at: number) => {
			if (at < 0 || at >= chunks.length) return [];

			const pages = [chunks[at].main];

			if (chunks[at].secondary) {
				pages.push(chunks[at].secondary);
			}

			return pages;
		};

		return [...peek(lookup[around] + 1), ...peek(lookup[around] - 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());

	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],
		['Home', () => gotoChunk(0)],
		['End', () => gotoChunk(chunks.length - 1)]
	]}
/>

{#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}
<div class="invisible absolute">
	{#each pagesAround($reader.page) as page}
		<img src={src(page.image, 'full')} alt="" />
	{/each}
</div>