SPA & Text Inputs

This commit is contained in:
Neshura 2023-10-11 23:04:07 +02:00
parent c7375caef1
commit 85f86a36e8
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
10 changed files with 80 additions and 21 deletions

View file

@ -14,14 +14,15 @@
"@tauri-apps/api": "^1.4.0" "@tauri-apps/api": "^1.4.0"
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-static": "^2.0.3",
"@sveltejs/vite-plugin-svelte": "^2.4.2", "@sveltejs/vite-plugin-svelte": "^2.4.2",
"@tauri-apps/cli": "^1.4.0",
"@tsconfig/svelte": "^5.0.0", "@tsconfig/svelte": "^5.0.0",
"svelte": "^4.0.5", "svelte": "^4.0.5",
"svelte-check": "^3.4.6", "svelte-check": "^3.4.6",
"svelte-preprocess": "^5.0.0", "svelte-preprocess": "^5.0.0",
"tslib": "^2.6.0", "tslib": "^2.6.0",
"typescript": "^5.0.2", "typescript": "^5.0.2",
"vite": "^4.4.4", "vite": "^4.4.4"
"@tauri-apps/cli": "^1.4.0"
} }
} }

View file

@ -3,7 +3,7 @@
"beforeDevCommand": "yarn dev", "beforeDevCommand": "yarn dev",
"beforeBuildCommand": "yarn build", "beforeBuildCommand": "yarn build",
"devPath": "http://localhost:1420", "devPath": "http://localhost:1420",
"distDir": "../dist", "distDir": "../build",
"withGlobalTauri": false "withGlobalTauri": false
}, },
"package": { "package": {
@ -21,7 +21,7 @@
"bundle": { "bundle": {
"active": true, "active": true,
"targets": "all", "targets": "all",
"identifier": "com.tauri.dev", "identifier": "com.comicinfo.editor",
"icon": [ "icon": [
"icons/32x32.png", "icons/32x32.png",
"icons/128x128.png", "icons/128x128.png",

2
src/+layout.ts Normal file
View file

@ -0,0 +1,2 @@
export const prerender = true
export const ssr = false

View file

@ -4,6 +4,12 @@
export let negative = false; export let negative = false;
export let defaultValue = 0;
if (typeof value === "undefined") {
value = defaultValue;
}
function inputInteger(event: Event & {currentTarget: (EventTarget & HTMLInputElement)}) { function inputInteger(event: Event & {currentTarget: (EventTarget & HTMLInputElement)}) {
let newValue = event.currentTarget.value; let newValue = event.currentTarget.value;
@ -11,7 +17,7 @@
newValue = newValue.slice(1, newValue.length) newValue = newValue.slice(1, newValue.length)
} }
if (!isNaN(Number(newValue))) { if (newValue != "" && !isNaN(Number(newValue))) {
value = Number(newValue); value = Number(newValue);
} }
else if (negative && newValue.startsWith("-")) { else if (negative && newValue.startsWith("-")) {
@ -20,8 +26,8 @@
} }
} }
else if (newValue === "") { else if (newValue === "") {
event.currentTarget.value = "0"; event.currentTarget.value = defaultValue.toString();
value = 0; value = defaultValue;
} }
else { else {
event.currentTarget.value = value.toString(); event.currentTarget.value = value.toString();

View file

@ -2,21 +2,37 @@
import {writable} from "svelte/store"; import {writable} from "svelte/store";
import type {Writable} from "svelte/store"; import type {Writable} from "svelte/store";
import IntegerInput from "./IntegerInput.svelte"; import IntegerInput from "./IntegerInput.svelte";
import TextInput from "./TextInput.svelte";
let seriesTitle = "";
let volumeTitle = "";
let volumeNumber = 0; let volumeNumber = 0;
let chapterNumber = 0; let chapterNumber = 0;
let pageCount = 0; let pageCount = 1;
let chapterCount = 0; let chapterCount = 0;
let summary = "";
let releaseYear: number;
let releaseMonth: number;
let releaseDay: number;
let author: string;
let typesetter: string;
let editor: string;
let translator: string;
let publisher: string;
let tags: Vec<string>;
let genre = "Hentai";
let lang = "en";
let ageRating = "18+";
</script> </script>
<div class="metadataInput"> <div class="metadataInput">
<h1>Metadata</h1> <h1>Metadata</h1>
<label for="series">Series:</label> <label for="series">Series:</label>
<input id="series" type="text"><br> <TextInput id="series" bind:value={seriesTitle} placeholder="Series Title" /><br>
<label for="title">Title:</label> <label for="title">Title:</label>
<input id="title" type="text"><br> <TextInput id="title" bind:value={volumeTitle} placeholder="Volume Title" /><br>
<label for="volume">Volume:</label> <label for="volume">Volume:</label>
<IntegerInput id="volume" bind:value={volumeNumber} /> <IntegerInput id="volume" bind:value={volumeNumber} />
@ -26,34 +42,36 @@
<IntegerInput id="chapter_count" bind:value={chapterCount} negative={true}/><br> <IntegerInput id="chapter_count" bind:value={chapterCount} negative={true}/><br>
<label for="page_count">Page Count</label> <label for="page_count">Page Count</label>
<IntegerInput id="page_count" bind:value={pageCount} /><br> <IntegerInput id="page_count" bind:value={pageCount} defaultValue={1} /><br>
<label for="summary">Summary:</label><br> <label for="summary">Summary:</label><br>
<label for="summary"></label><input id="series" type="text"><br> <label for="summary"></label><input id="series" type="text"><br>
<label for="release_date">Release Date:</label> <label for="release_date">Release Date:</label>
<input id="release_date" type="text"><br> <IntegerInput id="release_year" bind:value={releaseYear} defaultValue={new Date().getFullYear()} />
<IntegerInput id="release_month" bind:value={releaseMonth} defaultValue={new Date().getMonth()} />
<IntegerInput id="release_day" bind:value={releaseDay} defaultValue={new Date().getDay()} /><br>
<label for="author">Author:</label> <label for="author">Author:</label>
<input id="author" type="text"> <TextInput id="author" bind:value={author} placeholder="Author" />
<label for="typesetter">Typesetter:</label> <label for="typesetter">Typesetter:</label>
<input id="typesetter" type="text"> <TextInput id="typesetter" bind:value={typesetter} placeholder="Typesetter" />
<label for="editor">Editor:</label> <label for="editor">Editor:</label>
<input id="editor" type="text"><br> <TextInput id="editor" bind:value={editor} placeholder="Editor" /><br>
<label for="translator">Translator</label> <label for="translator">Translator</label>
<input id="translator" type="text"> <TextInput id="translator" bind:value={translator} placeholder="Translator" />
<label for="publisher">Publisher</label> <label for="publisher">Publisher</label>
<input id="publisher" type="text"><br> <TextInput id="publisher" bind:value={publisher} placeholder="Publisher" /><br>
<label for="tags">Tags</label> <label for="tags">Tags</label>
<input id="tags" type="text"><br> <input id="tags" type="text"><br>
<label for="genre">Genre</label> <label for="genre">Genre</label>
<input id="genre" type="text"> <TextInput id="genre" bind:value={genre} placeholder="Genre" />
<label for="lang">Language</label> <label for="lang">Language</label>
<input id="lang" type="text"><br> <input id="lang" type="text"><br>

View file

@ -36,8 +36,8 @@
} }
.sidebar-button img { .sidebar-button img {
width: 100%; width: 70%;
height: 100%; height: 70%;
object-fit: contain; object-fit: contain;
} }

18
src/lib/TextInput.svelte Normal file
View file

@ -0,0 +1,18 @@
<script lang="ts">
export let id: string;
export let value: string = "";
export let placeholder: string = "";
let width: number;
$: width = Math.max(value.length + 3, placeholder.length + 3);
</script>
<input {id} type="text" class="letterInput" style="--valuelen: {width}ch" bind:value={value} {placeholder}>
<style>
.letterInput {
width: var(--valuelen);
padding-left: 1ch;
}
</style>

View file

@ -1,5 +1,5 @@
:root { :root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif; font-family: Courier New;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
font-weight: 400; font-weight: 400;
@ -23,6 +23,7 @@ body, html {
* { * {
box-sizing: border-box; box-sizing: border-box;
font-family: inherit;
} }
.app { .app {

View file

@ -1,7 +1,15 @@
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"; import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
import adapter from '@sveltejs/adapter-static';
export default { export default {
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
// for more information about preprocessors // for more information about preprocessors
preprocess: vitePreprocess(), preprocess: vitePreprocess(),
kit: {
adapter: adapter({
pages: 'build',
assets: 'build',
fallback: 'index.html'
})
},
}; };

View file

@ -173,6 +173,11 @@
"@nodelib/fs.scandir" "2.1.5" "@nodelib/fs.scandir" "2.1.5"
fastq "^1.6.0" fastq "^1.6.0"
"@sveltejs/adapter-static@^2.0.3":
version "2.0.3"
resolved "https://registry.yarnpkg.com/@sveltejs/adapter-static/-/adapter-static-2.0.3.tgz#616836c30bdce4d673a2e26c0f5ffbd5c1bc7c67"
integrity sha512-VUqTfXsxYGugCpMqQv1U0LIdbR3S5nBkMMDmpjGVJyM6Q2jHVMFtdWJCkeHMySc6mZxJ+0eZK3T7IgmUCDrcUQ==
"@sveltejs/vite-plugin-svelte-inspector@^1.0.4": "@sveltejs/vite-plugin-svelte-inspector@^1.0.4":
version "1.0.4" version "1.0.4"
resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.4.tgz#c99fcb73aaa845a3e2c0563409aeb3ee0b863add" resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.4.tgz#c99fcb73aaa845a3e2c0563409aeb3ee0b863add"