bookish-press 0.4.1 → 0.4.16

package/components/page/Reference.svelte

@@ -1,145 +1,288 @@
-<script>import { afterUpdate } from "svelte";
-import TextEditor from "../editor/TextEditor.svelte";
-import { getEdition, isEditable } from "./Contexts";
-export let node;
+<svelte:options immutable={true} />
+
+<script>import Reference from '../../models/book/Reference';
+import Button from '../app/Button.svelte';
+import Table from '../app/Table.svelte';
+import ConfirmButton from '../editor/ConfirmButton.svelte';
+import TextEditor from '../editor/TextEditor.svelte';
+import { getEdition, isEditable } from './Contexts';
+import Link from '../Link.svelte';
+import Note from '../editor/Note.svelte';
+import Parser from '../../models/chapter/Parser';
+export let reference;
 let editable = isEditable();
 let edition = getEdition();
-let reference = null;
 let editing = false;
-let entered = false;
-afterUpdate(() => {
-    if (editing && entered && reference) {
-        entered = false;
-        reference.querySelector("input")?.focus();
-    }
-});
 function startEditing() {
     editing = true;
-    entered = true;
 }
 function stopEditing() {
     editing = false;
 }
+function move(field, direction) {
+    let fields = Array.from(document.querySelectorAll('input[type="text"]'));
+    let index = fields.indexOf(field);
+    if (index >= 0) {
+        const newInput = direction < 0 && index > 0
+            ? fields[index - 1]
+            : direction > 0 && index < fields.length - 1
+                ? fields[index + 1]
+                : undefined;
+        if (newInput)
+            newInput.focus();
+    }
+}
 </script>
 
+{#if editable && !reference.short}
+    <ConfirmButton
+        tooltip="delete reference {reference.title}"
+        commandLabel="- reference"
+        confirmLabel="Confirm"
+        command={() =>
+            $edition
+                ? edition.set($edition.withoutReference(reference.citationID))
+                : undefined}
+    />
+    <Button
+        tooltip="stop editing reference"
+        command={() => (editing ? stopEditing() : startEditing())}
+        >{editing ? 'done' : 'edit'}</Button
+    >
+{/if}
 <!-- If a short version was requested, try to abbreviate the authors. -->
-{#if node.short }
-    {@const authorList = node.authors.split(",") }
-    {@const authors =   authorList.length === 1 ?   authorList[0] :
-                        authorList.length === 2 ?   authorList[0].trim() + " & " + authorList[1].trim() :
-                                                    authorList[0].trim() + ", et al."}
-    <span data-nodeid={node.nodeID} class="bookish-reference-text">
+{#if reference.short}
+    {@const authorList = reference.authors.split(',')}
+    {@const authors =
+        authorList.length === 1
+            ? authorList[0]
+            : authorList.length === 2
+            ? authorList[0].trim() + ' & ' + authorList[1].trim()
+            : authorList[0].trim() + ', et al.'}
+    <p class="reference">
         {authors}
-        ({node.year}).
-        {#if node.url === null }
-            {node.title}
+        ({reference.year}).
+        {#if reference.url === null}
+            {reference.title}
         {:else}
-            <a href={node.url} target={"_blank"}>{node.title}</a>
+            <Link to={reference.url}>{reference.title}</Link>
         {/if}
-        {node.title.charAt(node.title.length - 1) === "?" ? "" : "."}
-        <em>{node.source}</em>
-    </span>
+        {reference.title.charAt(reference.title.length - 1) === '?' ? '' : '.'}
+        <em>{reference.source}</em>
+    </p>
+{:else if !editable || !editing}
+    <!-- If not editable, just render the reference. -->
+    <p class="reference">
+        {#if reference.authors}{reference.authors}{:else}<em>Authors</em>{/if}
+        {#if reference.year}({reference.year}){:else}<em>Year</em>{/if}. {#if reference.url === null || reference.url.length === 0}{#if reference.title}{reference.title}{:else}<em
+                    >Title</em
+                >{/if}{:else}<Link to={reference.url}
+                >{#if reference.title}{reference.title}{:else}<em>Title</em
+                    >{/if}</Link
+            >{/if}.<em
+            >&nbsp;{#if reference.source}{reference.source}{:else}Source{/if}</em
+        >.
+        {#if reference.summary}<aside class="summary">{reference.summary}</aside
+            >{/if}
+    </p>
 {:else}
     <!-- If editable, place in rows to make room for text editors to not have to wrap. -->
-    <span 
-        data-nodeid={node.nodeID} 
-        class="bookish-reference-text"
-        tabIndex=0
-        on:click|stopPropagation={() => { if(editable && !editing) startEditing(); }}
-        on:keydown={event => { if(editable && !editing && (event.key === "Enter" || event.key === " ")) { startEditing(); event.stopPropagation(); }}}
-        bind:this={reference}
-    >
+    <Table>
+        <!-- CitationID -->
+        <tr>
+            <td width="25%">id</td>
+            <td>
+                <TextEditor
+                    text={reference.citationID}
+                    label={'Citation ID'}
+                    placeholder="Citation ID"
+                    saveOnExit
+                    valid={(text) => {
+                        if (text.length === 0)
+                            return "reference ID can't be empty.";
+                        if ($edition && text in $edition.references) {
+                            const existing = $edition.references[text];
+                            if (
+                                existing instanceof Reference &&
+                                !reference.equals(existing)
+                            )
+                                return 'ID already taken';
+                        }
+                    }}
+                    save={(text) =>
+                        $edition
+                            ? edition.set(
+                                  $edition.withEditedReferenceID(
+                                      text,
+                                      reference
+                                  )
+                              )
+                            : undefined}
+                    {move}
+                /><Note>determines order, a-z</Note>
+            </td>
+        </tr>
         <!-- Authors -->
-        {#if editable && editing }
-            <em>
+        <tr>
+            <td width="25%">authors</td>
+            <td>
                 <TextEditor
-                    startText={node.authors} 
+                    text={reference.authors}
                     label={'Author list editor.'}
                     placeholder="Authors"
-                    valid={ text => {
-                        if(text.length === 0) return "Authors can't be empty.";
+                    valid={(text) => {
+                        if (text.length === 0) return "Authors can't be empty.";
                     }}
-                    save={text => $edition.editReference(node.withAuthors(text))}
-                    width={60}
+                    save={(text) =>
+                        $edition
+                            ? edition.set(
+                                  $edition.withEditedReference(
+                                      reference.withAuthors(text)
+                                  )
+                              )
+                            : undefined}
+                    {move}
                 />
-            </em>
-        {:else}
-            {#if node.authors }
-                {node.authors}
-            {:else}
-                <em>Authors</em>
-            {/if}
-        {/if}
+            </td>
+        </tr>
         <!-- Year -->
-        <br/>({#if editable && editing }
+        <tr>
+            <td>year</td>
+            <td>
                 <TextEditor
-                    startText={node.year} 
-                    label={'Year editor.'} 
+                    text={reference.year}
+                    label={'Year editor.'}
                     placeholder="Year"
-                    valid={ text => {
-                        if(text.length === 0) return "Year can't be empty";
-                        if(!/1?[0-9)[0-9]{2}/.test(text)) return "Not a valid year"
+                    valid={(text) => {
+                        if (text.length === 0) return "Year can't be empty";
+                        if (!/1?[0-9)[0-9]{2}/.test(text))
+                            return 'Not a valid year';
                     }}
-                    save={text => $edition.editReference(node.withYear(text))}
+                    save={(text) =>
+                        $edition
+                            ? edition.set(
+                                  $edition.withEditedReference(
+                                      reference.withYear(text)
+                                  )
+                              )
+                            : undefined}
+                    {move}
                 />
-            {:else}
-                {#if node.year }{node.year}{:else}<em>Year</em>{/if}
-            {/if}). 
+            </td>
+        </tr>
         <!-- Title -->
-        {#if editable && editing }
-            <br/><TextEditor
-                startText={node.title} 
-                label={'Title editor.'} 
-                placeholder="Title"
-                valid={ text => {
-                    if(text.length === 0) return "Title can't be empty.";
-                }}
-                save={text => $edition.editReference(node.withTitle(text))}
-                width={60}
-            />
-        {:else}
-            {#if node.url === null}
-                {#if node.title}{node.title}{:else}<em>Title</em>{/if}
-            {:else}
-                <a href={node.url} target={"_blank"}>{#if node.title}{node.title}{:else}<em>Title</em>{/if}</a>
-            {/if}
-        {/if}. 
-        <!-- Source -->
-        {#if editable && editing }
-            <br/><em>
+        <tr>
+            <td>title</td>
+            <td>
                 <TextEditor
-                    startText={node.source}
-                    label={'Source editor.'} 
-                    placeholder="Source"
-                    valid={ text => {
-                        if(text.length === 0) return "Source can't be empty";
+                    text={reference.title}
+                    label={'Title editor.'}
+                    placeholder="Title"
+                    valid={(text) => {
+                        if (text.length === 0) return "Title can't be empty.";
                     }}
-                    save={text => $edition.editReference(node.withSource(text))}
-                    width={60}
+                    save={(text) =>
+                        $edition
+                            ? edition.set(
+                                  $edition.withEditedReference(
+                                      reference.withTitle(text)
+                                  )
+                              )
+                            : undefined}
+                    {move}
                 />
-            </em>
-        {:else}
-            <em>{#if node.source}{node.source}{:else}Source{/if}</em>
-        {/if}. 
-        {#if editable && editing }
-            <br/><TextEditor
-                startText={node.summary} 
-                label={'Summary editor.'} 
-                placeholder="Summary"
-                valid={ () => undefined }
-                save={text => $edition.editReference(node.withSummary(text))}
-                width={60}
-            />
-        {:else}
-            {#if node.summary}
-                <span class="bookish-reference-summary">{node.summary}</span>
-            {/if}
-        {/if}
-        {#if editing }
-            <br/><button 
-                on:click|stopPropagation={() => stopEditing()}
-                on:keydown={event => { if(editing && (event.key === "Enter" || event.key === " ")) { stopEditing(); event.stopPropagation(); }}}
-                >done editing</button>
-        {/if}
-    </span>
-{/if}
+            </td>
+        </tr>
+        <!-- Source -->
+        <tr>
+            <td>source</td>
+            <td>
+                <em>
+                    <TextEditor
+                        text={reference.source}
+                        label={'Source editor.'}
+                        placeholder="Source"
+                        valid={(text) => {
+                            if (text.length === 0)
+                                return "Source can't be empty";
+                        }}
+                        save={(text) =>
+                            $edition
+                                ? edition.set(
+                                      $edition.withEditedReference(
+                                          reference.withSource(text)
+                                      )
+                                  )
+                                : undefined}
+                        {move}
+                    />
+                </em>
+            </td>
+        </tr>
+        <!-- URL -->
+        <tr>
+            <td>url</td>
+            <td>
+                <TextEditor
+                    text={reference.url}
+                    label={'URL editor.'}
+                    placeholder="URL"
+                    valid={() => undefined}
+                    save={(text) =>
+                        $edition
+                            ? edition.set(
+                                  $edition.withEditedReference(
+                                      reference.withURL(text)
+                                  )
+                              )
+                            : undefined}
+                    {move}
+                />
+            </td>
+        </tr>
+        <tr>
+            <td>summary</td>
+            <td>
+                <TextEditor
+                    text={reference.summary}
+                    label={'Summary editor.'}
+                    placeholder="Summary"
+                    valid={() => undefined}
+                    save={(text) =>
+                        $edition
+                            ? edition.set(
+                                  $edition.withEditedReference(
+                                      reference.withSummary(text)
+                                  )
+                              )
+                            : undefined}
+                    {move}
+                />
+            </td>
+        </tr>
+    </Table>
+{/if}
+
+<style>
+    .reference {
+        line-height: var(--bookish-paragraph-line-height);
+        margin-top: 0;
+        margin-bottom: var(--bookish-header-spacing);
+    }
+
+    .reference .summary {
+        font-size: var(--bookish-small-font-size);
+        padding-left: var(--bookish-block-padding);
+        border-left: 1px solid var(--bookish-border-color-light);
+        margin-top: var(--bookish-block-padding);
+        font-style: italic;
+    }
+
+    td:first-child {
+        font-style: italic;
+    }
+
+    td {
+        line-height: 1;
+    }
+</style>

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

@@ -1,17 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
-import type ReferenceNode from "../../models/chapter/ReferenceNode";
+import Reference from '../../models/book/Reference';
 declare const __propDef: {
     props: {
-        node: ReferenceNode;
+        reference: Reference;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type ReferenceProps = typeof __propDef.props;
-export declare type ReferenceEvents = typeof __propDef.events;
-export declare type ReferenceSlots = typeof __propDef.slots;
+export type ReferenceProps = typeof __propDef.props;
+export type ReferenceEvents = typeof __propDef.events;
+export type ReferenceSlots = typeof __propDef.slots;
 export default class Reference extends SvelteComponentTyped<ReferenceProps, ReferenceEvents, ReferenceSlots> {
 }
 export {};

package/components/page/References.svelte

@@ -1,58 +1,50 @@
-<script>import Header from "./Header.svelte";
+<script>import Header from './Header.svelte';
 import Outline from './Outline.svelte';
 import Page from './Page.svelte';
-import Parser from "../../models/chapter/Parser";
-import ConfirmButton from '../editor/ConfirmButton.svelte';
+import Parser from '../../models/chapter/Parser';
 import ChapterIDs from '../../models/book/ChapterID';
-import BulkReferenceEditor from "./BulkReferenceEditor.svelte";
-import PossibleReference from "./PossibleReference.svelte";
-import { getEdition, isEditable } from "./Contexts";
+import BulkReferenceEditor from './BulkReferenceEditor.svelte';
+import PossibleReference from './PossibleReference.svelte';
+import { getEdition, isEditable } from './Contexts';
 let edition = getEdition();
 let editable = isEditable();
-$: references = $edition.hasReferences() ? $edition.getReferences() : null;
+$: references = $edition?.hasReferences() ? $edition.getReferences() : null;
 // Otherwise, map references to a list with letter headers.
 if (references !== null) {
 }
 </script>
 
-<Page title={`${$edition.getTitle()} - References`}>
-    <Header 
-        label="References title"
-        getImage={() => $edition.getImage(ChapterIDs.ReferencesID)}
-        setImage={(embed) => $edition.setImage(ChapterIDs.ReferencesID, embed)}
-        header="References"
-        tags={$edition.getTags()}
-    >
-        <Outline
-            slot="outline"
-            previous={$edition.getPreviousChapterID(ChapterIDs.ReferencesID)}
-            next={$edition.getNextChapterID(ChapterIDs.ReferencesID)}
-        />
-    </Header>
-    {#if editable }<BulkReferenceEditor />{/if}
-    {#if references !== null }
-        <p><em>Sorted by last name of first author.</em></p>
+{#if $edition}
+    <Page title={`${$edition.getTitle()} - References`}>
+        <Header
+            label="References title"
+            getImage={() => $edition?.getImage(ChapterIDs.ReferencesID) ?? null}
+            setImage={(embed) =>
+                $edition
+                    ? edition.set(
+                          $edition.withImage(ChapterIDs.ReferencesID, embed)
+                      )
+                    : undefined}
+            header="References"
+            tags={$edition.getTags()}
+        >
+            <Outline
+                slot="outline"
+                previous={$edition.getPreviousChapterID(
+                    ChapterIDs.ReferencesID
+                )}
+                next={$edition.getNextChapterID(ChapterIDs.ReferencesID)}
+            />
+        </Header>
+        {#if editable}<BulkReferenceEditor />{/if}
+        {#if references !== null}
+            <p><em>Sorted by last name of first author.</em></p>
 
-        {#each Object.keys(references).sort() as citationID }
-            {@const ref = Parser.parseReference(citationID, references === null ? "" : references[citationID], $edition) }
-            <!-- {#if letter === undefined || citationID.charAt(0) !== letter) {
-                letter = citationID.charAt(0);
-                renderedReferences.push(<h2 key={"letter-" + letter} className="bookish-header" id={"references-" + letter}>{letter.toUpperCase()}</h2>);
-            } -->
-
-            <p>
-                <PossibleReference node={ref} />
-                {#if editable}
-                    <ConfirmButton
-                        commandLabel="x"
-                        confirmLabel="Confirm"
-                        command={() => $edition.removeReference(citationID)}
-                    />
-                {/if}
-            </p>
-        {/each}
-
-    {:else}
-        <p>This book has no references.</p>
-    {/if}
-</Page>
+            {#each Object.keys(references).sort() as citationID (citationID)}
+                <PossibleReference node={references[citationID]} />
+            {/each}
+        {:else}
+            <p>This book has no references.</p>
+        {/if}
+    </Page>
+{/if}

package/components/page/References.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 ReferencesProps = typeof __propDef.props;
-export declare type ReferencesEvents = typeof __propDef.events;
-export declare type ReferencesSlots = typeof __propDef.slots;
+export type ReferencesProps = typeof __propDef.props;
+export type ReferencesEvents = typeof __propDef.events;
+export type ReferencesSlots = typeof __propDef.slots;
 export default class References extends SvelteComponentTyped<ReferencesProps, ReferencesEvents, ReferencesSlots> {
 }
 export {};

package/components/page/Rows.svelte

@@ -0,0 +1,54 @@
+<div class="table">
+    <table>
+        <tbody>
+            <slot />
+        </tbody>
+    </table>
+</div>
+
+<style>
+    .table {
+        width: 100%;
+        overflow-x: auto;
+        line-height: var(--bookish-paragraph-line-height-tight);
+        border-collapse: collapse;
+        clear: both;
+        border-radius: var(--bookish-roundedness);
+        border-spacing: 0;
+    }
+
+    table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+
+    table :global(tr:first-child th) {
+        font-weight: bold;
+        border: 0;
+        border-bottom: 1px solid var(--bookish-border-color);
+    }
+
+    table :global(tr:nth-child(even)) {
+        background-color: var(--bookish-block-background-color);
+    }
+
+    table :global(tr:last-child td:first-child) {
+        border-bottom-left-radius: var(--bookish-roundedness);
+    }
+
+    table :global(tr:last-child td:last-child) {
+        border-bottom-right-radius: var(--bookish-roundedness);
+    }
+
+    table :global(tr:first-child td:first-child) {
+        border-top-left-radius: var(--bookish-roundedness);
+    }
+    table :global(tr:first-child td:last-child) {
+        border-top-right-radius: var(--bookish-roundedness);
+    }
+
+    .table :global(td),
+    .table :global(th) {
+        padding: var(--bookish-block-padding);
+    }
+</style>

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  RowsProps */
+/** @typedef {typeof __propDef.events}  RowsEvents */
+/** @typedef {typeof __propDef.slots}  RowsSlots */
+export default class Rows extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type RowsProps = typeof __propDef.props;
+export type RowsEvents = typeof __propDef.events;
+export type RowsSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};