Use spaces, run prettier on project
This commit is contained in:
ZXY101
@@ -1,30 +1,30 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
root: true,
|
root: true,
|
||||||
extends: [
|
extends: [
|
||||||
'eslint:recommended',
|
'eslint:recommended',
|
||||||
'plugin:@typescript-eslint/recommended',
|
'plugin:@typescript-eslint/recommended',
|
||||||
'plugin:svelte/recommended',
|
'plugin:svelte/recommended',
|
||||||
'prettier'
|
'prettier'
|
||||||
],
|
],
|
||||||
parser: '@typescript-eslint/parser',
|
parser: '@typescript-eslint/parser',
|
||||||
plugins: ['@typescript-eslint'],
|
plugins: ['@typescript-eslint'],
|
||||||
parserOptions: {
|
parserOptions: {
|
||||||
sourceType: 'module',
|
sourceType: 'module',
|
||||||
ecmaVersion: 2020,
|
ecmaVersion: 2020,
|
||||||
extraFileExtensions: ['.svelte']
|
extraFileExtensions: ['.svelte']
|
||||||
},
|
},
|
||||||
env: {
|
env: {
|
||||||
browser: true,
|
browser: true,
|
||||||
es2017: true,
|
es2017: true,
|
||||||
node: true
|
node: true
|
||||||
},
|
},
|
||||||
overrides: [
|
overrides: [
|
||||||
{
|
{
|
||||||
files: ['*.svelte'],
|
files: ['*.svelte'],
|
||||||
parser: 'svelte-eslint-parser',
|
parser: 'svelte-eslint-parser',
|
||||||
parserOptions: {
|
parserOptions: {
|
||||||
parser: '@typescript-eslint/parser'
|
parser: '@typescript-eslint/parser'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|||||||
15
.prettierrc
15
.prettierrc
@@ -1,9 +1,10 @@
|
|||||||
{
|
{
|
||||||
"useTabs": true,
|
"useTabs": false,
|
||||||
"singleQuote": true,
|
"tabWidth": 2,
|
||||||
"trailingComma": "none",
|
"singleQuote": true,
|
||||||
"printWidth": 100,
|
"trailingComma": "none",
|
||||||
"plugins": ["prettier-plugin-svelte"],
|
"printWidth": 100,
|
||||||
"pluginSearchDirs": ["."],
|
"plugins": ["prettier-plugin-svelte"],
|
||||||
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
"pluginSearchDirs": ["."],
|
||||||
|
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
82
package.json
82
package.json
@@ -1,43 +1,43 @@
|
|||||||
{
|
{
|
||||||
"name": "z-reader",
|
"name": "z-reader",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite dev",
|
"dev": "vite dev",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||||
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
||||||
"format": "prettier --plugin-search-dir . --write ."
|
"format": "prettier --plugin-search-dir . --write ."
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@sveltejs/adapter-auto": "^2.0.0",
|
"@sveltejs/adapter-auto": "^2.0.0",
|
||||||
"@sveltejs/kit": "^1.20.4",
|
"@sveltejs/kit": "^1.20.4",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.45.0",
|
"@typescript-eslint/eslint-plugin": "^5.45.0",
|
||||||
"@typescript-eslint/parser": "^5.45.0",
|
"@typescript-eslint/parser": "^5.45.0",
|
||||||
"autoprefixer": "^10.4.14",
|
"autoprefixer": "^10.4.14",
|
||||||
"eslint": "^8.28.0",
|
"eslint": "^8.28.0",
|
||||||
"eslint-config-prettier": "^8.5.0",
|
"eslint-config-prettier": "^8.5.0",
|
||||||
"eslint-plugin-svelte": "^2.30.0",
|
"eslint-plugin-svelte": "^2.30.0",
|
||||||
"flowbite-svelte": "^0.44.5",
|
"flowbite-svelte": "^0.44.5",
|
||||||
"flowbite-svelte-icons": "^0.4.2",
|
"flowbite-svelte-icons": "^0.4.2",
|
||||||
"postcss": "^8.4.24",
|
"postcss": "^8.4.24",
|
||||||
"postcss-load-config": "^4.0.1",
|
"postcss-load-config": "^4.0.1",
|
||||||
"prettier": "^2.8.0",
|
"prettier": "^2.8.0",
|
||||||
"prettier-plugin-svelte": "^2.10.1",
|
"prettier-plugin-svelte": "^2.10.1",
|
||||||
"sass": "^1.64.2",
|
"sass": "^1.64.2",
|
||||||
"svelte": "^4.0.5",
|
"svelte": "^4.0.5",
|
||||||
"svelte-check": "^3.4.3",
|
"svelte-check": "^3.4.3",
|
||||||
"tailwindcss": "^3.3.2",
|
"tailwindcss": "^3.3.2",
|
||||||
"tslib": "^2.4.1",
|
"tslib": "^2.4.1",
|
||||||
"typescript": "^5.0.0",
|
"typescript": "^5.0.0",
|
||||||
"vite": "^4.4.2"
|
"vite": "^4.4.2"
|
||||||
},
|
},
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@zip.js/zip.js": "^2.7.20",
|
"@zip.js/zip.js": "^2.7.20",
|
||||||
"dexie": "^4.0.1-alpha.25",
|
"dexie": "^4.0.1-alpha.25",
|
||||||
"panzoom": "^9.4.3"
|
"panzoom": "^9.4.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,12 +2,12 @@ const tailwindcss = require('tailwindcss');
|
|||||||
const autoprefixer = require('autoprefixer');
|
const autoprefixer = require('autoprefixer');
|
||||||
|
|
||||||
const config = {
|
const config = {
|
||||||
plugins: [
|
plugins: [
|
||||||
//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
|
//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
|
||||||
tailwindcss(),
|
tailwindcss(),
|
||||||
//But others, like autoprefixer, need to run after,
|
//But others, like autoprefixer, need to run after,
|
||||||
autoprefixer
|
autoprefixer
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = config;
|
module.exports = config;
|
||||||
|
|||||||
12
src/app.d.ts
vendored
12
src/app.d.ts
vendored
@@ -1,12 +1,12 @@
|
|||||||
// See https://kit.svelte.dev/docs/types#app
|
// See https://kit.svelte.dev/docs/types#app
|
||||||
// for information about these interfaces
|
// for information about these interfaces
|
||||||
declare global {
|
declare global {
|
||||||
namespace App {
|
namespace App {
|
||||||
// interface Error {}
|
// interface Error {}
|
||||||
// interface Locals {}
|
// interface Locals {}
|
||||||
// interface PageData {}
|
// interface PageData {}
|
||||||
// interface Platform {}
|
// interface Platform {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export {};
|
export {};
|
||||||
|
|||||||
21
src/app.html
21
src/app.html
@@ -1,12 +1,15 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" class="dark">
|
<html lang="en" class="dark">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
<meta name="viewport" content="width=device-width, height=device-height,initial-scale=1, minimum-scale=1, user-scalable=no" />
|
<meta
|
||||||
%sveltekit.head%
|
name="viewport"
|
||||||
</head>
|
content="width=device-width, height=device-height,initial-scale=1, minimum-scale=1, user-scalable=no"
|
||||||
<body data-sveltekit-preload-data="hover">
|
/>
|
||||||
<div style="display: contents">%sveltekit.body%</div>
|
%sveltekit.head%
|
||||||
</body>
|
</head>
|
||||||
|
<body data-sveltekit-preload-data="hover">
|
||||||
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import type { Volume } from "$lib/types";
|
import type { Volume } from '$lib/types';
|
||||||
import { writable } from "svelte/store";
|
import { writable } from 'svelte/store';
|
||||||
import { db } from "$lib/catalog/db";
|
import { db } from '$lib/catalog/db';
|
||||||
import { liveQuery } from "dexie";
|
import { liveQuery } from 'dexie';
|
||||||
export const currentManga = writable<Volume[] | undefined>(undefined);
|
export const currentManga = writable<Volume[] | undefined>(undefined);
|
||||||
export const currentVolume = writable<Volume | undefined>(undefined);
|
export const currentVolume = writable<Volume | undefined>(undefined);
|
||||||
export const catalog = liveQuery(() => db.catalog.toArray());
|
export const catalog = liveQuery(() => db.catalog.toArray());
|
||||||
|
|||||||
@@ -1,32 +1,32 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { catalog } from '$lib/catalog';
|
import { catalog } from '$lib/catalog';
|
||||||
import { Button } from 'flowbite-svelte';
|
import { Button } from 'flowbite-svelte';
|
||||||
import CatalogItem from './CatalogItem.svelte';
|
import CatalogItem from './CatalogItem.svelte';
|
||||||
import { promptConfirmation } from '$lib/util';
|
import { promptConfirmation } from '$lib/util';
|
||||||
import { db } from '$lib/catalog/db';
|
import { db } from '$lib/catalog/db';
|
||||||
|
|
||||||
function onClear() {
|
function onClear() {
|
||||||
promptConfirmation('Are you sure you want to clear your catalog?', () => db.catalog.clear());
|
promptConfirmation('Are you sure you want to clear your catalog?', () => db.catalog.clear());
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if $catalog}
|
{#if $catalog}
|
||||||
{#if $catalog.length > 0}
|
{#if $catalog.length > 0}
|
||||||
<div class="flex flex-col gap-5">
|
<div class="flex flex-col gap-5">
|
||||||
<div class="sm:block flex-col flex">
|
<div class="sm:block flex-col flex">
|
||||||
<Button outline color="red" class="float-right" on:click={onClear}>Clear catalog</Button>
|
<Button outline color="red" class="float-right" on:click={onClear}>Clear catalog</Button>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-row gap-5 flex-wrap">
|
<div class="flex flex-row gap-5 flex-wrap">
|
||||||
{#each $catalog as { id, manga } (id)}
|
{#each $catalog as { id, manga } (id)}
|
||||||
<CatalogItem {manga} />
|
<CatalogItem {manga} />
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="text-center p-20">
|
<div class="text-center p-20">
|
||||||
<p>Your catalog is currently empty.</p>
|
<p>Your catalog is currently empty.</p>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{:else}
|
{:else}
|
||||||
<p>Loading...</p>
|
<p>Loading...</p>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@@ -1,23 +1,23 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { currentManga } from '$lib/catalog';
|
import { currentManga } from '$lib/catalog';
|
||||||
import type { Volume } from '$lib/types';
|
import type { Volume } from '$lib/types';
|
||||||
export let manga: Volume[];
|
export let manga: Volume[];
|
||||||
const { volumeName, files, mokuroData } = manga[0];
|
const { volumeName, files, mokuroData } = manga[0];
|
||||||
|
|
||||||
function onClick() {
|
function onClick() {
|
||||||
currentManga.set(manga);
|
currentManga.set(manga);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<a href={volumeName} on:click={onClick}>
|
<a href={volumeName} on:click={onClick}>
|
||||||
<div class="flex flex-col gap-[5px] text-center">
|
<div class="flex flex-col gap-[5px] text-center">
|
||||||
{mokuroData.title}
|
{mokuroData.title}
|
||||||
{#if files}
|
{#if files}
|
||||||
<img
|
<img
|
||||||
src={URL.createObjectURL(Object.values(files)[0])}
|
src={URL.createObjectURL(Object.values(files)[0])}
|
||||||
alt="img"
|
alt="img"
|
||||||
class="object-contain w-[250px] h-[350px] bg-black border-gray-900 border"
|
class="object-contain w-[250px] h-[350px] bg-black border-gray-900 border"
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -1,25 +1,25 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { confirmationPopupStore } from '$lib/util';
|
import { confirmationPopupStore } from '$lib/util';
|
||||||
import { Button, Modal } from 'flowbite-svelte';
|
import { Button, Modal } from 'flowbite-svelte';
|
||||||
import { ExclamationCircleOutline } from 'flowbite-svelte-icons';
|
import { ExclamationCircleOutline } from 'flowbite-svelte-icons';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
let open = false;
|
let open = false;
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
confirmationPopupStore.subscribe((value) => {
|
confirmationPopupStore.subscribe((value) => {
|
||||||
open = Boolean(value);
|
open = Boolean(value);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Modal bind:open size="xs" autoclose outsideclose>
|
<Modal bind:open size="xs" autoclose outsideclose>
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<ExclamationCircleOutline class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" />
|
<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">
|
<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
|
||||||
{$confirmationPopupStore?.message}
|
{$confirmationPopupStore?.message}
|
||||||
</h3>
|
</h3>
|
||||||
<Button color="red" class="mr-2" on:click={$confirmationPopupStore?.onConfirm}>Yes</Button>
|
<Button color="red" class="mr-2" on:click={$confirmationPopupStore?.onConfirm}>Yes</Button>
|
||||||
<Button color="alternative">No</Button>
|
<Button color="alternative">No</Button>
|
||||||
</div>
|
</div>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|||||||
@@ -1,29 +1,29 @@
|
|||||||
<script lang="ts">
|
<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 files: FileList | undefined = undefined;
|
||||||
export let onUpload: ((files: FileList) => void) | undefined = undefined;
|
export let onUpload: ((files: FileList) => void) | undefined = undefined;
|
||||||
|
|
||||||
let input: HTMLInputElement;
|
let input: HTMLInputElement;
|
||||||
|
|
||||||
function handleChange() {
|
function handleChange() {
|
||||||
if (files && onUpload) {
|
if (files && onUpload) {
|
||||||
onUpload(files);
|
onUpload(files);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onClick() {
|
function onClick() {
|
||||||
input.click();
|
input.click();
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
type="file"
|
type="file"
|
||||||
bind:files
|
bind:files
|
||||||
bind:this={input}
|
bind:this={input}
|
||||||
on:change={handleChange}
|
on:change={handleChange}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
class="hidden"
|
class="hidden"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<A on:click={onClick}><slot>Upload</slot></A>
|
<A on:click={onClick}><slot>Upload</slot></A>
|
||||||
|
|||||||
@@ -1,51 +1,51 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Navbar, NavBrand } from 'flowbite-svelte';
|
import { Navbar, NavBrand } from 'flowbite-svelte';
|
||||||
import { UserSettingsSolid, UploadSolid } from 'flowbite-svelte-icons';
|
import { UserSettingsSolid, UploadSolid } from 'flowbite-svelte-icons';
|
||||||
import { afterNavigate } from '$app/navigation';
|
import { afterNavigate } from '$app/navigation';
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import Settings from './Settings.svelte';
|
import Settings from './Settings.svelte';
|
||||||
import UploadModal from './UploadModal.svelte';
|
import UploadModal from './UploadModal.svelte';
|
||||||
import { settings } from '$lib/settings';
|
import { settings } from '$lib/settings';
|
||||||
|
|
||||||
let settingsHidden = true;
|
let settingsHidden = true;
|
||||||
let uploadModalOpen = false;
|
let uploadModalOpen = false;
|
||||||
let isReader = false;
|
let isReader = false;
|
||||||
|
|
||||||
function openSettings() {
|
function openSettings() {
|
||||||
settingsHidden = false;
|
settingsHidden = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
afterNavigate(() => {
|
afterNavigate(() => {
|
||||||
isReader = $page.route.id === '/[manga]/[volume]';
|
isReader = $page.route.id === '/[manga]/[volume]';
|
||||||
|
|
||||||
if (isReader) {
|
if (isReader) {
|
||||||
window.document.body.classList.add('reader');
|
window.document.body.classList.add('reader');
|
||||||
} else {
|
} else {
|
||||||
window.document.body.classList.remove('reader');
|
window.document.body.classList.remove('reader');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="relative z-10">
|
<div class="relative z-10">
|
||||||
<Navbar hidden={isReader}>
|
<Navbar hidden={isReader}>
|
||||||
<NavBrand href="/">
|
<NavBrand href="/">
|
||||||
<span class="text-xl font-semibold dark:text-white">Mokuro</span>
|
<span class="text-xl font-semibold dark:text-white">Mokuro</span>
|
||||||
</NavBrand>
|
</NavBrand>
|
||||||
<div class="flex md:order-2 gap-5">
|
<div class="flex md:order-2 gap-5">
|
||||||
<UserSettingsSolid class="hover:text-primary-700" on:click={openSettings} />
|
<UserSettingsSolid class="hover:text-primary-700" on:click={openSettings} />
|
||||||
<UploadSolid class="hover:text-primary-700" on:click={() => (uploadModalOpen = true)} />
|
<UploadSolid class="hover:text-primary-700" on:click={() => (uploadModalOpen = true)} />
|
||||||
</div>
|
</div>
|
||||||
</Navbar>
|
</Navbar>
|
||||||
{#if isReader}
|
{#if isReader}
|
||||||
<button
|
<button
|
||||||
on:click={openSettings}
|
on:click={openSettings}
|
||||||
class="hover:text-primary-700 fixed opacity-50 hover:opacity-100 right-10 top-5 p-10 m-[-2.5rem]"
|
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">
|
<div style:background-color={$settings.backgroundColor} class="absolute">
|
||||||
<UserSettingsSolid class="mix-blend-difference" />
|
<UserSettingsSolid class="mix-blend-difference" />
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Settings bind:hidden={settingsHidden} />
|
<Settings bind:hidden={settingsHidden} />
|
||||||
|
|||||||
@@ -1,17 +1,17 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { Page } from '$lib/types';
|
import type { Page } from '$lib/types';
|
||||||
import TextBoxes from './TextBoxes.svelte';
|
import TextBoxes from './TextBoxes.svelte';
|
||||||
|
|
||||||
export let page: Page;
|
export let page: Page;
|
||||||
export let src: Blob;
|
export let src: Blob;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
draggable="false"
|
draggable="false"
|
||||||
style:width={`${page.img_width}px`}
|
style:width={`${page.img_width}px`}
|
||||||
style:height={`${page.img_height}px`}
|
style:height={`${page.img_height}px`}
|
||||||
style:background-image={`url(${URL.createObjectURL(src)})`}
|
style:background-image={`url(${URL.createObjectURL(src)})`}
|
||||||
class="relative"
|
class="relative"
|
||||||
>
|
>
|
||||||
<TextBoxes {page} />
|
<TextBoxes {page} />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,133 +1,122 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { currentVolume } from '$lib/catalog';
|
import { currentVolume } from '$lib/catalog';
|
||||||
import {
|
import { Panzoom, zoomDefault } from '$lib/panzoom';
|
||||||
Panzoom,
|
import { progress, settings, updateProgress } from '$lib/settings';
|
||||||
keepZoomStart,
|
import { clamp } from '$lib/util';
|
||||||
zoomDefault,
|
import { Input, Popover, Range } from 'flowbite-svelte';
|
||||||
zoomFitToScreen,
|
import MangaPage from './MangaPage.svelte';
|
||||||
zoomFitToWidth,
|
import { ChervonDoubleLeftSolid, ChervonDoubleRightSolid } from 'flowbite-svelte-icons';
|
||||||
zoomOriginal
|
import { onMount } from 'svelte';
|
||||||
} 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';
|
|
||||||
|
|
||||||
const volume = $currentVolume;
|
const volume = $currentVolume;
|
||||||
const pages = volume?.mokuroData.pages;
|
const pages = volume?.mokuroData.pages;
|
||||||
|
|
||||||
$: page = $progress?.[volume?.mokuroData.volume_uuid || 0] || 1;
|
$: page = $progress?.[volume?.mokuroData.volume_uuid || 0] || 1;
|
||||||
$: index = page - 1;
|
$: index = page - 1;
|
||||||
$: navAmount = $settings.singlePageView ? 1 : 2;
|
$: navAmount = $settings.singlePageView ? 1 : 2;
|
||||||
|
|
||||||
let start: Date;
|
let start: Date;
|
||||||
|
|
||||||
function mouseDown() {
|
function mouseDown() {
|
||||||
start = new Date();
|
start = new Date();
|
||||||
}
|
}
|
||||||
|
|
||||||
function left() {
|
function left() {
|
||||||
const newPage = $settings.rightToLeft ? page + navAmount : page - navAmount;
|
const newPage = $settings.rightToLeft ? page + navAmount : page - navAmount;
|
||||||
changePage(newPage);
|
changePage(newPage);
|
||||||
}
|
}
|
||||||
|
|
||||||
function right() {
|
function right() {
|
||||||
const newPage = $settings.rightToLeft ? page - navAmount : page + navAmount;
|
const newPage = $settings.rightToLeft ? page - navAmount : page + navAmount;
|
||||||
changePage(newPage);
|
changePage(newPage);
|
||||||
}
|
}
|
||||||
|
|
||||||
function changePage(newPage: number, ingoreTimeOut = false) {
|
function changePage(newPage: number, ingoreTimeOut = false) {
|
||||||
const end = new Date();
|
const end = new Date();
|
||||||
const clickDuration = ingoreTimeOut ? 0 : end.getTime() - start?.getTime();
|
const clickDuration = ingoreTimeOut ? 0 : end.getTime() - start?.getTime();
|
||||||
|
|
||||||
if (pages && volume && clickDuration < 200) {
|
if (pages && volume && clickDuration < 200) {
|
||||||
updateProgress(volume.mokuroData.volume_uuid, clamp(newPage, 1, pages?.length));
|
updateProgress(volume.mokuroData.volume_uuid, clamp(newPage, 1, pages?.length));
|
||||||
zoomDefault();
|
zoomDefault();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$: manualPage = page;
|
$: manualPage = page;
|
||||||
$: pageDisplay = `${page}/${pages?.length}`;
|
$: pageDisplay = `${page}/${pages?.length}`;
|
||||||
|
|
||||||
function onInputClick(this: any) {
|
function onInputClick(this: any) {
|
||||||
this.select();
|
this.select();
|
||||||
}
|
}
|
||||||
|
|
||||||
function onManualPageChange() {
|
function onManualPageChange() {
|
||||||
changePage(manualPage, true);
|
changePage(manualPage, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
zoomDefault();
|
zoomDefault();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:window on:resize={zoomDefault} />
|
<svelte:window on:resize={zoomDefault} />
|
||||||
{#if volume && pages}
|
{#if volume && pages}
|
||||||
<Popover placement="bottom-end" trigger="click" triggeredBy="#page-num" class="z-20">
|
<Popover placement="bottom-end" trigger="click" triggeredBy="#page-num" class="z-20">
|
||||||
<div class="flex flex-col gap-3">
|
<div class="flex flex-col gap-3">
|
||||||
<div class="flex flex-row items-center gap-5 z-10">
|
<div class="flex flex-row items-center gap-5 z-10">
|
||||||
<ChervonDoubleLeftSolid
|
<ChervonDoubleLeftSolid
|
||||||
on:click={() => changePage($settings.rightToLeft ? pages.length : 1, true)}
|
on:click={() => changePage($settings.rightToLeft ? pages.length : 1, true)}
|
||||||
class="hover:text-primary-600"
|
class="hover:text-primary-600"
|
||||||
/>
|
/>
|
||||||
<Input
|
<Input
|
||||||
type="number"
|
type="number"
|
||||||
size="sm"
|
size="sm"
|
||||||
defaultClass="select-all"
|
defaultClass="select-all"
|
||||||
bind:value={manualPage}
|
bind:value={manualPage}
|
||||||
on:click={onInputClick}
|
on:click={onInputClick}
|
||||||
on:change={onManualPageChange}
|
on:change={onManualPageChange}
|
||||||
/>
|
/>
|
||||||
<ChervonDoubleRightSolid
|
<ChervonDoubleRightSolid
|
||||||
on:click={() => changePage($settings.rightToLeft ? 1 : pages.length, true)}
|
on:click={() => changePage($settings.rightToLeft ? 1 : pages.length, true)}
|
||||||
class="hover:text-primary-600"
|
class="hover:text-primary-600"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Range min={1} max={pages.length} bind:value={manualPage} on:change={onManualPageChange} />
|
<Range min={1} max={pages.length} bind:value={manualPage} on:change={onManualPageChange} />
|
||||||
</div>
|
</div>
|
||||||
</Popover>
|
</Popover>
|
||||||
<button
|
<button
|
||||||
class="absolute opacity-50 left-5 top-5 z-10 mix-blend-difference"
|
class="absolute opacity-50 left-5 top-5 z-10 mix-blend-difference"
|
||||||
class:hidden={!$settings.pageNum}
|
class:hidden={!$settings.pageNum}
|
||||||
id="page-num"
|
id="page-num"
|
||||||
>
|
>
|
||||||
{pageDisplay}
|
{pageDisplay}
|
||||||
</button>
|
</button>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<Panzoom>
|
<Panzoom>
|
||||||
<button
|
<button
|
||||||
class="h-full fixed -left-1/2 z-10 w-1/2 hover:bg-slate-400 opacity-[0.01] justify-items-center"
|
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:mousedown={mouseDown}
|
||||||
on:mouseup={left}
|
on:mouseup={left}
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
class="h-full fixed -right-1/2 z-10 w-1/2 hover:bg-slate-400 opacity-[0.01]"
|
class="h-full fixed -right-1/2 z-10 w-1/2 hover:bg-slate-400 opacity-[0.01]"
|
||||||
on:mousedown={mouseDown}
|
on:mousedown={mouseDown}
|
||||||
on:mouseup={right}
|
on:mouseup={right}
|
||||||
/>
|
/>
|
||||||
<div class="flex flex-row">
|
<div class="flex flex-row">
|
||||||
{#if !$settings.singlePageView && index + 1 < pages.length}
|
{#if !$settings.singlePageView && index + 1 < pages.length}
|
||||||
<MangaPage page={pages[index + 1]} src={Object.values(volume?.files)[index + 1]} />
|
<MangaPage page={pages[index + 1]} src={Object.values(volume?.files)[index + 1]} />
|
||||||
{/if}
|
{/if}
|
||||||
<MangaPage page={pages[index]} src={Object.values(volume?.files)[index]} />
|
<MangaPage page={pages[index]} src={Object.values(volume?.files)[index]} />
|
||||||
</div>
|
</div>
|
||||||
</Panzoom>
|
</Panzoom>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
on:mousedown={mouseDown}
|
on:mousedown={mouseDown}
|
||||||
on:mouseup={left}
|
on:mouseup={left}
|
||||||
class="left-0 top-0 absolute h-full w-[50px] hover:bg-slate-400 opacity-[0.01]"
|
class="left-0 top-0 absolute h-full w-[50px] hover:bg-slate-400 opacity-[0.01]"
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
on:mousedown={mouseDown}
|
on:mousedown={mouseDown}
|
||||||
on:mouseup={right}
|
on:mouseup={right}
|
||||||
class="right-0 top-0 absolute h-full w-[50px] hover:bg-slate-400 opacity-[0.01]"
|
class="right-0 top-0 absolute h-full w-[50px] hover:bg-slate-400 opacity-[0.01]"
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@@ -1,94 +1,94 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { clamp } from '$lib/util';
|
import { clamp } from '$lib/util';
|
||||||
import type { Page } from '$lib/types';
|
import type { Page } from '$lib/types';
|
||||||
import { settings } from '$lib/settings';
|
import { settings } from '$lib/settings';
|
||||||
|
|
||||||
export let page: Page;
|
export let page: Page;
|
||||||
|
|
||||||
$: textBoxes = page.blocks.map((block) => {
|
$: textBoxes = page.blocks.map((block) => {
|
||||||
const { img_height, img_width } = page;
|
const { img_height, img_width } = page;
|
||||||
const { box, font_size, lines, vertical } = block;
|
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 xmin = clamp(_xmin, 0, img_width);
|
||||||
const ymin = clamp(_ymin, 0, img_height);
|
const ymin = clamp(_ymin, 0, img_height);
|
||||||
const xmax = clamp(_xmax, 0, img_width);
|
const xmax = clamp(_xmax, 0, img_width);
|
||||||
const ymax = clamp(_ymax, 0, img_height);
|
const ymax = clamp(_ymax, 0, img_height);
|
||||||
|
|
||||||
const width = xmax - xmin;
|
const width = xmax - xmin;
|
||||||
const height = ymax - ymin;
|
const height = ymax - ymin;
|
||||||
|
|
||||||
const textBox = {
|
const textBox = {
|
||||||
left: `${xmin}px`,
|
left: `${xmin}px`,
|
||||||
top: `${ymin}px`,
|
top: `${ymin}px`,
|
||||||
width: `${width}px`,
|
width: `${width}px`,
|
||||||
height: `${height}px`,
|
height: `${height}px`,
|
||||||
fontSize: $settings.fontSize === 'auto' ? `${font_size}px` : `${$settings.fontSize}pt`,
|
fontSize: $settings.fontSize === 'auto' ? `${font_size}px` : `${$settings.fontSize}pt`,
|
||||||
writingMode: vertical ? 'vertical-rl' : 'horizontal-tb',
|
writingMode: vertical ? 'vertical-rl' : 'horizontal-tb',
|
||||||
lines
|
lines
|
||||||
};
|
};
|
||||||
|
|
||||||
return textBox;
|
return textBox;
|
||||||
});
|
});
|
||||||
|
|
||||||
$: fontWeight = $settings.boldFont ? 'bold' : '400';
|
$: fontWeight = $settings.boldFont ? 'bold' : '400';
|
||||||
$: display = $settings.displayOCR ? 'block' : 'none';
|
$: display = $settings.displayOCR ? 'block' : 'none';
|
||||||
$: border = $settings.textBoxBorders ? '1px solid red' : 'none';
|
$: border = $settings.textBoxBorders ? '1px solid red' : 'none';
|
||||||
$: contenteditable = $settings.textEditable;
|
$: contenteditable = $settings.textEditable;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#each textBoxes as { fontSize, height, left, lines, top, width, writingMode }, index (`text-box-${index}`)}
|
{#each textBoxes as { fontSize, height, left, lines, top, width, writingMode }, index (`text-box-${index}`)}
|
||||||
<div
|
<div
|
||||||
class="text-box"
|
class="text-box"
|
||||||
style:width
|
style:width
|
||||||
style:height
|
style:height
|
||||||
style:left
|
style:left
|
||||||
style:top
|
style:top
|
||||||
style:font-size={fontSize}
|
style:font-size={fontSize}
|
||||||
style:writing-mode={writingMode}
|
style:writing-mode={writingMode}
|
||||||
style:font-weight={fontWeight}
|
style:font-weight={fontWeight}
|
||||||
style:display
|
style:display
|
||||||
style:border
|
style:border
|
||||||
{contenteditable}
|
{contenteditable}
|
||||||
>
|
>
|
||||||
{#each lines as line}
|
{#each lines as line}
|
||||||
<p>{line}</p>
|
<p>{line}</p>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.text-box {
|
.text-box {
|
||||||
color: black;
|
color: black;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
line-height: 1.1em;
|
line-height: 1.1em;
|
||||||
font-size: 16pt;
|
font-size: 16pt;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
border: 1px solid rgba(0, 0, 0, 0);
|
border: 1px solid rgba(0, 0, 0, 0);
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-box:focus,
|
.text-box:focus,
|
||||||
.text-box:hover {
|
.text-box:hover {
|
||||||
background: rgb(255, 255, 255);
|
background: rgb(255, 255, 255);
|
||||||
border: 1px solid rgba(0, 0, 0, 0);
|
border: 1px solid rgba(0, 0, 0, 0);
|
||||||
z-index: 999 !important;
|
z-index: 999 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-box p {
|
.text-box p {
|
||||||
display: none;
|
display: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
letter-spacing: 0.1em;
|
letter-spacing: 0.1em;
|
||||||
line-height: 1.1em;
|
line-height: 1.1em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: rgb(255, 255, 255);
|
background-color: rgb(255, 255, 255);
|
||||||
font-weight: var(--bold);
|
font-weight: var(--bold);
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-box:focus p,
|
.text-box:focus p,
|
||||||
.text-box:hover p {
|
.text-box:hover p {
|
||||||
display: table;
|
display: table;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,113 +1,113 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Drawer, CloseButton, Toggle, Select, Input, Label, Button } from 'flowbite-svelte';
|
import { Drawer, CloseButton, Toggle, Select, Input, Label, Button } from 'flowbite-svelte';
|
||||||
import { UserSettingsSolid } from 'flowbite-svelte-icons';
|
import { UserSettingsSolid } from 'flowbite-svelte-icons';
|
||||||
import { sineIn } from 'svelte/easing';
|
import { sineIn } from 'svelte/easing';
|
||||||
import { resetSettings, settings, updateSetting } from '$lib/settings';
|
import { resetSettings, settings, updateSetting } from '$lib/settings';
|
||||||
import type { SettingsKey } from '$lib/settings';
|
import type { SettingsKey } from '$lib/settings';
|
||||||
import { promptConfirmation } from '$lib/util';
|
import { promptConfirmation } from '$lib/util';
|
||||||
import { zoomDefault } from '$lib/panzoom';
|
import { zoomDefault } from '$lib/panzoom';
|
||||||
|
|
||||||
let transitionParams = {
|
let transitionParams = {
|
||||||
x: 320,
|
x: 320,
|
||||||
duration: 200,
|
duration: 200,
|
||||||
easing: sineIn
|
easing: sineIn
|
||||||
};
|
};
|
||||||
|
|
||||||
export let hidden = true;
|
export let hidden = true;
|
||||||
|
|
||||||
$: zoomModeValue = $settings.zoomDefault;
|
$: zoomModeValue = $settings.zoomDefault;
|
||||||
$: fontSizeValue = $settings.fontSize;
|
$: fontSizeValue = $settings.fontSize;
|
||||||
|
|
||||||
let zoomModes = [
|
let zoomModes = [
|
||||||
{ value: 'zoomFitToScreen', name: 'Fit to screen' },
|
{ value: 'zoomFitToScreen', name: 'Fit to screen' },
|
||||||
{ value: 'zoomFitToWidth', name: 'Fit to width' },
|
{ value: 'zoomFitToWidth', name: 'Fit to width' },
|
||||||
{ value: 'zoomOriginal', name: 'Original size' },
|
{ value: 'zoomOriginal', name: 'Original size' },
|
||||||
{ value: 'keepZoom', name: 'Keep zoom' },
|
{ value: 'keepZoom', name: 'Keep zoom' },
|
||||||
{ value: 'keepZoomStart', name: 'Keep zoom, pan to top' }
|
{ value: 'keepZoomStart', name: 'Keep zoom, pan to top' }
|
||||||
];
|
];
|
||||||
|
|
||||||
let fontSizes = [
|
let fontSizes = [
|
||||||
{ value: 'auto', name: 'auto' },
|
{ value: 'auto', name: 'auto' },
|
||||||
{ value: '9', name: '9' },
|
{ value: '9', name: '9' },
|
||||||
{ value: '10', name: '10' },
|
{ value: '10', name: '10' },
|
||||||
{ value: '11', name: '11' },
|
{ value: '11', name: '11' },
|
||||||
{ value: '12', name: '12' },
|
{ value: '12', name: '12' },
|
||||||
{ value: '14', name: '14' },
|
{ value: '14', name: '14' },
|
||||||
{ value: '16', name: '16' },
|
{ value: '16', name: '16' },
|
||||||
{ value: '18', name: '18' },
|
{ value: '18', name: '18' },
|
||||||
{ value: '20', name: '20' },
|
{ value: '20', name: '20' },
|
||||||
{ value: '24', name: '24' },
|
{ value: '24', name: '24' },
|
||||||
{ value: '32', name: '32' },
|
{ value: '32', name: '32' },
|
||||||
{ value: '40', name: '40' },
|
{ value: '40', name: '40' },
|
||||||
{ value: '48', name: '48' },
|
{ value: '48', name: '48' },
|
||||||
{ value: '60', name: '60' }
|
{ value: '60', name: '60' }
|
||||||
];
|
];
|
||||||
|
|
||||||
$: toggles = [
|
$: toggles = [
|
||||||
{ key: 'rightToLeft', text: 'Right to left', value: $settings.rightToLeft },
|
{ key: 'rightToLeft', text: 'Right to left', value: $settings.rightToLeft },
|
||||||
{ key: 'singlePageView', text: 'Single page view', value: $settings.singlePageView },
|
{ key: 'singlePageView', text: 'Single page view', value: $settings.singlePageView },
|
||||||
{ key: 'hasCover', text: 'First page is cover', value: $settings.hasCover },
|
{ key: 'hasCover', text: 'First page is cover', value: $settings.hasCover },
|
||||||
{ key: 'textEditable', text: 'Editable text', value: $settings.textEditable },
|
{ key: 'textEditable', text: 'Editable text', value: $settings.textEditable },
|
||||||
{ key: 'textBoxBorders', text: 'Text box borders', value: $settings.textBoxBorders },
|
{ key: 'textBoxBorders', text: 'Text box borders', value: $settings.textBoxBorders },
|
||||||
{ key: 'displayOCR', text: 'OCR enabled', value: $settings.displayOCR },
|
{ key: 'displayOCR', text: 'OCR enabled', value: $settings.displayOCR },
|
||||||
{ key: 'boldFont', text: 'Bold font', value: $settings.boldFont },
|
{ key: 'boldFont', text: 'Bold font', value: $settings.boldFont },
|
||||||
{ key: 'pageNum', text: 'Show page number', value: $settings.pageNum }
|
{ key: 'pageNum', text: 'Show page number', value: $settings.pageNum }
|
||||||
] as { key: SettingsKey; text: string; value: any }[];
|
] as { key: SettingsKey; text: string; value: any }[];
|
||||||
|
|
||||||
function onBackgroundColor(event: Event) {
|
function onBackgroundColor(event: Event) {
|
||||||
updateSetting('backgroundColor', (event.target as HTMLInputElement).value);
|
updateSetting('backgroundColor', (event.target as HTMLInputElement).value);
|
||||||
}
|
}
|
||||||
|
|
||||||
function onSelectChange(event: Event, setting: SettingsKey) {
|
function onSelectChange(event: Event, setting: SettingsKey) {
|
||||||
updateSetting(setting, (event.target as HTMLInputElement).value);
|
updateSetting(setting, (event.target as HTMLInputElement).value);
|
||||||
}
|
}
|
||||||
|
|
||||||
function onReset() {
|
function onReset() {
|
||||||
hidden = true;
|
hidden = true;
|
||||||
promptConfirmation('Restore default settings?', resetSettings);
|
promptConfirmation('Restore default settings?', resetSettings);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Drawer
|
<Drawer
|
||||||
placement="right"
|
placement="right"
|
||||||
transitionType="fly"
|
transitionType="fly"
|
||||||
width="lg:w-1/4 md:w-1/2 w-full"
|
width="lg:w-1/4 md:w-1/2 w-full"
|
||||||
{transitionParams}
|
{transitionParams}
|
||||||
bind:hidden
|
bind:hidden
|
||||||
id="settings"
|
id="settings"
|
||||||
>
|
>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<h5 id="drawer-label" class="inline-flex items-center mb-4 text-base font-semibold">
|
<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
|
<UserSettingsSolid class="w-4 h-4 mr-2.5" />Settings
|
||||||
</h5>
|
</h5>
|
||||||
<CloseButton on:click={() => (hidden = true)} class="mb-4 dark:text-white" />
|
<CloseButton on:click={() => (hidden = true)} class="mb-4 dark:text-white" />
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col gap-5">
|
<div class="flex flex-col gap-5">
|
||||||
<div>
|
<div>
|
||||||
<Label>On page zoom:</Label>
|
<Label>On page zoom:</Label>
|
||||||
<Select
|
<Select
|
||||||
items={zoomModes}
|
items={zoomModes}
|
||||||
bind:value={zoomModeValue}
|
bind:value={zoomModeValue}
|
||||||
on:change={(e) => onSelectChange(e, 'zoomDefault')}
|
on:change={(e) => onSelectChange(e, 'zoomDefault')}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{#each toggles as { key, text, value }}
|
{#each toggles as { key, text, value }}
|
||||||
<Toggle size="small" checked={value} on:change={() => updateSetting(key, !value)}
|
<Toggle size="small" checked={value} on:change={() => updateSetting(key, !value)}
|
||||||
>{text}</Toggle
|
>{text}</Toggle
|
||||||
>
|
>
|
||||||
{/each}
|
{/each}
|
||||||
<div>
|
<div>
|
||||||
<Label>Fontsize:</Label>
|
<Label>Fontsize:</Label>
|
||||||
<Select
|
<Select
|
||||||
items={fontSizes}
|
items={fontSizes}
|
||||||
bind:value={fontSizeValue}
|
bind:value={fontSizeValue}
|
||||||
on:change={(e) => onSelectChange(e, 'fontSize')}
|
on:change={(e) => onSelectChange(e, 'fontSize')}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Label>Background color:</Label>
|
<Label>Background color:</Label>
|
||||||
<Input type="color" on:change={onBackgroundColor} value={$settings.backgroundColor} />
|
<Input type="color" on:change={onBackgroundColor} value={$settings.backgroundColor} />
|
||||||
</div>
|
</div>
|
||||||
<Button outline on:click={onReset}>Reset</Button>
|
<Button outline on:click={onReset}>Reset</Button>
|
||||||
</div>
|
</div>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { snackbarStore } from '$lib/util/snackbar';
|
import { snackbarStore } from '$lib/util/snackbar';
|
||||||
import { Toast } from 'flowbite-svelte';
|
import { Toast } from 'flowbite-svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if $snackbarStore?.message && $snackbarStore?.visible}
|
{#if $snackbarStore?.message && $snackbarStore?.visible}
|
||||||
<Toast position="bottom-right">{$snackbarStore?.message}</Toast>
|
<Toast position="bottom-right">{$snackbarStore?.message}</Toast>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@@ -1,152 +1,152 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Button, Dropzone, Modal, Spinner } from 'flowbite-svelte';
|
import { Button, Dropzone, Modal, Spinner } from 'flowbite-svelte';
|
||||||
import FileUpload from './FileUpload.svelte';
|
import FileUpload from './FileUpload.svelte';
|
||||||
import { processFiles } from '$lib/upload';
|
import { processFiles } from '$lib/upload';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { scanFiles } from '$lib/upload';
|
import { scanFiles } from '$lib/upload';
|
||||||
import { formatBytes } from '$lib/util/upload';
|
import { formatBytes } from '$lib/util/upload';
|
||||||
import { catalog } from '$lib/catalog';
|
import { catalog } from '$lib/catalog';
|
||||||
|
|
||||||
export let open = false;
|
export let open = false;
|
||||||
|
|
||||||
let promise: Promise<void>;
|
let promise: Promise<void>;
|
||||||
let files: FileList | undefined = undefined;
|
let files: FileList | undefined = undefined;
|
||||||
|
|
||||||
async function onUpload() {
|
async function onUpload() {
|
||||||
if (files) {
|
if (files) {
|
||||||
promise = processFiles([...files]).then(() => {
|
promise = processFiles([...files]).then(() => {
|
||||||
open = false;
|
open = false;
|
||||||
});
|
});
|
||||||
} else if (draggedFiles) {
|
} else if (draggedFiles) {
|
||||||
promise = processFiles(draggedFiles).then(() => {
|
promise = processFiles(draggedFiles).then(() => {
|
||||||
open = false;
|
open = false;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function reset() {
|
function reset() {
|
||||||
files = undefined;
|
files = undefined;
|
||||||
draggedFiles = undefined;
|
draggedFiles = undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
let storageSpace = 'Loading...';
|
let storageSpace = 'Loading...';
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
navigator.storage.estimate().then(({ usage, quota }) => {
|
navigator.storage.estimate().then(({ usage, quota }) => {
|
||||||
if (usage && quota) {
|
if (usage && quota) {
|
||||||
storageSpace = `Storage: ${formatBytes(usage)} / ${formatBytes(quota)}`;
|
storageSpace = `Storage: ${formatBytes(usage)} / ${formatBytes(quota)}`;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
let filePromises: Promise<File>[];
|
let filePromises: Promise<File>[];
|
||||||
let draggedFiles: File[] | undefined;
|
let draggedFiles: File[] | undefined;
|
||||||
let loading = false;
|
let loading = false;
|
||||||
$: disabled = loading || (!draggedFiles && !files);
|
$: disabled = loading || (!draggedFiles && !files);
|
||||||
|
|
||||||
const dropHandle = async (event: DragEvent) => {
|
const dropHandle = async (event: DragEvent) => {
|
||||||
loading = true;
|
loading = true;
|
||||||
draggedFiles = [];
|
draggedFiles = [];
|
||||||
filePromises = [];
|
filePromises = [];
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
activeStyle = defaultStyle;
|
activeStyle = defaultStyle;
|
||||||
|
|
||||||
if (event?.dataTransfer?.items) {
|
if (event?.dataTransfer?.items) {
|
||||||
for (const item of [...event.dataTransfer.items]) {
|
for (const item of [...event.dataTransfer.items]) {
|
||||||
const entry = item.webkitGetAsEntry();
|
const entry = item.webkitGetAsEntry();
|
||||||
if (item.kind === 'file' && entry) {
|
if (item.kind === 'file' && entry) {
|
||||||
if (entry.isDirectory) {
|
if (entry.isDirectory) {
|
||||||
await scanFiles(entry, filePromises);
|
await scanFiles(entry, filePromises);
|
||||||
} else {
|
} else {
|
||||||
const file = item.getAsFile();
|
const file = item.getAsFile();
|
||||||
if (file) {
|
if (file) {
|
||||||
draggedFiles.push(file);
|
draggedFiles.push(file);
|
||||||
draggedFiles = draggedFiles;
|
draggedFiles = draggedFiles;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (filePromises && filePromises.length > 0) {
|
if (filePromises && filePromises.length > 0) {
|
||||||
const files = await Promise.all(filePromises);
|
const files = await Promise.all(filePromises);
|
||||||
if (files) {
|
if (files) {
|
||||||
draggedFiles = [...draggedFiles, ...files];
|
draggedFiles = [...draggedFiles, ...files];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
loading = false;
|
loading = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
let defaultStyle =
|
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';
|
'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 =
|
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';
|
'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>
|
</script>
|
||||||
|
|
||||||
<Modal title="Upload" bind:open outsideclose on:close={reset}>
|
<Modal title="Upload" bind:open outsideclose on:close={reset}>
|
||||||
{#await promise}
|
{#await promise}
|
||||||
<h2 class="justify-center flex">Loading...</h2>
|
<h2 class="justify-center flex">Loading...</h2>
|
||||||
<div class="text-center"><Spinner /></div>
|
<div class="text-center"><Spinner /></div>
|
||||||
{:then}
|
{:then}
|
||||||
<Dropzone
|
<Dropzone
|
||||||
id="dropzone"
|
id="dropzone"
|
||||||
on:drop={dropHandle}
|
on:drop={dropHandle}
|
||||||
on:dragover={(event) => {
|
on:dragover={(event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
activeStyle = highlightStyle;
|
activeStyle = highlightStyle;
|
||||||
}}
|
}}
|
||||||
on:dragleave={(event) => {
|
on:dragleave={(event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
activeStyle = defaultStyle;
|
activeStyle = defaultStyle;
|
||||||
}}
|
}}
|
||||||
on:click={(event) => {
|
on:click={(event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}}
|
}}
|
||||||
defaultClass={activeStyle}
|
defaultClass={activeStyle}
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="mb-3 w-10 h-10 text-gray-400"
|
class="mb-3 w-10 h-10 text-gray-400"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
><path
|
><path
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
stroke-width="2"
|
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"
|
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
|
/></svg
|
||||||
>
|
>
|
||||||
{#if files}
|
{#if files}
|
||||||
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||||
Upload {files.length}
|
Upload {files.length}
|
||||||
{files.length > 1 ? 'files' : 'file'}?
|
{files.length > 1 ? 'files' : 'file'}?
|
||||||
</p>
|
</p>
|
||||||
{:else if draggedFiles && draggedFiles.length > 0}
|
{:else if draggedFiles && draggedFiles.length > 0}
|
||||||
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||||
Upload {draggedFiles.length} hih
|
Upload {draggedFiles.length} hih
|
||||||
{draggedFiles.length > 1 ? 'files' : 'file'}?
|
{draggedFiles.length > 1 ? 'files' : 'file'}?
|
||||||
</p>
|
</p>
|
||||||
{:else if loading}
|
{:else if loading}
|
||||||
<Spinner />
|
<Spinner />
|
||||||
{:else}
|
{:else}
|
||||||
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||||
Drag and drop / <FileUpload bind:files accept=".mokuro,.zip,.cbz" multiple
|
Drag and drop / <FileUpload bind:files accept=".mokuro,.zip,.cbz" multiple
|
||||||
>choose files</FileUpload
|
>choose files</FileUpload
|
||||||
> /
|
> /
|
||||||
<FileUpload bind:files webkitdirectory>choose directory</FileUpload>
|
<FileUpload bind:files webkitdirectory>choose directory</FileUpload>
|
||||||
</p>
|
</p>
|
||||||
{/if}
|
{/if}
|
||||||
</Dropzone>
|
</Dropzone>
|
||||||
|
|
||||||
<p class=" text-sm text-gray-500 dark:text-gray-400 text-center">{storageSpace}</p>
|
<p class=" text-sm text-gray-500 dark:text-gray-400 text-center">{storageSpace}</p>
|
||||||
<div class="flex flex-1 flex-col gap-2">
|
<div class="flex flex-1 flex-col gap-2">
|
||||||
<Button outline on:click={reset} {disabled} color="dark">Reset</Button>
|
<Button outline on:click={reset} {disabled} color="dark">Reset</Button>
|
||||||
<Button outline on:click={onUpload} {disabled}>Upload</Button>
|
<Button outline on:click={onUpload} {disabled}>Upload</Button>
|
||||||
</div>
|
</div>
|
||||||
{/await}
|
{/await}
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|||||||
@@ -1,25 +1,25 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import { currentVolume } from '$lib/catalog';
|
import { currentVolume } from '$lib/catalog';
|
||||||
import type { Volume } from '$lib/types';
|
import type { Volume } from '$lib/types';
|
||||||
|
|
||||||
export let volume: Volume;
|
export let volume: Volume;
|
||||||
const { volumeName, files } = volume;
|
const { volumeName, files } = volume;
|
||||||
|
|
||||||
function onClick() {
|
function onClick() {
|
||||||
currentVolume.set(volume);
|
currentVolume.set(volume);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<a href={`${$page.params.manga}/${volumeName}`} on:click={onClick}>
|
<a href={`${$page.params.manga}/${volumeName}`} on:click={onClick}>
|
||||||
<div class="flex flex-col gap-[5px] text-center">
|
<div class="flex flex-col gap-[5px] text-center">
|
||||||
{volumeName}
|
{volumeName}
|
||||||
{#if files}
|
{#if files}
|
||||||
<img
|
<img
|
||||||
src={URL.createObjectURL(Object.values(files)[0])}
|
src={URL.createObjectURL(Object.values(files)[0])}
|
||||||
alt="img"
|
alt="img"
|
||||||
class="object-contain w-[250px] h-[350px] bg-black border-gray-900 border"
|
class="object-contain w-[250px] h-[350px] bg-black border-gray-900 border"
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { initPanzoom } from './util';
|
import { initPanzoom } from './util';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div use:initPanzoom>
|
<div use:initPanzoom>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,2 +1,2 @@
|
|||||||
export * from './util'
|
export * from './util';
|
||||||
export {default as Panzoom} from './Panzoom.svelte'
|
export { default as Panzoom } from './Panzoom.svelte';
|
||||||
|
|||||||
@@ -37,20 +37,20 @@ export function initPanzoom(node: HTMLElement) {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
panzoomStore.set(pz)
|
panzoomStore.set(pz);
|
||||||
}
|
}
|
||||||
|
|
||||||
type PanX = 'left' | 'center' | 'right'
|
type PanX = 'left' | 'center' | 'right';
|
||||||
type PanY = 'top' | 'center' | 'bottom'
|
type PanY = 'top' | 'center' | 'bottom';
|
||||||
|
|
||||||
export function panAlign(alignX: PanX, alignY: PanY) {
|
export function panAlign(alignX: PanX, alignY: PanY) {
|
||||||
if (!pz || !container) {
|
if (!pz || !container) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { scale } = pz.getTransform();
|
const { scale } = pz.getTransform();
|
||||||
const { innerWidth, innerHeight } = window
|
const { innerWidth, innerHeight } = window;
|
||||||
const { offsetWidth, offsetHeight } = container
|
const { offsetWidth, offsetHeight } = container;
|
||||||
|
|
||||||
let x = 0;
|
let x = 0;
|
||||||
let y = 0;
|
let y = 0;
|
||||||
@@ -63,7 +63,7 @@ export function panAlign(alignX: PanX, alignY: PanY) {
|
|||||||
x = (innerWidth - offsetWidth * scale) / 2;
|
x = (innerWidth - offsetWidth * scale) / 2;
|
||||||
break;
|
break;
|
||||||
case 'right':
|
case 'right':
|
||||||
x = (innerWidth - offsetWidth * scale);
|
x = innerWidth - offsetWidth * scale;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -75,11 +75,11 @@ export function panAlign(alignX: PanX, alignY: PanY) {
|
|||||||
y = (innerHeight - offsetHeight * scale) / 2;
|
y = (innerHeight - offsetHeight * scale) / 2;
|
||||||
break;
|
break;
|
||||||
case 'bottom':
|
case 'bottom':
|
||||||
y = (innerHeight - offsetHeight * scale);
|
y = innerHeight - offsetHeight * scale;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
pz?.moveTo(x, y)
|
pz?.moveTo(x, y);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function zoomOriginal() {
|
export function zoomOriginal() {
|
||||||
@@ -90,12 +90,11 @@ export function zoomOriginal() {
|
|||||||
|
|
||||||
export function zoomFitToWidth() {
|
export function zoomFitToWidth() {
|
||||||
if (!pz || !container) {
|
if (!pz || !container) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
const { innerWidth } = window
|
const { innerWidth } = window;
|
||||||
|
|
||||||
const scale =
|
const scale = (1 / pz.getTransform().scale) * (innerWidth / container.offsetWidth);
|
||||||
(1 / pz.getTransform().scale) * (innerWidth / container.offsetWidth);
|
|
||||||
|
|
||||||
pz.moveTo(0, 0);
|
pz.moveTo(0, 0);
|
||||||
pz.zoomTo(0, 0, scale);
|
pz.zoomTo(0, 0, scale);
|
||||||
@@ -104,13 +103,12 @@ export function zoomFitToWidth() {
|
|||||||
|
|
||||||
export function zoomFitToScreen() {
|
export function zoomFitToScreen() {
|
||||||
if (!pz || !container) {
|
if (!pz || !container) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
const { innerWidth, innerHeight } = window
|
const { innerWidth, innerHeight } = window;
|
||||||
const scaleX = innerWidth / container.offsetWidth;
|
const scaleX = innerWidth / container.offsetWidth;
|
||||||
const scaleY = innerHeight / container.offsetHeight;
|
const scaleY = innerHeight / container.offsetHeight;
|
||||||
const scale =
|
const scale = (1 / pz.getTransform().scale) * Math.min(scaleX, scaleY);
|
||||||
(1 / pz.getTransform().scale) * Math.min(scaleX, scaleY);
|
|
||||||
pz.moveTo(0, 0);
|
pz.moveTo(0, 0);
|
||||||
pz.zoomTo(0, 0, scale);
|
pz.zoomTo(0, 0, scale);
|
||||||
panAlign('center', 'center');
|
panAlign('center', 'center');
|
||||||
@@ -121,7 +119,7 @@ export function keepZoomStart() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function zoomDefault() {
|
export function zoomDefault() {
|
||||||
const zoomDefault = get(settings).zoomDefault
|
const zoomDefault = get(settings).zoomDefault;
|
||||||
switch (zoomDefault) {
|
switch (zoomDefault) {
|
||||||
case 'zoomFitToScreen':
|
case 'zoomFitToScreen':
|
||||||
zoomFitToScreen();
|
zoomFitToScreen();
|
||||||
@@ -136,4 +134,4 @@ export function zoomDefault() {
|
|||||||
keepZoomStart();
|
keepZoomStart();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,27 +1,29 @@
|
|||||||
import { browser } from "$app/environment";
|
import { browser } from '$app/environment';
|
||||||
import { zoomDefault } from "$lib/panzoom";
|
import { zoomDefault } from '$lib/panzoom';
|
||||||
import { writable } from "svelte/store";
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
export type FontSize = 'auto' |
|
export type FontSize =
|
||||||
'9' |
|
| 'auto'
|
||||||
'10' |
|
| '9'
|
||||||
'11' |
|
| '10'
|
||||||
'12' |
|
| '11'
|
||||||
'14' |
|
| '12'
|
||||||
'16' |
|
| '14'
|
||||||
'18' |
|
| '16'
|
||||||
'20' |
|
| '18'
|
||||||
'24' |
|
| '20'
|
||||||
'32' |
|
| '24'
|
||||||
'40' |
|
| '32'
|
||||||
'48' |
|
| '40'
|
||||||
'60'
|
| '48'
|
||||||
|
| '60';
|
||||||
|
|
||||||
export type ZoomModes = 'zoomFitToScreen' |
|
export type ZoomModes =
|
||||||
'zoomFitToWidth' |
|
| 'zoomFitToScreen'
|
||||||
'zoomOriginal' |
|
| 'zoomFitToWidth'
|
||||||
'keepZoom' |
|
| 'zoomOriginal'
|
||||||
'keepZoomStart'
|
| 'keepZoom'
|
||||||
|
| 'keepZoomStart';
|
||||||
|
|
||||||
export type Settings = {
|
export type Settings = {
|
||||||
rightToLeft: boolean;
|
rightToLeft: boolean;
|
||||||
@@ -37,7 +39,7 @@ export type Settings = {
|
|||||||
zoomDefault: ZoomModes;
|
zoomDefault: ZoomModes;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type SettingsKey = keyof Settings
|
export type SettingsKey = keyof Settings;
|
||||||
|
|
||||||
const defaultSettings: Settings = {
|
const defaultSettings: Settings = {
|
||||||
rightToLeft: true,
|
rightToLeft: true,
|
||||||
@@ -51,12 +53,12 @@ const defaultSettings: Settings = {
|
|||||||
backgroundColor: '#0d0d0f',
|
backgroundColor: '#0d0d0f',
|
||||||
fontSize: 'auto',
|
fontSize: 'auto',
|
||||||
zoomDefault: 'zoomFitToScreen'
|
zoomDefault: 'zoomFitToScreen'
|
||||||
}
|
};
|
||||||
|
|
||||||
const stored = browser ? window.localStorage.getItem('settings') : undefined
|
const stored = browser ? window.localStorage.getItem('settings') : undefined;
|
||||||
const initialSettings: Settings = stored && browser ? JSON.parse(stored) : defaultSettings
|
const initialSettings: Settings = stored && browser ? JSON.parse(stored) : defaultSettings;
|
||||||
|
|
||||||
export * from './progress'
|
export * from './progress';
|
||||||
|
|
||||||
export const settings = writable<Settings>(initialSettings);
|
export const settings = writable<Settings>(initialSettings);
|
||||||
|
|
||||||
@@ -76,7 +78,6 @@ export function resetSettings() {
|
|||||||
|
|
||||||
settings.subscribe((settings) => {
|
settings.subscribe((settings) => {
|
||||||
if (browser) {
|
if (browser) {
|
||||||
window.localStorage.setItem('settings', JSON.stringify(settings))
|
window.localStorage.setItem('settings', JSON.stringify(settings));
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
import { browser } from "$app/environment";
|
import { browser } from '$app/environment';
|
||||||
import { writable } from "svelte/store";
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
type Progress = Record<string, number> | undefined
|
type Progress = Record<string, number> | undefined;
|
||||||
|
|
||||||
const stored = browser ? window.localStorage.getItem('progress') : undefined
|
const stored = browser ? window.localStorage.getItem('progress') : undefined;
|
||||||
const initial: Progress = stored && browser ? JSON.parse(stored) : undefined
|
const initial: Progress = stored && browser ? JSON.parse(stored) : undefined;
|
||||||
|
|
||||||
export const progress = writable<Progress>(initial);
|
export const progress = writable<Progress>(initial);
|
||||||
|
|
||||||
@@ -19,7 +19,6 @@ export function updateProgress(volume: string, value: number) {
|
|||||||
|
|
||||||
progress.subscribe((progress) => {
|
progress.subscribe((progress) => {
|
||||||
if (browser) {
|
if (browser) {
|
||||||
window.localStorage.setItem('progress', progress ? JSON.stringify(progress) : '')
|
window.localStorage.setItem('progress', progress ? JSON.stringify(progress) : '');
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -20,10 +20,10 @@ export type MokuroData = {
|
|||||||
volume: string;
|
volume: string;
|
||||||
volume_uuid: string;
|
volume_uuid: string;
|
||||||
pages: Page[];
|
pages: Page[];
|
||||||
}
|
};
|
||||||
|
|
||||||
export type Volume = {
|
export type Volume = {
|
||||||
mokuroData: MokuroData;
|
mokuroData: MokuroData;
|
||||||
volumeName: string;
|
volumeName: string;
|
||||||
files: Record<string, File>;
|
files: Record<string, File>;
|
||||||
}
|
};
|
||||||
|
|||||||
@@ -1,24 +1,23 @@
|
|||||||
import { db } from "$lib/catalog/db";
|
import { db } from '$lib/catalog/db';
|
||||||
import type { Volume } from "$lib/types";
|
import type { Volume } from '$lib/types';
|
||||||
import { showSnackbar } from "$lib/util/snackbar";
|
import { showSnackbar } from '$lib/util/snackbar';
|
||||||
import { requestPersistentStorage } from "$lib/util/upload";
|
import { requestPersistentStorage } from '$lib/util/upload';
|
||||||
import { BlobReader, ZipReader, BlobWriter, getMimeType } from "@zip.js/zip.js";
|
import { BlobReader, ZipReader, BlobWriter, getMimeType } from '@zip.js/zip.js';
|
||||||
|
|
||||||
export async function unzipManga(file: File) {
|
export async function unzipManga(file: File) {
|
||||||
const zipFileReader = new BlobReader(file);
|
const zipFileReader = new BlobReader(file);
|
||||||
const zipReader = new ZipReader(zipFileReader);
|
const zipReader = new ZipReader(zipFileReader);
|
||||||
|
|
||||||
const entries = await zipReader.getEntries()
|
const entries = await zipReader.getEntries();
|
||||||
const unzippedFiles: Record<string, File> = {};
|
const unzippedFiles: Record<string, File> = {};
|
||||||
|
|
||||||
|
|
||||||
for (const entry of entries) {
|
for (const entry of entries) {
|
||||||
const mime = getMimeType(entry.filename);
|
const mime = getMimeType(entry.filename);
|
||||||
if (mime === 'image/jpeg' || mime === 'image/png') {
|
if (mime === 'image/jpeg' || mime === 'image/png') {
|
||||||
const blob = await entry.getData?.(new BlobWriter(mime))
|
const blob = await entry.getData?.(new BlobWriter(mime));
|
||||||
if (blob) {
|
if (blob) {
|
||||||
const file = new File([blob], entry.filename, { type: mime })
|
const file = new File([blob], entry.filename, { type: mime });
|
||||||
unzippedFiles[entry.filename] = file
|
unzippedFiles[entry.filename] = file;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -32,7 +31,7 @@ function getDetails(file: File) {
|
|||||||
return {
|
return {
|
||||||
filename,
|
filename,
|
||||||
ext
|
ext
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getFile(fileEntry: FileSystemFileEntry) {
|
async function getFile(fileEntry: FileSystemFileEntry) {
|
||||||
@@ -50,31 +49,31 @@ export async function scanFiles(item: FileSystemEntry, files: Promise<File | und
|
|||||||
directoryReader.readEntries(async (entries) => {
|
directoryReader.readEntries(async (entries) => {
|
||||||
for (const entry of entries) {
|
for (const entry of entries) {
|
||||||
if (entry.isFile) {
|
if (entry.isFile) {
|
||||||
files.push(getFile(entry as FileSystemFileEntry))
|
files.push(getFile(entry as FileSystemFileEntry));
|
||||||
} else {
|
} else {
|
||||||
await scanFiles(entry, files);
|
await scanFiles(entry, files);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
resolve()
|
resolve();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function processFiles(files: File[]) {
|
export async function processFiles(files: File[]) {
|
||||||
const zipTypes = ['zip', 'cbz']
|
const zipTypes = ['zip', 'cbz'];
|
||||||
const volumes: Record<string, Volume> = {};
|
const volumes: Record<string, Volume> = {};
|
||||||
const mangas: string[] = [];
|
const mangas: string[] = [];
|
||||||
|
|
||||||
for (const file of files) {
|
for (const file of files) {
|
||||||
const { ext, filename } = getDetails(file)
|
const { ext, filename } = getDetails(file);
|
||||||
const { type, webkitRelativePath } = file
|
const { type, webkitRelativePath } = file;
|
||||||
|
|
||||||
if (ext === 'mokuro') {
|
if (ext === 'mokuro') {
|
||||||
const mokuroData: Volume['mokuroData'] = JSON.parse(await file.text())
|
const mokuroData: Volume['mokuroData'] = JSON.parse(await file.text());
|
||||||
|
|
||||||
if (!mangas.includes(mokuroData.title_uuid)) {
|
if (!mangas.includes(mokuroData.title_uuid)) {
|
||||||
mangas.push(mokuroData.title_uuid)
|
mangas.push(mokuroData.title_uuid);
|
||||||
}
|
}
|
||||||
|
|
||||||
volumes[filename] = {
|
volumes[filename] = {
|
||||||
@@ -85,21 +84,20 @@ export async function processFiles(files: File[]) {
|
|||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
const mimeType = type || getMimeType(file.name)
|
const mimeType = type || getMimeType(file.name);
|
||||||
|
|
||||||
if (mimeType === 'image/jpeg' || mimeType === 'image/png') {
|
if (mimeType === 'image/jpeg' || mimeType === 'image/png') {
|
||||||
|
|
||||||
if (webkitRelativePath) {
|
if (webkitRelativePath) {
|
||||||
const imageName = webkitRelativePath.split('/').at(-1)
|
const imageName = webkitRelativePath.split('/').at(-1);
|
||||||
const vol = webkitRelativePath.split('/').at(-2)
|
const vol = webkitRelativePath.split('/').at(-2);
|
||||||
|
|
||||||
if (vol && imageName) {
|
if (vol && imageName) {
|
||||||
volumes[vol] = {
|
volumes[vol] = {
|
||||||
...volumes[vol],
|
...volumes[vol],
|
||||||
files: {
|
files: {
|
||||||
...volumes[vol]?.files,
|
...volumes[vol]?.files,
|
||||||
[imageName]: file,
|
[imageName]: file
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -107,12 +105,12 @@ export async function processFiles(files: File[]) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (zipTypes.includes(ext)) {
|
if (zipTypes.includes(ext)) {
|
||||||
const unzippedFiles = await unzipManga(file)
|
const unzippedFiles = await unzipManga(file);
|
||||||
|
|
||||||
volumes[filename] = {
|
volumes[filename] = {
|
||||||
...volumes[filename],
|
...volumes[filename],
|
||||||
files: unzippedFiles
|
files: unzippedFiles
|
||||||
}
|
};
|
||||||
|
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
@@ -122,19 +120,19 @@ export async function processFiles(files: File[]) {
|
|||||||
|
|
||||||
if (vols.length > 0) {
|
if (vols.length > 0) {
|
||||||
const valid = vols.map((vol) => {
|
const valid = vols.map((vol) => {
|
||||||
const { files, mokuroData, volumeName } = vol
|
const { files, mokuroData, volumeName } = vol;
|
||||||
if (!mokuroData || !volumeName) {
|
if (!mokuroData || !volumeName) {
|
||||||
showSnackbar('Missing .mokuro file')
|
showSnackbar('Missing .mokuro file');
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!files) {
|
if (!files) {
|
||||||
showSnackbar('Missing image files')
|
showSnackbar('Missing image files');
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
return true
|
return true;
|
||||||
})
|
});
|
||||||
|
|
||||||
if (!valid.includes(false)) {
|
if (!valid.includes(false)) {
|
||||||
await requestPersistentStorage();
|
await requestPersistentStorage();
|
||||||
@@ -143,19 +141,21 @@ export async function processFiles(files: File[]) {
|
|||||||
const existingCatalog = await db.catalog.get(key);
|
const existingCatalog = await db.catalog.get(key);
|
||||||
|
|
||||||
const filtered = vols.filter((vol) => {
|
const filtered = vols.filter((vol) => {
|
||||||
return !existingCatalog?.manga.some(manga => {
|
return (
|
||||||
return manga.mokuroData.volume_uuid === vol.mokuroData.volume_uuid
|
!existingCatalog?.manga.some((manga) => {
|
||||||
}) && key === vol.mokuroData.title_uuid
|
return manga.mokuroData.volume_uuid === vol.mokuroData.volume_uuid;
|
||||||
})
|
}) && key === vol.mokuroData.title_uuid
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
if (existingCatalog) {
|
if (existingCatalog) {
|
||||||
await db.catalog.update(key, { manga: [...existingCatalog.manga, ...filtered] })
|
await db.catalog.update(key, { manga: [...existingCatalog.manga, ...filtered] });
|
||||||
} else {
|
} else {
|
||||||
await db.catalog.add({ id: key, manga: filtered })
|
await db.catalog.add({ id: key, manga: filtered });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
showSnackbar('Catalog updated successfully')
|
showSnackbar('Catalog updated successfully');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
export * from './snackbar'
|
export * from './snackbar';
|
||||||
export * from './upload'
|
export * from './upload';
|
||||||
export * from './misc'
|
export * from './misc';
|
||||||
export * from './modals'
|
export * from './modals';
|
||||||
|
|||||||
@@ -1,3 +1,3 @@
|
|||||||
export function clamp(num: number, min: number, max: number) {
|
export function clamp(num: number, min: number, max: number) {
|
||||||
return Math.min(Math.max(num, min), max);
|
return Math.min(Math.max(num, min), max);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { writable } from "svelte/store";
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
type ConfirmationPopup = {
|
type ConfirmationPopup = {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
@@ -14,4 +14,3 @@ export function promptConfirmation(message: string, onConfirm?: () => void) {
|
|||||||
onConfirm
|
onConfirm
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { writable } from "svelte/store";
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
type Snackbar = {
|
type Snackbar = {
|
||||||
visible: boolean;
|
visible: boolean;
|
||||||
@@ -15,4 +15,4 @@ export function showSnackbar(message: string, duration = 3000) {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
snackbarStore.set(undefined);
|
snackbarStore.set(undefined);
|
||||||
}, duration);
|
}, duration);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,14 +1,14 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import '../app.postcss';
|
import '../app.postcss';
|
||||||
import NavBar from '$lib/components/NavBar.svelte';
|
import NavBar from '$lib/components/NavBar.svelte';
|
||||||
import Snackbar from '$lib/components/Snackbar.svelte';
|
import Snackbar from '$lib/components/Snackbar.svelte';
|
||||||
import ConfirmationPopup from '$lib/components/ConfirmationPopup.svelte';
|
import ConfirmationPopup from '$lib/components/ConfirmationPopup.svelte';
|
||||||
import { settings } from '$lib/settings';
|
import { settings } from '$lib/settings';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class=" h-full min-h-[100svh] text-white" style:background-color={$settings.backgroundColor}>
|
<div class=" h-full min-h-[100svh] text-white" style:background-color={$settings.backgroundColor}>
|
||||||
<NavBar />
|
<NavBar />
|
||||||
<Snackbar />
|
<Snackbar />
|
||||||
<ConfirmationPopup />
|
<ConfirmationPopup />
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Catalog from '$lib/components/Catalog.svelte';
|
import Catalog from '$lib/components/Catalog.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="p-2">
|
<div class="p-2">
|
||||||
<Catalog />
|
<Catalog />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h1>{$page.status}: {$page.error?.message}</h1>
|
<h1>{$page.status}: {$page.error?.message}</h1>
|
||||||
|
|||||||
@@ -1,48 +1,48 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { currentManga } from '$lib/catalog';
|
import { currentManga } from '$lib/catalog';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import VolumeItem from '$lib/components/VolumeItem.svelte';
|
import VolumeItem from '$lib/components/VolumeItem.svelte';
|
||||||
import { Button } from 'flowbite-svelte';
|
import { Button } from 'flowbite-svelte';
|
||||||
import { db } from '$lib/catalog/db';
|
import { db } from '$lib/catalog/db';
|
||||||
import { promptConfirmation } from '$lib/util';
|
import { promptConfirmation } from '$lib/util';
|
||||||
|
|
||||||
const manga = $currentManga?.sort((a, b) => {
|
const manga = $currentManga?.sort((a, b) => {
|
||||||
if (a.volumeName < b.volumeName) {
|
if (a.volumeName < b.volumeName) {
|
||||||
return -1;
|
return -1;
|
||||||
}
|
}
|
||||||
if (a.volumeName > b.volumeName) {
|
if (a.volumeName > b.volumeName) {
|
||||||
return 1;
|
return 1;
|
||||||
}
|
}
|
||||||
return 0;
|
return 0;
|
||||||
});
|
});
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
if (!manga) {
|
if (!manga) {
|
||||||
goto('/');
|
goto('/');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
async function confirmDelete() {
|
async function confirmDelete() {
|
||||||
const title = manga?.[0].mokuroData.title_uuid;
|
const title = manga?.[0].mokuroData.title_uuid;
|
||||||
await db.catalog.delete(title);
|
await db.catalog.delete(title);
|
||||||
goto('/');
|
goto('/');
|
||||||
}
|
}
|
||||||
|
|
||||||
function onDelete() {
|
function onDelete() {
|
||||||
promptConfirmation('Are you sure you want to delete this manga?', confirmDelete);
|
promptConfirmation('Are you sure you want to delete this manga?', confirmDelete);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="p-2 flex flex-col gap-5">
|
<div class="p-2 flex flex-col gap-5">
|
||||||
<div class="sm:block flex-col flex">
|
<div class="sm:block flex-col flex">
|
||||||
<Button outline color="red" class="float-right" on:click={onDelete}>Delete manga</Button>
|
<Button outline color="red" class="float-right" on:click={onDelete}>Delete manga</Button>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-row gap-5 flex-wrap">
|
<div class="flex flex-row gap-5 flex-wrap">
|
||||||
{#if manga}
|
{#if manga}
|
||||||
{#each manga as volume}
|
{#each manga as volume}
|
||||||
<VolumeItem {volume} />
|
<VolumeItem {volume} />
|
||||||
{/each}
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,21 +1,21 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { currentVolume } from '$lib/catalog';
|
import { currentVolume } from '$lib/catalog';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
|
|
||||||
const volume = $currentVolume;
|
const volume = $currentVolume;
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
if (!volume) {
|
if (!volume) {
|
||||||
goto('/');
|
goto('/');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<slot />
|
<slot />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:global(body.reader) {
|
:global(body.reader) {
|
||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Reader from '$lib/components/Reader/Reader.svelte';
|
import Reader from '$lib/components/Reader/Reader.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Reader />
|
<Reader />
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Catalog from '$lib/components/Catalog.svelte';
|
import Catalog from '$lib/components/Catalog.svelte';
|
||||||
import FileUpload from '$lib/components/FileUpload.svelte';
|
import FileUpload from '$lib/components/FileUpload.svelte';
|
||||||
import { processFiles } from '$lib/upload';
|
import { processFiles } from '$lib/upload';
|
||||||
|
|
||||||
let promise: Promise<void>;
|
let promise: Promise<void>;
|
||||||
|
|
||||||
async function onUpload(files: FileList) {
|
async function onUpload(files: FileList) {
|
||||||
promise = processFiles([...files]);
|
promise = processFiles([...files]);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Note: webkitdirectory is not fully supported and does not work on mobile -->
|
<!-- Note: webkitdirectory is not fully supported and does not work on mobile -->
|
||||||
@@ -15,5 +15,5 @@
|
|||||||
<FileUpload {onUpload} accept=".mokuro,.zip,.cbz" multiple>Upload files</FileUpload>
|
<FileUpload {onUpload} accept=".mokuro,.zip,.cbz" multiple>Upload files</FileUpload>
|
||||||
|
|
||||||
{#await promise}
|
{#await promise}
|
||||||
<h2>Loading...</h2>
|
<h2>Loading...</h2>
|
||||||
{/await}
|
{/await}
|
||||||
|
|||||||
@@ -3,20 +3,20 @@ import { vitePreprocess } from '@sveltejs/kit/vite';
|
|||||||
|
|
||||||
/** @type {import('@sveltejs/kit').Config} */
|
/** @type {import('@sveltejs/kit').Config} */
|
||||||
const config = {
|
const config = {
|
||||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||||
// for more information about preprocessors
|
// for more information about preprocessors
|
||||||
preprocess: vitePreprocess(),
|
preprocess: vitePreprocess(),
|
||||||
|
|
||||||
kit: {
|
kit: {
|
||||||
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
||||||
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
|
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
|
||||||
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
||||||
adapter: adapter()
|
adapter: adapter()
|
||||||
},
|
},
|
||||||
|
|
||||||
vitePlugin: {
|
vitePlugin: {
|
||||||
inspector: true
|
inspector: true
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export default config;
|
export default config;
|
||||||
|
|||||||
@@ -1,13 +1,17 @@
|
|||||||
/** @type {import('tailwindcss').Config}*/
|
/** @type {import('tailwindcss').Config}*/
|
||||||
const config = {
|
const config = {
|
||||||
content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte-icons/**/*.{html,js,svelte,ts}'],
|
content: [
|
||||||
|
'./src/**/*.{html,js,svelte,ts}',
|
||||||
|
'./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}',
|
||||||
|
'./node_modules/flowbite-svelte-icons/**/*.{html,js,svelte,ts}'
|
||||||
|
],
|
||||||
|
|
||||||
theme: {
|
theme: {
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
'sans': 'Verdana, Geneva, Tahoma, sans-serif'
|
sans: 'Verdana, Geneva, Tahoma, sans-serif'
|
||||||
},
|
},
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
primary: {
|
primary: {
|
||||||
50: '#FFF5F2',
|
50: '#FFF5F2',
|
||||||
100: '#FFF1EE',
|
100: '#FFF1EE',
|
||||||
@@ -21,12 +25,12 @@ const config = {
|
|||||||
900: '#A5371B'
|
900: '#A5371B'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
plugins: [require('flowbite/plugin')],
|
plugins: [require('flowbite/plugin')],
|
||||||
|
|
||||||
darkMode: 'class',
|
darkMode: 'class'
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = config;
|
module.exports = config;
|
||||||
|
|||||||
@@ -1,17 +1,17 @@
|
|||||||
{
|
{
|
||||||
"extends": "./.svelte-kit/tsconfig.json",
|
"extends": "./.svelte-kit/tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
"checkJs": true,
|
"checkJs": true,
|
||||||
"esModuleInterop": true,
|
"esModuleInterop": true,
|
||||||
"forceConsistentCasingInFileNames": true,
|
"forceConsistentCasingInFileNames": true,
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"sourceMap": true,
|
"sourceMap": true,
|
||||||
"strict": true
|
"strict": true
|
||||||
}
|
}
|
||||||
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
|
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
|
||||||
//
|
//
|
||||||
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
||||||
// from the referenced tsconfig.json - TypeScript does not merge them in
|
// from the referenced tsconfig.json - TypeScript does not merge them in
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,8 +2,8 @@ import { sveltekit } from '@sveltejs/kit/vite';
|
|||||||
import { defineConfig } from 'vite';
|
import { defineConfig } from 'vite';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [sveltekit()],
|
plugins: [sveltekit()],
|
||||||
server: {
|
server: {
|
||||||
host: true
|
host: true
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user