114 lines
3.7 KiB
Svelte
114 lines
3.7 KiB
Svelte
<script lang="ts">
|
|
import { Drawer, CloseButton, Toggle, Select, Input, Label, Button } from 'flowbite-svelte';
|
|
import { UserSettingsSolid } from 'flowbite-svelte-icons';
|
|
import { sineIn } from 'svelte/easing';
|
|
import { resetSettings, settings, updateSetting } from '$lib/settings';
|
|
import type { SettingsKey } from '$lib/settings';
|
|
import { promptConfirmation } from '$lib/util';
|
|
import { zoomDefault } from '$lib/panzoom';
|
|
|
|
let transitionParams = {
|
|
x: 320,
|
|
duration: 200,
|
|
easing: sineIn
|
|
};
|
|
|
|
export let hidden = true;
|
|
|
|
$: zoomModeValue = $settings.zoomDefault;
|
|
$: fontSizeValue = $settings.fontSize;
|
|
|
|
let zoomModes = [
|
|
{ value: 'zoomFitToScreen', name: 'Fit to screen' },
|
|
{ value: 'zoomFitToWidth', name: 'Fit to width' },
|
|
{ value: 'zoomOriginal', name: 'Original size' },
|
|
{ value: 'keepZoom', name: 'Keep zoom' },
|
|
{ value: 'keepZoomStart', name: 'Keep zoom, pan to top' }
|
|
];
|
|
|
|
let fontSizes = [
|
|
{ value: 'auto', name: 'auto' },
|
|
{ value: '9', name: '9' },
|
|
{ value: '10', name: '10' },
|
|
{ value: '11', name: '11' },
|
|
{ value: '12', name: '12' },
|
|
{ value: '14', name: '14' },
|
|
{ value: '16', name: '16' },
|
|
{ value: '18', name: '18' },
|
|
{ value: '20', name: '20' },
|
|
{ value: '24', name: '24' },
|
|
{ value: '32', name: '32' },
|
|
{ value: '40', name: '40' },
|
|
{ value: '48', name: '48' },
|
|
{ value: '60', name: '60' }
|
|
];
|
|
|
|
$: toggles = [
|
|
{ key: 'rightToLeft', text: 'Right to left', value: $settings.rightToLeft },
|
|
{ key: 'singlePageView', text: 'Single page view', value: $settings.singlePageView },
|
|
{ key: 'hasCover', text: 'First page is cover', value: $settings.hasCover },
|
|
{ key: 'textEditable', text: 'Editable text', value: $settings.textEditable },
|
|
{ key: 'textBoxBorders', text: 'Text box borders', value: $settings.textBoxBorders },
|
|
{ key: 'displayOCR', text: 'OCR enabled', value: $settings.displayOCR },
|
|
{ key: 'boldFont', text: 'Bold font', value: $settings.boldFont },
|
|
{ key: 'pageNum', text: 'Show page number', value: $settings.pageNum }
|
|
] as { key: SettingsKey; text: string; value: any }[];
|
|
|
|
function onBackgroundColor(event: Event) {
|
|
updateSetting('backgroundColor', (event.target as HTMLInputElement).value);
|
|
}
|
|
|
|
function onSelectChange(event: Event, setting: SettingsKey) {
|
|
updateSetting(setting, (event.target as HTMLInputElement).value);
|
|
}
|
|
|
|
function onReset() {
|
|
hidden = true;
|
|
promptConfirmation('Restore default settings?', resetSettings);
|
|
}
|
|
</script>
|
|
|
|
<Drawer
|
|
placement="right"
|
|
transitionType="fly"
|
|
width="lg:w-1/4 md:w-1/2 w-full"
|
|
{transitionParams}
|
|
bind:hidden
|
|
id="settings"
|
|
>
|
|
<div class="flex items-center">
|
|
<h5 id="drawer-label" class="inline-flex items-center mb-4 text-base font-semibold">
|
|
<UserSettingsSolid class="w-4 h-4 mr-2.5" />Settings
|
|
</h5>
|
|
<CloseButton on:click={() => (hidden = true)} class="mb-4 dark:text-white" />
|
|
</div>
|
|
<div class="flex flex-col gap-5">
|
|
<div>
|
|
<Label>On page zoom:</Label>
|
|
<Select
|
|
items={zoomModes}
|
|
value={zoomModeValue}
|
|
on:change={(e) => onSelectChange(e, 'zoomDefault')}
|
|
/>
|
|
</div>
|
|
{#each toggles as { key, text, value }}
|
|
<Toggle size="small" checked={value} on:change={() => updateSetting(key, !value)}
|
|
>{text}</Toggle
|
|
>
|
|
{/each}
|
|
<div>
|
|
<Label>Fontsize:</Label>
|
|
<Select
|
|
items={fontSizes}
|
|
value={fontSizeValue}
|
|
on:change={(e) => onSelectChange(e, 'fontSize')}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label>Background color:</Label>
|
|
<Input type="color" on:change={onBackgroundColor} value={$settings.backgroundColor} />
|
|
</div>
|
|
<Button outline on:click={onReset}>Reset</Button>
|
|
</div>
|
|
</Drawer>
|