bookish-press 0.4.1 → 0.4.16

package/components/page/Search.svelte

@@ -1,33 +1,27 @@
-<script>import Header from "./Header.svelte";
+<script>import Header from './Header.svelte';
 import Outline from './Outline.svelte';
 import Page from './Page.svelte';
-import Link from "../Link.svelte";
+import Link from '../Link.svelte';
 import Chapter from '../../models/book/Chapter';
 import ChapterIDs from '../../models/book/ChapterID';
-import { onMount } from "svelte";
-import { getBase, getEdition } from "./Contexts";
+import { getBase, getEdition } from './Contexts';
+import TextInput from '../app/TextInput.svelte';
+import ChapterTitle from './ChapterTitle.svelte';
+import ChapterNumber from './ChapterNumber.svelte';
+import PageHeader from './PageHeader.svelte';
 let edition = getEdition();
 let base = getBase();
-let query = "";
-let input = null;
-// Focus the query box when loaded
-onMount(() => { if (input)
-    input.focus(); });
-// Don't allow spaces
-function handleKeyDown(event) {
-    if (event.key === " ") {
-        event.preventDefault();
-    }
-}
+let query = '';
 let results = [];
 $: {
     // Reset the results
     results = [];
     const lowerQuery = query.toLowerCase();
+    query = query.trim();
     // Go through all the chapter indexes and find matches.
-    if (query.length > 2)
-        for (const chapter of $edition.getChapters()) {
-            let index = chapter.getIndex();
+    if ($edition && query.length > 2)
+        for (const chapter of $edition?.getChapters() ?? []) {
+            let index = chapter.getIndex($edition);
             // No index yet? Skip this chapter.
             if (index) {
                 // Build a DOM to render matches.
@@ -47,12 +41,15 @@ $: {
                     results.push(chapter);
                     chapterMatches.forEach((match, index) => {
                         // Only highlight the part of the word that matches.
-                        const start = match.match.toLowerCase().indexOf(lowerQuery);
+                        const start = match.match
+                            .toLowerCase()
+                            .indexOf(lowerQuery);
                         results.push({
-                            link: `${base}/${chapter.getChapterID()}?word=${match.match.toLowerCase()}&number=${index}`,
-                            left: match.left + match.match.substring(0, start),
+                            link: `${$base}${chapter.getID()}?word=${match.match.toLowerCase()}&number=${index}`,
+                            left: match.left +
+                                match.match.substring(0, start),
                             match: match.match.substring(start, start + query.length),
-                            right: match.match.substring(start + query.length) + match.right
+                            right: match.match.substring(start + query.length) + match.right,
                         });
                     });
                 }
@@ -61,48 +58,74 @@ $: {
 }
 </script>
 
-<Page title={`${$edition.getTitle()} - Search`}>
-    <Header 
-        label="Search title"
-        getImage={() => $edition.getImage(ChapterIDs.SearchID)}
-        setImage={(embed) => $edition.setImage(ChapterIDs.SearchID, embed)}
-        header="Search"
-        tags={$edition.getTags()}
-    >
-        <Outline
-            slot="outline"
-            previous={$edition.getPreviousChapterID(ChapterIDs.SearchID)}
-            next={$edition.getNextChapterID(ChapterIDs.SearchID)}
-        />    
-    </Header>
+{#if $edition}
+    <Page title={`${$edition.getTitle()} - Search`}>
+        <Header
+            label="Search title"
+            getImage={() => $edition?.getImage(ChapterIDs.SearchID) ?? null}
+            setImage={(embed) =>
+                $edition
+                    ? edition.set(
+                          $edition.withImage(ChapterIDs.SearchID, embed)
+                      )
+                    : undefined}
+            header="Search"
+            tags={$edition.getTags()}
+        >
+            <Outline
+                slot="outline"
+                previous={$edition.getPreviousChapterID(ChapterIDs.SearchID)}
+                next={$edition.getNextChapterID(ChapterIDs.SearchID)}
+            />
+        </Header>
 
-    <p>Type a word—just a single word—and we'll show its occurrences in this book:</p>
+        <p>
+            Type a word—just a single word—and we'll show its occurrences in
+            this book:
+        </p>
 
-    <p>
-        <input 
-            type="text" 
-            name="query" 
-            placeholder={"search for a word"} 
-            on:keydown={handleKeyDown}
-            bind:this={input} 
-            bind:value={query}
-        />
-    </p>
+        <p>
+            <TextInput
+                type="text"
+                placeholder={'search for a word'}
+                disabled={false}
+                bind:text={query}
+            />
+        </p>
 
-    {#if query !== "" }
-        {#if query.length < 3 }
-            <p>Keep typing...</p>
-        {:else if results.length === 0 }
-            <p>No occurrence of <em>{query}</em>.</p>
-        {:else}
-            <p>Found {results.filter(result => !(result instanceof Chapter)).length} occurrences of <em>{query}</em>...</p>
-            {#each results as result }
-                {#if result instanceof Chapter }
-                    <h2 class="bookish-header" id={"header-" + result.getChapterID()}>Chapter{#if $edition.getChapterNumber(result.getChapterID()) !== undefined}&nbsp;{$edition.getChapterNumber(result.getChapterID())}{/if} - {result.getTitle()}</h2>
-                {:else}
-                    <p><Link to={result.link}>...{result.left}<span class="bookish-content-highlight">{result.match}</span>{result.right}...</Link></p>
-                {/if}
-            {/each}
+        {#if query.trim() !== ''}
+            {#if query.trim().length < 3}
+                <p>Keep typing...</p>
+            {:else if results.length === 0}
+                <p>No occurrence of <em>{query}</em>.</p>
+            {:else}
+                <p
+                    >Found {results.filter(
+                        (result) => !(result instanceof Chapter)
+                    ).length} occurrences of <em>{query}</em>...</p
+                >
+                {#each results as result}
+                    {#if result instanceof Chapter}
+                        <PageHeader id={'header-' + result.getID()}
+                            ><ChapterNumber
+                                >Chapter{#if $edition.getChapterNumber(result.getID()) !== undefined}&nbsp;{$edition.getChapterNumber(
+                                        result.getID()
+                                    )}{/if}</ChapterNumber
+                            > - <ChapterTitle>{result.getTitle()}</ChapterTitle
+                            ></PageHeader
+                        >
+                    {:else}
+                        <p
+                            ><Link to={result.link}
+                                >...{result.left}<span
+                                    class="bookish-content-highlight"
+                                    >{result.match}</span
+                                >{result.right}...</Link
+                            ></p
+                        >
+                    {/if}
+                {/each}
+            {/if}
         {/if}
-    {/if}
-</Page>
+    </Page>
+{/if}

package/components/page/Search.svelte.d.ts

@@ -1,14 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type SearchProps = typeof __propDef.props;
-export declare type SearchEvents = typeof __propDef.events;
-export declare type SearchSlots = typeof __propDef.slots;
+export type SearchProps = typeof __propDef.props;
+export type SearchEvents = typeof __propDef.events;
+export type SearchSlots = typeof __propDef.slots;
 export default class Search extends SvelteComponentTyped<SearchProps, SearchEvents, SearchSlots> {
 }
 export {};

package/components/page/Status.svelte

@@ -1,49 +1,57 @@
-<script>import { BookSaveStatus } from "../../models/book/Edition";
-import { onMount } from "svelte";
-export let book;
-export let edition;
-let status = BookSaveStatus.Saved;
-function handleBookChange(newStatus) {
-    status = newStatus;
-}
-// Listen to book and chapter changes.
-onMount(() => {
-    book?.addListener(status => handleBookChange(status));
-    edition.addListener((status) => handleBookChange(status));
-    return () => {
-        book?.removeListener(handleBookChange);
-        edition.removeListener(handleBookChange);
-    };
-});
+<script>import BookSaveStatus from '../../models/book/BookSaveStatus';
+import { getStatus } from './Contexts';
+let status = getStatus();
 </script>
 
-<div class={`bookish-editor-status ${status === BookSaveStatus.Saving ? "bookish-editor-status-saving" : status === BookSaveStatus.Error ? "bookish-editor-status-error" : ""}`}>
-    {
-        status === BookSaveStatus.Changed ? "\u270E Editing" :
-        status === BookSaveStatus.Saving ? "\u2026 Saving" :
-        status === BookSaveStatus.Saved ? "\u2713 Saved" :
-        status === BookSaveStatus.Error ? "\u2715 Couldn't save." :
-        ""
-    }
-</div>
+<span
+    class={`bookish-editor-status ${
+        $status === BookSaveStatus.Saving
+            ? 'bookish-editor-status-saving'
+            : $status === BookSaveStatus.Error
+            ? 'bookish-editor-status-error'
+            : ''
+    }`}
+>
+    {$status === BookSaveStatus.Changed
+        ? '\u270E Editing'
+        : $status === BookSaveStatus.Saving
+        ? '\u2026 Saving'
+        : $status === BookSaveStatus.Saved
+        ? '\u2713 Saved'
+        : $status === BookSaveStatus.Error
+        ? "\u2715 Couldn't save."
+        : ''}
+</span>
 
 <style>
     .bookish-editor-status {
-        position: fixed;
-        top: var(--bookish-app-chrome-spacing);
-        right: var(--bookish-app-chrome-spacing);
-        z-index: 3;
-        color: var(--bookish-muted-color);
-        font-family: var(--bookish-header-font-family);
-        font-size: var(--bookish-small-font-size);
+        color: var(--app-muted-color);
+        font-family: var(--app-font);
+        white-space: nowrap;
     }
 
     .bookish-editor-status-error {
-        color: var(--bookish-app-error-color);
+        color: var(--app-error-color);
         animation: failure 100ms infinite;
     }
 
     .bookish-editor-status-saving {
         animation: waiting 100ms infinite;
     }
-</style>
+
+    @keyframes waiting {
+        from,
+        to {
+            transform: scale(1, 1);
+        }
+        25% {
+            transform: scale(1, 1.2);
+        }
+        50% {
+            transform: scale(1, 1);
+        }
+        75% {
+            transform: scale(1, 1.1);
+        }
+    }
+</style>

package/components/page/Status.svelte.d.ts

@@ -1,19 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-import type Book from "../../models/book/Book";
-import type Edition from "../../models/book/Edition";
 declare const __propDef: {
-    props: {
-        book: Book | undefined;
-        edition: Edition;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type StatusProps = typeof __propDef.props;
-export declare type StatusEvents = typeof __propDef.events;
-export declare type StatusSlots = typeof __propDef.slots;
+export type StatusProps = typeof __propDef.props;
+export type StatusEvents = typeof __propDef.events;
+export type StatusSlots = typeof __propDef.slots;
 export default class Status extends SvelteComponentTyped<StatusProps, StatusEvents, StatusSlots> {
 }
 export {};

package/components/page/SubdomainEditor.svelte

@@ -1,30 +1,43 @@
-<script>import TextEditor from "../editor/TextEditor.svelte";
-import { subdomainIsAvailable } from "../../models/Firestore";
-import { getBook } from "./Contexts";
+<script>import TextEditor from '../editor/TextEditor.svelte';
+import { isSubdomainAvailable } from '../../models/CRUD';
+import { getBook } from './Contexts';
+import Muted from './Muted.svelte';
 let book = getBook();
-const invalidNames = ["email", "login", "confirm", "read", "write"];
+const invalidNames = [
+    'email',
+    'login',
+    'confirm',
+    'read',
+    'write',
+];
 </script>
 
-<span class="bookish-muted">
-    <TextEditor 
-        startText={book.getSubdomain() ?? ""} 
-        label="Book domain editor"
-        save={
-            // Save the new domain
-            async domain => {
-                const available = await subdomainIsAvailable(domain, book);
-                if(available)
-                    book.setSubdomain(domain);
-                else throw Error("Domain isn't available");
-            }
-        }
-        placeholder="URL name"
-        valid={newDomain =>
-            // If not the empty string, must be a valid URL subdomain, and none of the existing routes.
-            invalidNames.includes(newDomain) || (newDomain.length > 0 && !/^[A-Za-z0-9](?:[A-Za-z0-9\-]{0,61}[A-Za-z0-9])?$/.test(newDomain)) ? `Book domains must be fewer than 63 characters, made of symbols a-z, A-Z, and 0-9, and not one of ${invalidNames.join(", ")}.` :
-            undefined
-        }
-        saveOnExit={true}
-    />
-    <br/>
-</span>
+{#if $book}
+    <Muted>
+        <TextEditor
+            text={$book.getSubdomain() ?? ''}
+            label="Book domain editor"
+            save={// Save the new domain
+            async (domain) => {
+                if ($book) {
+                    const available = await isSubdomainAvailable(domain, $book);
+                    if (available) book.set($book.withSubdomain(domain));
+                    else throw Error("Domain isn't available");
+                }
+            }}
+            placeholder="URL name"
+            valid={(newDomain) =>
+                // If not the empty string, must be a valid URL subdomain, and none of the existing routes.
+                invalidNames.includes(newDomain) ||
+                (newDomain.length > 0 &&
+                    !/^[A-Za-z0-9](?:[A-Za-z0-9\-]{0,61}[A-Za-z0-9])?$/.test(
+                        newDomain
+                    ))
+                    ? `Book domains must be fewer than 63 characters, made of symbols a-z, A-Z, and 0-9, and not one of ${invalidNames.join(
+                          ', '
+                      )}.`
+                    : undefined}
+            saveOnExit={true}
+        />
+    </Muted>
+{/if}

package/components/page/SubdomainEditor.svelte.d.ts

@@ -1,14 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type SubdomainEditorProps = typeof __propDef.props;
-export declare type SubdomainEditorEvents = typeof __propDef.events;
-export declare type SubdomainEditorSlots = typeof __propDef.slots;
+export type SubdomainEditorProps = typeof __propDef.props;
+export type SubdomainEditorEvents = typeof __propDef.events;
+export type SubdomainEditorSlots = typeof __propDef.slots;
 export default class SubdomainEditor extends SvelteComponentTyped<SubdomainEditorProps, SubdomainEditorEvents, SubdomainEditorSlots> {
 }
 export {};