sudacode/mokuro-reader
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Misc changes

Browse Source
This commit is contained in:
ZXY101
2023-09-14 15:34:39 +02:00
parent ba488ab434
commit 7b44042505
5 changed files with 22 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/lib/components/CatalogItem.svelte
View File

@@ -10,25 +10,14 @@
</script> </script>
<a href={volumeName} on:click={onClick}> <a href={volumeName} on:click={onClick}>
<div class="content"> <div class="flex flex-col gap-[5px] text-center">
{mokuroData.title} {mokuroData.title}
{#if files} {#if files}
<img src={URL.createObjectURL(Object.values(files)[0])} alt="img" /> <img
src={URL.createObjectURL(Object.values(files)[0])}
alt="img"
class="object-contain w-[250px] h-[350px] bg-black border-gray-900 border"
/>
{/if} {/if}
</div> </div>
</a> </a>
<style>
img {
width: 250px;
height: 350px;
object-fit: contain;
}
.content {
display: flex;
flex-direction: column;
gap: 5px;
text-align: center;
}
</style>

4
src/lib/components/Reader/MangaPage.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { settingsStore } from '$lib/settings'; import { settings } from '$lib/settings';
import type { Page } from '$lib/types'; import type { Page } from '$lib/types';
import { clamp } from '$lib/util'; import { clamp } from '$lib/util';
@@ -7,7 +7,7 @@
export let left: () => void; export let left: () => void;
export let right: () => void; export let right: () => void;
$: fontWeight = $settingsStore.boldFont ? 'bold' : '400'; $: fontWeight = $settings.boldFont ? 'bold' : '400';
$: textBoxes = page.blocks.map((block) => { $: textBoxes = page.blocks.map((block) => {
const { img_height, img_width } = page; const { img_height, img_width } = page;

16
src/lib/components/Settings.svelte
View File

@@ -2,7 +2,7 @@
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, settingsStore, updateSetting } from '$lib/settings'; import { resetSettings, settings, updateSetting } from '$lib/settings';
import { promptConfirmation } from '$lib/util'; import { promptConfirmation } from '$lib/util';
let transitionParams = { let transitionParams = {
@@ -22,12 +22,12 @@
]; ];
$: toggles = [ $: toggles = [
{ key: 'rightToLeft', text: 'Right to left', value: $settingsStore.rightToLeft }, { key: 'rightToLeft', text: 'Right to left', value: $settings.rightToLeft },
{ key: 'singlePageView', text: 'Single page view', value: $settingsStore.singlePageView }, { key: 'singlePageView', text: 'Single page view', value: $settings.singlePageView },
{ key: 'textEditable', text: 'Editable text', value: $settingsStore.textEditable }, { key: 'textEditable', text: 'Editable text', value: $settings.textEditable },
{ key: 'textBoxBorders', text: 'Text box borders', value: $settingsStore.textBoxBorders }, { key: 'textBoxBorders', text: 'Text box borders', value: $settings.textBoxBorders },
{ key: 'displayOCR', text: 'OCR enabled', value: $settingsStore.displayOCR }, { key: 'displayOCR', text: 'OCR enabled', value: $settings.displayOCR },
{ key: 'boldFont', text: 'Bold font', value: $settingsStore.boldFont } { key: 'boldFont', text: 'Bold font', value: $settings.boldFont }
]; ];
function onChange(event: Event) { function onChange(event: Event) {
@@ -66,7 +66,7 @@
</div> </div>
<div> <div>
<Label>Background color:</Label> <Label>Background color:</Label>
<Input type="color" on:change={onChange} value={$settingsStore.backgroundColor} /> <Input type="color" on:change={onChange} value={$settings.backgroundColor} />
</div> </div>
<Button outline on:click={onReset}>Reset</Button> <Button outline on:click={onReset}>Reset</Button>
</div> </div>

8
src/lib/settings/index.ts
View File

@@ -26,10 +26,10 @@ const defaultSettings: Settings = {
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 const settingsStore = writable<Settings>(initialSettings); export const settings = writable<Settings>(initialSettings);
export function updateSetting(key: string, value: any) { export function updateSetting(key: string, value: any) {
settingsStore.update((settings) => { settings.update((settings) => {
return { return {
...settings, ...settings,
[key]: value [key]: value
@@ -38,10 +38,10 @@ export function updateSetting(key: string, value: any) {
} }
export function resetSettings() { export function resetSettings() {
settingsStore.set(defaultSettings); settings.set(defaultSettings);
} }
settingsStore.subscribe((settings) => { settings.subscribe((settings) => {
if (browser) { if (browser) {
window.localStorage.setItem('settings', JSON.stringify(settings)) window.localStorage.setItem('settings', JSON.stringify(settings))
} }

4
src/routes/+layout.svelte
View File

@@ -3,10 +3,10 @@
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 { settingsStore } from '$lib/settings'; import { settings } from '$lib/settings';
</script> </script>
<div class="h-screen text-white" style:background-color={$settingsStore.backgroundColor}> <div class="h-screen text-white" style:background-color={$settings.backgroundColor}>
<NavBar /> <NavBar />
<Snackbar /> <Snackbar />
<ConfirmationPopup /> <ConfirmationPopup />