Use spaces, run prettier on project
This commit is contained in:
ZXY101
@@ -1,32 +1,32 @@
|
||||
<script lang="ts">
|
||||
import { catalog } from '$lib/catalog';
|
||||
import { Button } from 'flowbite-svelte';
|
||||
import CatalogItem from './CatalogItem.svelte';
|
||||
import { promptConfirmation } from '$lib/util';
|
||||
import { db } from '$lib/catalog/db';
|
||||
import { catalog } from '$lib/catalog';
|
||||
import { Button } from 'flowbite-svelte';
|
||||
import CatalogItem from './CatalogItem.svelte';
|
||||
import { promptConfirmation } from '$lib/util';
|
||||
import { db } from '$lib/catalog/db';
|
||||
|
||||
function onClear() {
|
||||
promptConfirmation('Are you sure you want to clear your catalog?', () => db.catalog.clear());
|
||||
}
|
||||
function onClear() {
|
||||
promptConfirmation('Are you sure you want to clear your catalog?', () => db.catalog.clear());
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if $catalog}
|
||||
{#if $catalog.length > 0}
|
||||
<div class="flex flex-col gap-5">
|
||||
<div class="sm:block flex-col flex">
|
||||
<Button outline color="red" class="float-right" on:click={onClear}>Clear catalog</Button>
|
||||
</div>
|
||||
<div class="flex flex-row gap-5 flex-wrap">
|
||||
{#each $catalog as { id, manga } (id)}
|
||||
<CatalogItem {manga} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-center p-20">
|
||||
<p>Your catalog is currently empty.</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if $catalog.length > 0}
|
||||
<div class="flex flex-col gap-5">
|
||||
<div class="sm:block flex-col flex">
|
||||
<Button outline color="red" class="float-right" on:click={onClear}>Clear catalog</Button>
|
||||
</div>
|
||||
<div class="flex flex-row gap-5 flex-wrap">
|
||||
{#each $catalog as { id, manga } (id)}
|
||||
<CatalogItem {manga} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-center p-20">
|
||||
<p>Your catalog is currently empty.</p>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<p>Loading...</p>
|
||||
<p>Loading...</p>
|
||||
{/if}
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
<script lang="ts">
|
||||
import { currentManga } from '$lib/catalog';
|
||||
import type { Volume } from '$lib/types';
|
||||
export let manga: Volume[];
|
||||
const { volumeName, files, mokuroData } = manga[0];
|
||||
import { currentManga } from '$lib/catalog';
|
||||
import type { Volume } from '$lib/types';
|
||||
export let manga: Volume[];
|
||||
const { volumeName, files, mokuroData } = manga[0];
|
||||
|
||||
function onClick() {
|
||||
currentManga.set(manga);
|
||||
}
|
||||
function onClick() {
|
||||
currentManga.set(manga);
|
||||
}
|
||||
</script>
|
||||
|
||||
<a href={volumeName} on:click={onClick}>
|
||||
<div class="flex flex-col gap-[5px] text-center">
|
||||
{mokuroData.title}
|
||||
{#if files}
|
||||
<img
|
||||
src={URL.createObjectURL(Object.values(files)[0])}
|
||||
alt="img"
|
||||
class="object-contain w-[250px] h-[350px] bg-black border-gray-900 border"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex flex-col gap-[5px] text-center">
|
||||
{mokuroData.title}
|
||||
{#if files}
|
||||
<img
|
||||
src={URL.createObjectURL(Object.values(files)[0])}
|
||||
alt="img"
|
||||
class="object-contain w-[250px] h-[350px] bg-black border-gray-900 border"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
<script lang="ts">
|
||||
import { confirmationPopupStore } from '$lib/util';
|
||||
import { Button, Modal } from 'flowbite-svelte';
|
||||
import { ExclamationCircleOutline } from 'flowbite-svelte-icons';
|
||||
import { onMount } from 'svelte';
|
||||
import { confirmationPopupStore } from '$lib/util';
|
||||
import { Button, Modal } from 'flowbite-svelte';
|
||||
import { ExclamationCircleOutline } from 'flowbite-svelte-icons';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let open = false;
|
||||
let open = false;
|
||||
|
||||
onMount(() => {
|
||||
confirmationPopupStore.subscribe((value) => {
|
||||
open = Boolean(value);
|
||||
});
|
||||
});
|
||||
onMount(() => {
|
||||
confirmationPopupStore.subscribe((value) => {
|
||||
open = Boolean(value);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<Modal bind:open size="xs" autoclose outsideclose>
|
||||
<div class="text-center">
|
||||
<ExclamationCircleOutline class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" />
|
||||
<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
|
||||
{$confirmationPopupStore?.message}
|
||||
</h3>
|
||||
<Button color="red" class="mr-2" on:click={$confirmationPopupStore?.onConfirm}>Yes</Button>
|
||||
<Button color="alternative">No</Button>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<ExclamationCircleOutline class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" />
|
||||
<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
|
||||
{$confirmationPopupStore?.message}
|
||||
</h3>
|
||||
<Button color="red" class="mr-2" on:click={$confirmationPopupStore?.onConfirm}>Yes</Button>
|
||||
<Button color="alternative">No</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
<script lang="ts">
|
||||
import { A, Fileupload, Label } from 'flowbite-svelte';
|
||||
import { A, Fileupload, Label } from 'flowbite-svelte';
|
||||
|
||||
export let files: FileList | undefined = undefined;
|
||||
export let onUpload: ((files: FileList) => void) | undefined = undefined;
|
||||
export let files: FileList | undefined = undefined;
|
||||
export let onUpload: ((files: FileList) => void) | undefined = undefined;
|
||||
|
||||
let input: HTMLInputElement;
|
||||
let input: HTMLInputElement;
|
||||
|
||||
function handleChange() {
|
||||
if (files && onUpload) {
|
||||
onUpload(files);
|
||||
}
|
||||
}
|
||||
function handleChange() {
|
||||
if (files && onUpload) {
|
||||
onUpload(files);
|
||||
}
|
||||
}
|
||||
|
||||
function onClick() {
|
||||
input.click();
|
||||
}
|
||||
function onClick() {
|
||||
input.click();
|
||||
}
|
||||
</script>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
bind:files
|
||||
bind:this={input}
|
||||
on:change={handleChange}
|
||||
{...$$restProps}
|
||||
class="hidden"
|
||||
type="file"
|
||||
bind:files
|
||||
bind:this={input}
|
||||
on:change={handleChange}
|
||||
{...$$restProps}
|
||||
class="hidden"
|
||||
/>
|
||||
|
||||
<A on:click={onClick}><slot>Upload</slot></A>
|
||||
|
||||
@@ -1,51 +1,51 @@
|
||||
<script lang="ts">
|
||||
import { Navbar, NavBrand } from 'flowbite-svelte';
|
||||
import { UserSettingsSolid, UploadSolid } from 'flowbite-svelte-icons';
|
||||
import { afterNavigate } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
import Settings from './Settings.svelte';
|
||||
import UploadModal from './UploadModal.svelte';
|
||||
import { settings } from '$lib/settings';
|
||||
import { Navbar, NavBrand } from 'flowbite-svelte';
|
||||
import { UserSettingsSolid, UploadSolid } from 'flowbite-svelte-icons';
|
||||
import { afterNavigate } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
import Settings from './Settings.svelte';
|
||||
import UploadModal from './UploadModal.svelte';
|
||||
import { settings } from '$lib/settings';
|
||||
|
||||
let settingsHidden = true;
|
||||
let uploadModalOpen = false;
|
||||
let isReader = false;
|
||||
let settingsHidden = true;
|
||||
let uploadModalOpen = false;
|
||||
let isReader = false;
|
||||
|
||||
function openSettings() {
|
||||
settingsHidden = false;
|
||||
}
|
||||
function openSettings() {
|
||||
settingsHidden = false;
|
||||
}
|
||||
|
||||
afterNavigate(() => {
|
||||
isReader = $page.route.id === '/[manga]/[volume]';
|
||||
afterNavigate(() => {
|
||||
isReader = $page.route.id === '/[manga]/[volume]';
|
||||
|
||||
if (isReader) {
|
||||
window.document.body.classList.add('reader');
|
||||
} else {
|
||||
window.document.body.classList.remove('reader');
|
||||
}
|
||||
});
|
||||
if (isReader) {
|
||||
window.document.body.classList.add('reader');
|
||||
} else {
|
||||
window.document.body.classList.remove('reader');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="relative z-10">
|
||||
<Navbar hidden={isReader}>
|
||||
<NavBrand href="/">
|
||||
<span class="text-xl font-semibold dark:text-white">Mokuro</span>
|
||||
</NavBrand>
|
||||
<div class="flex md:order-2 gap-5">
|
||||
<UserSettingsSolid class="hover:text-primary-700" on:click={openSettings} />
|
||||
<UploadSolid class="hover:text-primary-700" on:click={() => (uploadModalOpen = true)} />
|
||||
</div>
|
||||
</Navbar>
|
||||
{#if isReader}
|
||||
<button
|
||||
on:click={openSettings}
|
||||
class="hover:text-primary-700 fixed opacity-50 hover:opacity-100 right-10 top-5 p-10 m-[-2.5rem]"
|
||||
>
|
||||
<div style:background-color={$settings.backgroundColor} class="absolute">
|
||||
<UserSettingsSolid class="mix-blend-difference" />
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
<Navbar hidden={isReader}>
|
||||
<NavBrand href="/">
|
||||
<span class="text-xl font-semibold dark:text-white">Mokuro</span>
|
||||
</NavBrand>
|
||||
<div class="flex md:order-2 gap-5">
|
||||
<UserSettingsSolid class="hover:text-primary-700" on:click={openSettings} />
|
||||
<UploadSolid class="hover:text-primary-700" on:click={() => (uploadModalOpen = true)} />
|
||||
</div>
|
||||
</Navbar>
|
||||
{#if isReader}
|
||||
<button
|
||||
on:click={openSettings}
|
||||
class="hover:text-primary-700 fixed opacity-50 hover:opacity-100 right-10 top-5 p-10 m-[-2.5rem]"
|
||||
>
|
||||
<div style:background-color={$settings.backgroundColor} class="absolute">
|
||||
<UserSettingsSolid class="mix-blend-difference" />
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<Settings bind:hidden={settingsHidden} />
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
<script lang="ts">
|
||||
import type { Page } from '$lib/types';
|
||||
import TextBoxes from './TextBoxes.svelte';
|
||||
import type { Page } from '$lib/types';
|
||||
import TextBoxes from './TextBoxes.svelte';
|
||||
|
||||
export let page: Page;
|
||||
export let src: Blob;
|
||||
export let page: Page;
|
||||
export let src: Blob;
|
||||
</script>
|
||||
|
||||
<div
|
||||
draggable="false"
|
||||
style:width={`${page.img_width}px`}
|
||||
style:height={`${page.img_height}px`}
|
||||
style:background-image={`url(${URL.createObjectURL(src)})`}
|
||||
class="relative"
|
||||
draggable="false"
|
||||
style:width={`${page.img_width}px`}
|
||||
style:height={`${page.img_height}px`}
|
||||
style:background-image={`url(${URL.createObjectURL(src)})`}
|
||||
class="relative"
|
||||
>
|
||||
<TextBoxes {page} />
|
||||
<TextBoxes {page} />
|
||||
</div>
|
||||
|
||||
@@ -1,133 +1,122 @@
|
||||
<script lang="ts">
|
||||
import { currentVolume } from '$lib/catalog';
|
||||
import {
|
||||
Panzoom,
|
||||
keepZoomStart,
|
||||
zoomDefault,
|
||||
zoomFitToScreen,
|
||||
zoomFitToWidth,
|
||||
zoomOriginal
|
||||
} from '$lib/panzoom';
|
||||
import { progress, settings, updateProgress } from '$lib/settings';
|
||||
import { clamp } from '$lib/util';
|
||||
import { Button, Input, Popover, Range } from 'flowbite-svelte';
|
||||
import MangaPage from './MangaPage.svelte';
|
||||
import {
|
||||
ChervonDoubleLeftSolid,
|
||||
ChervonDoubleRightSolid,
|
||||
ChevronLeftSolid
|
||||
} from 'flowbite-svelte-icons';
|
||||
import { onMount } from 'svelte';
|
||||
import { currentVolume } from '$lib/catalog';
|
||||
import { Panzoom, zoomDefault } from '$lib/panzoom';
|
||||
import { progress, settings, updateProgress } from '$lib/settings';
|
||||
import { clamp } from '$lib/util';
|
||||
import { Input, Popover, Range } from 'flowbite-svelte';
|
||||
import MangaPage from './MangaPage.svelte';
|
||||
import { ChervonDoubleLeftSolid, ChervonDoubleRightSolid } from 'flowbite-svelte-icons';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
const volume = $currentVolume;
|
||||
const pages = volume?.mokuroData.pages;
|
||||
const volume = $currentVolume;
|
||||
const pages = volume?.mokuroData.pages;
|
||||
|
||||
$: page = $progress?.[volume?.mokuroData.volume_uuid || 0] || 1;
|
||||
$: index = page - 1;
|
||||
$: navAmount = $settings.singlePageView ? 1 : 2;
|
||||
$: page = $progress?.[volume?.mokuroData.volume_uuid || 0] || 1;
|
||||
$: index = page - 1;
|
||||
$: navAmount = $settings.singlePageView ? 1 : 2;
|
||||
|
||||
let start: Date;
|
||||
let start: Date;
|
||||
|
||||
function mouseDown() {
|
||||
start = new Date();
|
||||
}
|
||||
function mouseDown() {
|
||||
start = new Date();
|
||||
}
|
||||
|
||||
function left() {
|
||||
const newPage = $settings.rightToLeft ? page + navAmount : page - navAmount;
|
||||
changePage(newPage);
|
||||
}
|
||||
function left() {
|
||||
const newPage = $settings.rightToLeft ? page + navAmount : page - navAmount;
|
||||
changePage(newPage);
|
||||
}
|
||||
|
||||
function right() {
|
||||
const newPage = $settings.rightToLeft ? page - navAmount : page + navAmount;
|
||||
changePage(newPage);
|
||||
}
|
||||
function right() {
|
||||
const newPage = $settings.rightToLeft ? page - navAmount : page + navAmount;
|
||||
changePage(newPage);
|
||||
}
|
||||
|
||||
function changePage(newPage: number, ingoreTimeOut = false) {
|
||||
const end = new Date();
|
||||
const clickDuration = ingoreTimeOut ? 0 : end.getTime() - start?.getTime();
|
||||
function changePage(newPage: number, ingoreTimeOut = false) {
|
||||
const end = new Date();
|
||||
const clickDuration = ingoreTimeOut ? 0 : end.getTime() - start?.getTime();
|
||||
|
||||
if (pages && volume && clickDuration < 200) {
|
||||
updateProgress(volume.mokuroData.volume_uuid, clamp(newPage, 1, pages?.length));
|
||||
zoomDefault();
|
||||
}
|
||||
}
|
||||
if (pages && volume && clickDuration < 200) {
|
||||
updateProgress(volume.mokuroData.volume_uuid, clamp(newPage, 1, pages?.length));
|
||||
zoomDefault();
|
||||
}
|
||||
}
|
||||
|
||||
$: manualPage = page;
|
||||
$: pageDisplay = `${page}/${pages?.length}`;
|
||||
$: manualPage = page;
|
||||
$: pageDisplay = `${page}/${pages?.length}`;
|
||||
|
||||
function onInputClick(this: any) {
|
||||
this.select();
|
||||
}
|
||||
function onInputClick(this: any) {
|
||||
this.select();
|
||||
}
|
||||
|
||||
function onManualPageChange() {
|
||||
changePage(manualPage, true);
|
||||
}
|
||||
function onManualPageChange() {
|
||||
changePage(manualPage, true);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
zoomDefault();
|
||||
});
|
||||
onMount(() => {
|
||||
zoomDefault();
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:window on:resize={zoomDefault} />
|
||||
{#if volume && pages}
|
||||
<Popover placement="bottom-end" trigger="click" triggeredBy="#page-num" class="z-20">
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex flex-row items-center gap-5 z-10">
|
||||
<ChervonDoubleLeftSolid
|
||||
on:click={() => changePage($settings.rightToLeft ? pages.length : 1, true)}
|
||||
class="hover:text-primary-600"
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
size="sm"
|
||||
defaultClass="select-all"
|
||||
bind:value={manualPage}
|
||||
on:click={onInputClick}
|
||||
on:change={onManualPageChange}
|
||||
/>
|
||||
<ChervonDoubleRightSolid
|
||||
on:click={() => changePage($settings.rightToLeft ? 1 : pages.length, true)}
|
||||
class="hover:text-primary-600"
|
||||
/>
|
||||
</div>
|
||||
<Range min={1} max={pages.length} bind:value={manualPage} on:change={onManualPageChange} />
|
||||
</div>
|
||||
</Popover>
|
||||
<button
|
||||
class="absolute opacity-50 left-5 top-5 z-10 mix-blend-difference"
|
||||
class:hidden={!$settings.pageNum}
|
||||
id="page-num"
|
||||
>
|
||||
{pageDisplay}
|
||||
</button>
|
||||
<div class="flex">
|
||||
<Panzoom>
|
||||
<button
|
||||
class="h-full fixed -left-1/2 z-10 w-1/2 hover:bg-slate-400 opacity-[0.01] justify-items-center"
|
||||
on:mousedown={mouseDown}
|
||||
on:mouseup={left}
|
||||
/>
|
||||
<button
|
||||
class="h-full fixed -right-1/2 z-10 w-1/2 hover:bg-slate-400 opacity-[0.01]"
|
||||
on:mousedown={mouseDown}
|
||||
on:mouseup={right}
|
||||
/>
|
||||
<div class="flex flex-row">
|
||||
{#if !$settings.singlePageView && index + 1 < pages.length}
|
||||
<MangaPage page={pages[index + 1]} src={Object.values(volume?.files)[index + 1]} />
|
||||
{/if}
|
||||
<MangaPage page={pages[index]} src={Object.values(volume?.files)[index]} />
|
||||
</div>
|
||||
</Panzoom>
|
||||
</div>
|
||||
<button
|
||||
on:mousedown={mouseDown}
|
||||
on:mouseup={left}
|
||||
class="left-0 top-0 absolute h-full w-[50px] hover:bg-slate-400 opacity-[0.01]"
|
||||
/>
|
||||
<button
|
||||
on:mousedown={mouseDown}
|
||||
on:mouseup={right}
|
||||
class="right-0 top-0 absolute h-full w-[50px] hover:bg-slate-400 opacity-[0.01]"
|
||||
/>
|
||||
<Popover placement="bottom-end" trigger="click" triggeredBy="#page-num" class="z-20">
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex flex-row items-center gap-5 z-10">
|
||||
<ChervonDoubleLeftSolid
|
||||
on:click={() => changePage($settings.rightToLeft ? pages.length : 1, true)}
|
||||
class="hover:text-primary-600"
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
size="sm"
|
||||
defaultClass="select-all"
|
||||
bind:value={manualPage}
|
||||
on:click={onInputClick}
|
||||
on:change={onManualPageChange}
|
||||
/>
|
||||
<ChervonDoubleRightSolid
|
||||
on:click={() => changePage($settings.rightToLeft ? 1 : pages.length, true)}
|
||||
class="hover:text-primary-600"
|
||||
/>
|
||||
</div>
|
||||
<Range min={1} max={pages.length} bind:value={manualPage} on:change={onManualPageChange} />
|
||||
</div>
|
||||
</Popover>
|
||||
<button
|
||||
class="absolute opacity-50 left-5 top-5 z-10 mix-blend-difference"
|
||||
class:hidden={!$settings.pageNum}
|
||||
id="page-num"
|
||||
>
|
||||
{pageDisplay}
|
||||
</button>
|
||||
<div class="flex">
|
||||
<Panzoom>
|
||||
<button
|
||||
class="h-full fixed -left-1/2 z-10 w-1/2 hover:bg-slate-400 opacity-[0.01] justify-items-center"
|
||||
on:mousedown={mouseDown}
|
||||
on:mouseup={left}
|
||||
/>
|
||||
<button
|
||||
class="h-full fixed -right-1/2 z-10 w-1/2 hover:bg-slate-400 opacity-[0.01]"
|
||||
on:mousedown={mouseDown}
|
||||
on:mouseup={right}
|
||||
/>
|
||||
<div class="flex flex-row">
|
||||
{#if !$settings.singlePageView && index + 1 < pages.length}
|
||||
<MangaPage page={pages[index + 1]} src={Object.values(volume?.files)[index + 1]} />
|
||||
{/if}
|
||||
<MangaPage page={pages[index]} src={Object.values(volume?.files)[index]} />
|
||||
</div>
|
||||
</Panzoom>
|
||||
</div>
|
||||
<button
|
||||
on:mousedown={mouseDown}
|
||||
on:mouseup={left}
|
||||
class="left-0 top-0 absolute h-full w-[50px] hover:bg-slate-400 opacity-[0.01]"
|
||||
/>
|
||||
<button
|
||||
on:mousedown={mouseDown}
|
||||
on:mouseup={right}
|
||||
class="right-0 top-0 absolute h-full w-[50px] hover:bg-slate-400 opacity-[0.01]"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@@ -1,94 +1,94 @@
|
||||
<script lang="ts">
|
||||
import { clamp } from '$lib/util';
|
||||
import type { Page } from '$lib/types';
|
||||
import { settings } from '$lib/settings';
|
||||
import { clamp } from '$lib/util';
|
||||
import type { Page } from '$lib/types';
|
||||
import { settings } from '$lib/settings';
|
||||
|
||||
export let page: Page;
|
||||
export let page: Page;
|
||||
|
||||
$: textBoxes = page.blocks.map((block) => {
|
||||
const { img_height, img_width } = page;
|
||||
const { box, font_size, lines, vertical } = block;
|
||||
$: textBoxes = page.blocks.map((block) => {
|
||||
const { img_height, img_width } = page;
|
||||
const { box, font_size, lines, vertical } = block;
|
||||
|
||||
let [_xmin, _ymin, _xmax, _ymax] = box;
|
||||
let [_xmin, _ymin, _xmax, _ymax] = box;
|
||||
|
||||
const xmin = clamp(_xmin, 0, img_width);
|
||||
const ymin = clamp(_ymin, 0, img_height);
|
||||
const xmax = clamp(_xmax, 0, img_width);
|
||||
const ymax = clamp(_ymax, 0, img_height);
|
||||
const xmin = clamp(_xmin, 0, img_width);
|
||||
const ymin = clamp(_ymin, 0, img_height);
|
||||
const xmax = clamp(_xmax, 0, img_width);
|
||||
const ymax = clamp(_ymax, 0, img_height);
|
||||
|
||||
const width = xmax - xmin;
|
||||
const height = ymax - ymin;
|
||||
const width = xmax - xmin;
|
||||
const height = ymax - ymin;
|
||||
|
||||
const textBox = {
|
||||
left: `${xmin}px`,
|
||||
top: `${ymin}px`,
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
fontSize: $settings.fontSize === 'auto' ? `${font_size}px` : `${$settings.fontSize}pt`,
|
||||
writingMode: vertical ? 'vertical-rl' : 'horizontal-tb',
|
||||
lines
|
||||
};
|
||||
const textBox = {
|
||||
left: `${xmin}px`,
|
||||
top: `${ymin}px`,
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
fontSize: $settings.fontSize === 'auto' ? `${font_size}px` : `${$settings.fontSize}pt`,
|
||||
writingMode: vertical ? 'vertical-rl' : 'horizontal-tb',
|
||||
lines
|
||||
};
|
||||
|
||||
return textBox;
|
||||
});
|
||||
return textBox;
|
||||
});
|
||||
|
||||
$: fontWeight = $settings.boldFont ? 'bold' : '400';
|
||||
$: display = $settings.displayOCR ? 'block' : 'none';
|
||||
$: border = $settings.textBoxBorders ? '1px solid red' : 'none';
|
||||
$: contenteditable = $settings.textEditable;
|
||||
$: fontWeight = $settings.boldFont ? 'bold' : '400';
|
||||
$: display = $settings.displayOCR ? 'block' : 'none';
|
||||
$: border = $settings.textBoxBorders ? '1px solid red' : 'none';
|
||||
$: contenteditable = $settings.textEditable;
|
||||
</script>
|
||||
|
||||
{#each textBoxes as { fontSize, height, left, lines, top, width, writingMode }, index (`text-box-${index}`)}
|
||||
<div
|
||||
class="text-box"
|
||||
style:width
|
||||
style:height
|
||||
style:left
|
||||
style:top
|
||||
style:font-size={fontSize}
|
||||
style:writing-mode={writingMode}
|
||||
style:font-weight={fontWeight}
|
||||
style:display
|
||||
style:border
|
||||
{contenteditable}
|
||||
>
|
||||
{#each lines as line}
|
||||
<p>{line}</p>
|
||||
{/each}
|
||||
</div>
|
||||
<div
|
||||
class="text-box"
|
||||
style:width
|
||||
style:height
|
||||
style:left
|
||||
style:top
|
||||
style:font-size={fontSize}
|
||||
style:writing-mode={writingMode}
|
||||
style:font-weight={fontWeight}
|
||||
style:display
|
||||
style:border
|
||||
{contenteditable}
|
||||
>
|
||||
{#each lines as line}
|
||||
<p>{line}</p>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<style>
|
||||
.text-box {
|
||||
color: black;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
line-height: 1.1em;
|
||||
font-size: 16pt;
|
||||
white-space: nowrap;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
z-index: 1000;
|
||||
}
|
||||
.text-box {
|
||||
color: black;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
line-height: 1.1em;
|
||||
font-size: 16pt;
|
||||
white-space: nowrap;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.text-box:focus,
|
||||
.text-box:hover {
|
||||
background: rgb(255, 255, 255);
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
z-index: 999 !important;
|
||||
}
|
||||
.text-box:focus,
|
||||
.text-box:hover {
|
||||
background: rgb(255, 255, 255);
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
z-index: 999 !important;
|
||||
}
|
||||
|
||||
.text-box p {
|
||||
display: none;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.1em;
|
||||
line-height: 1.1em;
|
||||
margin: 0;
|
||||
background-color: rgb(255, 255, 255);
|
||||
font-weight: var(--bold);
|
||||
}
|
||||
.text-box p {
|
||||
display: none;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.1em;
|
||||
line-height: 1.1em;
|
||||
margin: 0;
|
||||
background-color: rgb(255, 255, 255);
|
||||
font-weight: var(--bold);
|
||||
}
|
||||
|
||||
.text-box:focus p,
|
||||
.text-box:hover p {
|
||||
display: table;
|
||||
}
|
||||
.text-box:focus p,
|
||||
.text-box:hover p {
|
||||
display: table;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,113 +1,113 @@
|
||||
<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';
|
||||
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
|
||||
};
|
||||
let transitionParams = {
|
||||
x: 320,
|
||||
duration: 200,
|
||||
easing: sineIn
|
||||
};
|
||||
|
||||
export let hidden = true;
|
||||
export let hidden = true;
|
||||
|
||||
$: zoomModeValue = $settings.zoomDefault;
|
||||
$: fontSizeValue = $settings.fontSize;
|
||||
$: 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 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' }
|
||||
];
|
||||
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 }[];
|
||||
$: 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 onBackgroundColor(event: Event) {
|
||||
updateSetting('backgroundColor', (event.target as HTMLInputElement).value);
|
||||
}
|
||||
|
||||
function onSelectChange(event: Event, setting: SettingsKey) {
|
||||
updateSetting(setting, (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);
|
||||
}
|
||||
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"
|
||||
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}
|
||||
bind: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}
|
||||
bind: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>
|
||||
<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}
|
||||
bind: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}
|
||||
bind: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>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { snackbarStore } from '$lib/util/snackbar';
|
||||
import { Toast } from 'flowbite-svelte';
|
||||
import { snackbarStore } from '$lib/util/snackbar';
|
||||
import { Toast } from 'flowbite-svelte';
|
||||
</script>
|
||||
|
||||
{#if $snackbarStore?.message && $snackbarStore?.visible}
|
||||
<Toast position="bottom-right">{$snackbarStore?.message}</Toast>
|
||||
<Toast position="bottom-right">{$snackbarStore?.message}</Toast>
|
||||
{/if}
|
||||
|
||||
@@ -1,152 +1,152 @@
|
||||
<script lang="ts">
|
||||
import { Button, Dropzone, Modal, Spinner } from 'flowbite-svelte';
|
||||
import FileUpload from './FileUpload.svelte';
|
||||
import { processFiles } from '$lib/upload';
|
||||
import { onMount } from 'svelte';
|
||||
import { scanFiles } from '$lib/upload';
|
||||
import { formatBytes } from '$lib/util/upload';
|
||||
import { catalog } from '$lib/catalog';
|
||||
import { Button, Dropzone, Modal, Spinner } from 'flowbite-svelte';
|
||||
import FileUpload from './FileUpload.svelte';
|
||||
import { processFiles } from '$lib/upload';
|
||||
import { onMount } from 'svelte';
|
||||
import { scanFiles } from '$lib/upload';
|
||||
import { formatBytes } from '$lib/util/upload';
|
||||
import { catalog } from '$lib/catalog';
|
||||
|
||||
export let open = false;
|
||||
export let open = false;
|
||||
|
||||
let promise: Promise<void>;
|
||||
let files: FileList | undefined = undefined;
|
||||
let promise: Promise<void>;
|
||||
let files: FileList | undefined = undefined;
|
||||
|
||||
async function onUpload() {
|
||||
if (files) {
|
||||
promise = processFiles([...files]).then(() => {
|
||||
open = false;
|
||||
});
|
||||
} else if (draggedFiles) {
|
||||
promise = processFiles(draggedFiles).then(() => {
|
||||
open = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
async function onUpload() {
|
||||
if (files) {
|
||||
promise = processFiles([...files]).then(() => {
|
||||
open = false;
|
||||
});
|
||||
} else if (draggedFiles) {
|
||||
promise = processFiles(draggedFiles).then(() => {
|
||||
open = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
files = undefined;
|
||||
draggedFiles = undefined;
|
||||
}
|
||||
function reset() {
|
||||
files = undefined;
|
||||
draggedFiles = undefined;
|
||||
}
|
||||
|
||||
let storageSpace = 'Loading...';
|
||||
let storageSpace = 'Loading...';
|
||||
|
||||
onMount(() => {
|
||||
navigator.storage.estimate().then(({ usage, quota }) => {
|
||||
if (usage && quota) {
|
||||
storageSpace = `Storage: ${formatBytes(usage)} / ${formatBytes(quota)}`;
|
||||
}
|
||||
});
|
||||
});
|
||||
onMount(() => {
|
||||
navigator.storage.estimate().then(({ usage, quota }) => {
|
||||
if (usage && quota) {
|
||||
storageSpace = `Storage: ${formatBytes(usage)} / ${formatBytes(quota)}`;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
let filePromises: Promise<File>[];
|
||||
let draggedFiles: File[] | undefined;
|
||||
let loading = false;
|
||||
$: disabled = loading || (!draggedFiles && !files);
|
||||
let filePromises: Promise<File>[];
|
||||
let draggedFiles: File[] | undefined;
|
||||
let loading = false;
|
||||
$: disabled = loading || (!draggedFiles && !files);
|
||||
|
||||
const dropHandle = async (event: DragEvent) => {
|
||||
loading = true;
|
||||
draggedFiles = [];
|
||||
filePromises = [];
|
||||
event.preventDefault();
|
||||
activeStyle = defaultStyle;
|
||||
const dropHandle = async (event: DragEvent) => {
|
||||
loading = true;
|
||||
draggedFiles = [];
|
||||
filePromises = [];
|
||||
event.preventDefault();
|
||||
activeStyle = defaultStyle;
|
||||
|
||||
if (event?.dataTransfer?.items) {
|
||||
for (const item of [...event.dataTransfer.items]) {
|
||||
const entry = item.webkitGetAsEntry();
|
||||
if (item.kind === 'file' && entry) {
|
||||
if (entry.isDirectory) {
|
||||
await scanFiles(entry, filePromises);
|
||||
} else {
|
||||
const file = item.getAsFile();
|
||||
if (file) {
|
||||
draggedFiles.push(file);
|
||||
draggedFiles = draggedFiles;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (event?.dataTransfer?.items) {
|
||||
for (const item of [...event.dataTransfer.items]) {
|
||||
const entry = item.webkitGetAsEntry();
|
||||
if (item.kind === 'file' && entry) {
|
||||
if (entry.isDirectory) {
|
||||
await scanFiles(entry, filePromises);
|
||||
} else {
|
||||
const file = item.getAsFile();
|
||||
if (file) {
|
||||
draggedFiles.push(file);
|
||||
draggedFiles = draggedFiles;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (filePromises && filePromises.length > 0) {
|
||||
const files = await Promise.all(filePromises);
|
||||
if (files) {
|
||||
draggedFiles = [...draggedFiles, ...files];
|
||||
}
|
||||
}
|
||||
}
|
||||
if (filePromises && filePromises.length > 0) {
|
||||
const files = await Promise.all(filePromises);
|
||||
if (files) {
|
||||
draggedFiles = [...draggedFiles, ...files];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
loading = false;
|
||||
};
|
||||
loading = false;
|
||||
};
|
||||
|
||||
let defaultStyle =
|
||||
'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600';
|
||||
let highlightStyle =
|
||||
'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:bg-bray-800 dark:bg-gray-700 bg-gray-100 dark:border-gray-600 dark:border-gray-500 dark:bg-gray-600';
|
||||
let defaultStyle =
|
||||
'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600';
|
||||
let highlightStyle =
|
||||
'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:bg-bray-800 dark:bg-gray-700 bg-gray-100 dark:border-gray-600 dark:border-gray-500 dark:bg-gray-600';
|
||||
|
||||
let activeStyle = defaultStyle;
|
||||
let activeStyle = defaultStyle;
|
||||
</script>
|
||||
|
||||
<Modal title="Upload" bind:open outsideclose on:close={reset}>
|
||||
{#await promise}
|
||||
<h2 class="justify-center flex">Loading...</h2>
|
||||
<div class="text-center"><Spinner /></div>
|
||||
{:then}
|
||||
<Dropzone
|
||||
id="dropzone"
|
||||
on:drop={dropHandle}
|
||||
on:dragover={(event) => {
|
||||
event.preventDefault();
|
||||
activeStyle = highlightStyle;
|
||||
}}
|
||||
on:dragleave={(event) => {
|
||||
event.preventDefault();
|
||||
activeStyle = defaultStyle;
|
||||
}}
|
||||
on:click={(event) => {
|
||||
event.preventDefault();
|
||||
}}
|
||||
defaultClass={activeStyle}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="mb-3 w-10 h-10 text-gray-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
|
||||
/></svg
|
||||
>
|
||||
{#if files}
|
||||
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
Upload {files.length}
|
||||
{files.length > 1 ? 'files' : 'file'}?
|
||||
</p>
|
||||
{:else if draggedFiles && draggedFiles.length > 0}
|
||||
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
Upload {draggedFiles.length} hih
|
||||
{draggedFiles.length > 1 ? 'files' : 'file'}?
|
||||
</p>
|
||||
{:else if loading}
|
||||
<Spinner />
|
||||
{:else}
|
||||
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
Drag and drop / <FileUpload bind:files accept=".mokuro,.zip,.cbz" multiple
|
||||
>choose files</FileUpload
|
||||
> /
|
||||
<FileUpload bind:files webkitdirectory>choose directory</FileUpload>
|
||||
</p>
|
||||
{/if}
|
||||
</Dropzone>
|
||||
{#await promise}
|
||||
<h2 class="justify-center flex">Loading...</h2>
|
||||
<div class="text-center"><Spinner /></div>
|
||||
{:then}
|
||||
<Dropzone
|
||||
id="dropzone"
|
||||
on:drop={dropHandle}
|
||||
on:dragover={(event) => {
|
||||
event.preventDefault();
|
||||
activeStyle = highlightStyle;
|
||||
}}
|
||||
on:dragleave={(event) => {
|
||||
event.preventDefault();
|
||||
activeStyle = defaultStyle;
|
||||
}}
|
||||
on:click={(event) => {
|
||||
event.preventDefault();
|
||||
}}
|
||||
defaultClass={activeStyle}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="mb-3 w-10 h-10 text-gray-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
|
||||
/></svg
|
||||
>
|
||||
{#if files}
|
||||
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
Upload {files.length}
|
||||
{files.length > 1 ? 'files' : 'file'}?
|
||||
</p>
|
||||
{:else if draggedFiles && draggedFiles.length > 0}
|
||||
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
Upload {draggedFiles.length} hih
|
||||
{draggedFiles.length > 1 ? 'files' : 'file'}?
|
||||
</p>
|
||||
{:else if loading}
|
||||
<Spinner />
|
||||
{:else}
|
||||
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
Drag and drop / <FileUpload bind:files accept=".mokuro,.zip,.cbz" multiple
|
||||
>choose files</FileUpload
|
||||
> /
|
||||
<FileUpload bind:files webkitdirectory>choose directory</FileUpload>
|
||||
</p>
|
||||
{/if}
|
||||
</Dropzone>
|
||||
|
||||
<p class=" text-sm text-gray-500 dark:text-gray-400 text-center">{storageSpace}</p>
|
||||
<div class="flex flex-1 flex-col gap-2">
|
||||
<Button outline on:click={reset} {disabled} color="dark">Reset</Button>
|
||||
<Button outline on:click={onUpload} {disabled}>Upload</Button>
|
||||
</div>
|
||||
{/await}
|
||||
<p class=" text-sm text-gray-500 dark:text-gray-400 text-center">{storageSpace}</p>
|
||||
<div class="flex flex-1 flex-col gap-2">
|
||||
<Button outline on:click={reset} {disabled} color="dark">Reset</Button>
|
||||
<Button outline on:click={onUpload} {disabled}>Upload</Button>
|
||||
</div>
|
||||
{/await}
|
||||
</Modal>
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { currentVolume } from '$lib/catalog';
|
||||
import type { Volume } from '$lib/types';
|
||||
import { page } from '$app/stores';
|
||||
import { currentVolume } from '$lib/catalog';
|
||||
import type { Volume } from '$lib/types';
|
||||
|
||||
export let volume: Volume;
|
||||
const { volumeName, files } = volume;
|
||||
export let volume: Volume;
|
||||
const { volumeName, files } = volume;
|
||||
|
||||
function onClick() {
|
||||
currentVolume.set(volume);
|
||||
}
|
||||
function onClick() {
|
||||
currentVolume.set(volume);
|
||||
}
|
||||
</script>
|
||||
|
||||
<a href={`${$page.params.manga}/${volumeName}`} on:click={onClick}>
|
||||
<div class="flex flex-col gap-[5px] text-center">
|
||||
{volumeName}
|
||||
{#if files}
|
||||
<img
|
||||
src={URL.createObjectURL(Object.values(files)[0])}
|
||||
alt="img"
|
||||
class="object-contain w-[250px] h-[350px] bg-black border-gray-900 border"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex flex-col gap-[5px] text-center">
|
||||
{volumeName}
|
||||
{#if files}
|
||||
<img
|
||||
src={URL.createObjectURL(Object.values(files)[0])}
|
||||
alt="img"
|
||||
class="object-contain w-[250px] h-[350px] bg-black border-gray-900 border"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user