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

<script lang="ts">
	import { Direction, Layout, type PageFragment } from '$gql/graphql';
	import { type Chunk, getReaderContext, partition } from '$lib/Reader.svelte';
	import { binds } from '$lib/Shortcuts';
	import { src } from '$lib/Utils';
	import ReaderPage from './ReaderPage.svelte';
	import SliderMargin from './components/SliderMargin.svelte';
	import SliderTooltip from './components/SliderTooltip.svelte';

	const reader = getReaderContext();

	let { direction, layout }: { direction: Direction; layout: Layout } = $props();

	function gotoChunk(to: number) {
		if (to < 0 || to >= chunks.length) return;

		reader.page = chunks[to].index;
	}

	function pagesAround(around: number) {
		const pages: PageFragment[] = [];

		const push = (at: number) => {
			if (at < 0 || at >= chunks.length) return;

			pages.push(chunks[at].main);

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

		for (let i = 1; i <= 2; i++) {
			push(lookup[around] + i);
			push(lookup[around] - i);
		}

		return pages;
	}

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

	let [chunks, lookup] = $derived(partition(reader.pages, layout));
	let currentChunk = $derived(chunks[lookup[reader.page]]);
	let { main, secondary } = $derived(currentChunk);

	let reverse = $derived(direction === Direction.RightToLeft);
</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} onclick={clickMain} --justify="center" />
{:else if reverse}
	<ReaderPage page={secondary} onclick={next} --justify="flex-end" />
	<ReaderPage page={main} onclick={prev} --justify="flex-start" />
{:else}
	<ReaderPage page={main} onclick={prev} --justify="flex-end" />
	<ReaderPage page={secondary} onclick={next} --justify="flex-start" />
{/if}

{#snippet pagesIn(chunk: Chunk)}
	{#if chunk.secondary}
		{chunk.index + 1} - {chunk.index + 2}
	{:else}
		{chunk.index + 1}
	{/if}
{/snippet}

<div class="group/slider absolute bottom-0 z-1 flex w-full pt-20">
	<div class:reverse class="flex h-1 w-full transition-[height] group-hover/slider:h-8">
		<SliderMargin>
			{@render pagesIn(currentChunk)}
		</SliderMargin>
		<div class:reverse class="flex w-full bg-gray-400/60 backdrop-blur-2xl">
			{#each chunks as chunk, index}
				<button
					type="button"
					class:read={index <= lookup[reader.page]}
					class="group/page relative grow [&.read]:bg-blue-600/60"
					onclick={() => reader.open(chunk.index)}
					aria-label={`Open page ${chunk.index}`}
				>
					<SliderTooltip>
						{@render pagesIn(chunk)}
					</SliderTooltip>
				</button>
			{/each}
		</div>
		<SliderMargin>
			{reader.pages.length}
		</SliderMargin>
	</div>
</div>

<div class="invisible absolute">
	{#each pagesAround(reader.page) as page}
		<img src={src(page.image, 'full')} alt="" />
	{/each}
</div>

<style>
	.reverse {
		flex-direction: row-reverse;
	}
</style>