bookish-press 0.4.0 → 0.4.3

package/components/page/License.svelte

@@ -1,29 +1,45 @@
-<script>import Parser from "../../models/chapter/Parser";
-import BookishEditor from "../editor/BookishEditor.svelte";
-import Instructions from "./Instructions.svelte";
-import Format from "../chapter/Format.svelte";
-import { getEdition, isEditable } from "./Contexts";
+<script>import Parser from '../../models/chapter/Parser';
+import BookishEditor from '../editor/BookishEditor.svelte';
+import Instructions from './Instructions.svelte';
+import Format from '../chapter/Format.svelte';
+import { getUser, getEdition, getLeasee, isEditionEditable, lease, } from './Contexts';
+import PageHeader from './PageHeader.svelte';
+let auth = getUser();
 let edition = getEdition();
-let editable = isEditable();
-$: formatNode = Parser.parseFormat($edition, $edition.getLicense()).withTextIfEmpty();
+let editable = isEditionEditable();
 </script>
 
-<h2 class="bookish-header" id="license">License</h2>
+<PageHeader id="license">License</PageHeader>
 
-<Instructions>
-    By default of U.S. Copyright Law, your content copyrighted and owned by all authors. 
-    Edit this if you'd like to grant different rights.
+<Instructions {editable}>
+    Do you want to specify rights other than your region's default copyrights?
+    Edit them here.
 </Instructions>
 
- <!-- If editable, show acknowledgements even if they're empty, otherwise hide -->
-{#if editable }
-    <BookishEditor
-        ast={formatNode} 
-        save={node => $edition.setLicense(node.toBookdown())}
-        chapter={false}
-        component={Format}
-        placeholder="In the U.S., all rights reserved by default. Want to offer different rights to readers?"
-    />
-{:else}
-    <Format node={formatNode} />
-{/if}
+{#if $edition}
+    <!-- If editable, show acknowledgements even if they're empty, otherwise hide -->
+    {#if editable}
+        <!-- svelte-ignore missing-declaration -->
+        <BookishEditor
+            text={$edition.getLicense()}
+            parser={(text) =>
+                Parser.parseFormat($edition, text).withTextIfEmpty()}
+            save={(node) =>
+                $edition
+                    ? edition.set($edition.setLicense(node.toBookdown()))
+                    : undefined}
+            chapter={false}
+            component={Format}
+            placeholder="license"
+            leasee={getLeasee(auth, edition, `license`)}
+            lease={(lock) => lease(auth, edition, `license`, lock)}
+        />
+    {:else}
+        <Format
+            node={Parser.parseFormat(
+                $edition,
+                $edition.getLicense()
+            ).withTextIfEmpty()}
+        />
+    {/if}
+{/if}

package/components/page/License.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 LicenseProps = typeof __propDef.props;
-export declare type LicenseEvents = typeof __propDef.events;
-export declare type LicenseSlots = typeof __propDef.slots;
+export type LicenseProps = typeof __propDef.props;
+export type LicenseEvents = typeof __propDef.events;
+export type LicenseSlots = typeof __propDef.slots;
 export default class License extends SvelteComponentTyped<LicenseProps, LicenseEvents, LicenseSlots> {
 }
 export {};

package/components/page/Loading.svelte

@@ -1,13 +1,103 @@
-<div class={"bookish bookish-loading" + (localStorage.getItem("bookish-dark") === "true" ? " bookish-dark" : "")}>
-        <div class="bookish-loading-animation">
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
+<div
+    aria-live="polite"
+    class={'bookish bookish-loading' +
+        (typeof localStorage !== 'undefined' &&
+        localStorage.getItem('dark') === 'true'
+            ? ' dark'
+            : '')}
+>
+    <div class="bookish-loading-animation">
+        <div />
+        <div />
+        <div />
+        <div />
+        <div />
+        <div />
+        <div />
+        <div />
+        <div />
     </div>
-</div>
+</div>
+
+<style>
+    .bookish-loading {
+        width: 100vw;
+        height: 100vh;
+    }
+
+    .bookish-loading-animation {
+        position: fixed;
+        width: 80px;
+        height: 80px;
+        left: 50%;
+        top: 50%;
+        margin-left: -40px;
+        margin-top: -40px;
+        z-index: 2;
+    }
+
+    .bookish-loading-animation div {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: var(--bookish-muted-color);
+        animation: bookish-loading 1.2s linear infinite;
+    }
+
+    .bookish-loading-animation div:nth-child(1) {
+        top: 8px;
+        left: 8px;
+        animation-delay: 0s;
+    }
+    .bookish-loading-animation div:nth-child(2) {
+        top: 8px;
+        left: 32px;
+        animation-delay: -0.4s;
+    }
+    .bookish-loading-animation div:nth-child(3) {
+        top: 8px;
+        left: 56px;
+        animation-delay: -0.8s;
+    }
+    .bookish-loading-animation div:nth-child(4) {
+        top: 32px;
+        left: 8px;
+        animation-delay: -0.4s;
+    }
+    .bookish-loading-animation div:nth-child(5) {
+        top: 32px;
+        left: 32px;
+        animation-delay: -0.8s;
+    }
+    .bookish-loading-animation div:nth-child(6) {
+        top: 32px;
+        left: 56px;
+        animation-delay: -1.2s;
+    }
+    .bookish-loading-animation div:nth-child(7) {
+        top: 56px;
+        left: 8px;
+        animation-delay: -0.8s;
+    }
+    .bookish-loading-animation div:nth-child(8) {
+        top: 56px;
+        left: 32px;
+        animation-delay: -1.2s;
+    }
+    .bookish-loading-animation div:nth-child(9) {
+        top: 56px;
+        left: 56px;
+        animation-delay: -1.6s;
+    }
+
+    @keyframes bookish-loading {
+        0%,
+        100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.5;
+        }
+    }
+</style>

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

@@ -1,7 +1,9 @@
 /** @typedef {typeof __propDef.props}  LoadingProps */
 /** @typedef {typeof __propDef.events}  LoadingEvents */
 /** @typedef {typeof __propDef.slots}  LoadingSlots */
-export default class Loading extends SvelteComponentTyped<{}, {
+export default class Loading extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
 }
@@ -10,7 +12,9 @@ export type LoadingEvents = typeof __propDef.events;
 export type LoadingSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: never;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/page/Media.svelte

@@ -1,17 +1,20 @@
-<script>import Header from "./Header.svelte";
+<script>import Header from './Header.svelte';
 import Outline from './Outline.svelte';
 import Page from './Page.svelte';
 import Instructions from './Instructions.svelte';
 import ChapterIDs from '../../models/book/ChapterID';
 import Format from '../chapter/Format.svelte';
-import MediaPreview from "./MediaPreview.svelte";
-import { onMount } from "svelte";
-import { getEdition, isEditable } from "./Contexts";
+import MediaPreview from './MediaPreview.svelte';
+import { onMount } from 'svelte';
+import { getBook, getEdition, isBookEditable, isEditionEditable, } from './Contexts';
+import Button from '../app/Button.svelte';
+import PageHeader from './PageHeader.svelte';
+let book = getBook();
 let edition = getEdition();
-let editable = isEditable();
+let editable = isBookEditable();
 let images = [];
-$: embeds = $edition.getEmbeds();
-$: media = $edition.getBook()?.getMedia();
+$: embeds = $edition?.getEmbeds() ?? [];
+$: media = $book?.getMedia();
 function updateImages(newImages) {
     images = newImages;
 }
@@ -20,57 +23,82 @@ onMount(() => {
     media?.notify(updateImages);
     return () => media?.stopNotifying(updateImages);
 });
-$: unused = images?.filter(image => embeds.find(embed => embed.getURL() === image.url) === undefined);
+$: unused = images?.filter((image) => embeds.find((embed) => embed.getURL() === image.url) === undefined);
 </script>
 
-<Page  title={`${$edition.getTitle()} - Media`}>
-    <Header 
-        label="Media title"
-        getImage={() => $edition.getImage(ChapterIDs.MediaID)}
-        setImage={(embed) => $edition.setImage(ChapterIDs.MediaID, embed)}
-        header="Media"
-        tags={$edition.getTags()}
-    >
-        <Outline
-            slot="outline"
-            previous={$edition.getPreviousChapterID(ChapterIDs.MediaID)}
-            next={$edition.getNextChapterID(ChapterIDs.MediaID)}
-        />
-    </Header>
-    <Instructions>
-        This page shows readers an index of the media in the book.
-        Writers can use this page to manage any images that are linked or uploaded for this book.
-        Note: images are shared between all editions, so if you delete one not used in this edition,
-        it might be used in others.
-    </Instructions>
-
-    {#if embeds.length === 0}
-        <p>No images or videos appear in the book.</p>
-    {:else}
-        <p>These are the images and videos in the book:</p>
-    {/if}
-    {#each embeds as embed }
-        <MediaPreview 
-            url={embed.getSmallURL()} 
-            alt={embed.getDescription()}
+{#if $edition}
+    <Page title={`${$edition.getTitle()} - Media`}>
+        <Header
+            editable={isEditionEditable()}
+            label="Media title"
+            id="media"
+            getImage={() => $edition?.getImage(ChapterIDs.MediaID) ?? null}
+            setImage={(embed) =>
+                $edition
+                    ? edition.set($edition.withImage(ChapterIDs.MediaID, embed))
+                    : undefined}
+            header="Media"
+            tags={$edition.getTags()}
         >
-            <span>{editable ? (images && images.find(i => i.url === embed.getURL()) === undefined) ? "linked" : "uploaded" : null }{embed.getCredit().isEmptyText() ? null : " • "}<Format node={embed.getCredit()}/></span>
-        </MediaPreview>
-    {/each}
-    {#if editable !== undefined && unused !== undefined && unused.length > 0 }
-        <h2>Unused</h2>
-        <Instructions>
-            These images are uploaded to this book, but not used.
-            Delete them if you don't need them.
-            Note, however, that these images may be used in other editions of this book.
+            <Outline
+                slot="outline"
+                previous={$edition.getPreviousChapterID(ChapterIDs.MediaID)}
+                next={$edition.getNextChapterID(ChapterIDs.MediaID)}
+            />
+        </Header>
+        <Instructions {editable}>
+            These are a sequential index of the media in the book. You can use
+            this page to manage any images that are linked or uploaded for this
+            book. Note: images are shared between all editions, so if you delete
+            one not used in this edition, it might be used in others.
         </Instructions>
-        {#each unused as image }
+
+        {#if embeds.length === 0}
+            <p>No images or videos appear in the book.</p>
+        {:else}
+            <p>These are the images and videos in the book:</p>
+        {/if}
+        {#each embeds as embed}
             <MediaPreview
-                url={image.url}
-                alt={""}
+                url={embed.getSmallURL()}
+                alt={embed.getDescription() === ''
+                    ? 'no description, image not used'
+                    : embed.getDescription()}
             >
-                <span>uploaded <button on:click={() => media?.remove(image).then(images => updateImages(images))}>x</button></span>
+                <span
+                    >{#if editable}{images &&
+                        images.find((i) => i.url === embed.getURL()) ===
+                            undefined
+                            ? 'linked'
+                            : 'uploaded'}{embed.getCredit().isEmptyText()
+                            ? ''
+                            : ' • '}{/if}<Format
+                        node={embed.getCredit()}
+                    /></span
+                >
             </MediaPreview>
         {/each}
-    {/if}
-</Page>
+        {#if editable && unused !== undefined && unused.length > 0}
+            <PageHeader id="unused">Unused</PageHeader>
+            <Instructions {editable}>
+                These images are uploaded for this book, but not used in this
+                edition. Delete them if you don't need them. Warning: images may
+                be used in other editions of this book.
+            </Instructions>
+            {#each unused as image}
+                <MediaPreview url={image.url} alt={''}>
+                    <span
+                        >uploaded <Button
+                            tooltip="delete unused image"
+                            command={() =>
+                                media
+                                    ?.remove(image)
+                                    .then((images) => updateImages(images))}
+                            >- image</Button
+                        ></span
+                    >
+                </MediaPreview>
+            {/each}
+        {/if}
+    </Page>
+{/if}

package/components/page/Media.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 MediaProps = typeof __propDef.props;
-export declare type MediaEvents = typeof __propDef.events;
-export declare type MediaSlots = typeof __propDef.slots;
+export type MediaProps = typeof __propDef.props;
+export type MediaEvents = typeof __propDef.events;
+export type MediaSlots = typeof __propDef.slots;
 export default class Media extends SvelteComponentTyped<MediaProps, MediaEvents, MediaSlots> {
 }
 export {};

package/components/page/MediaPreview.svelte

@@ -1,11 +1,29 @@
 <script>export let url;
 export let alt;
 </script>
-    
-<span class={"bookish-figure-preview"}>
-    <img 
-        src={url} 
-        alt={alt}
-    />
-    <div class="bookish-figure-credit"><slot></slot></div>
-</span>
+
+<figure class={'media-preview'}>
+    <img src={url} {alt} />
+    <figcaption class="credit"><slot /></figcaption>
+</figure>
+
+<style>
+    .media-preview {
+        display: inline-block;
+        width: 10rem;
+        margin: 1em;
+        vertical-align: bottom;
+    }
+
+    .media-preview img {
+        width: 100%;
+        height: auto;
+    }
+
+    .credit {
+        display: block;
+        text-align: right;
+        font-style: italic;
+        font-size: var(--bookish-small-font-size);
+    }
+</style>

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

@@ -11,9 +11,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type MediaPreviewProps = typeof __propDef.props;
-export declare type MediaPreviewEvents = typeof __propDef.events;
-export declare type MediaPreviewSlots = typeof __propDef.slots;
+export type MediaPreviewProps = typeof __propDef.props;
+export type MediaPreviewEvents = typeof __propDef.events;
+export type MediaPreviewSlots = typeof __propDef.slots;
 export default class MediaPreview extends SvelteComponentTyped<MediaPreviewProps, MediaPreviewEvents, MediaPreviewSlots> {
 }
 export {};

package/components/page/Muted.svelte

@@ -0,0 +1,10 @@
+<span class="muted"><slot /></span>
+
+<style>
+    /* TYPOGRAPHY */
+    .muted {
+        color: var(--bookish-muted-color);
+        font-weight: normal;
+        font-size: var(--bookish-block-font-size);
+    }
+</style>

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

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