bookish-press 0.4.231 → 0.5.0

package/{components → package/components}/page/Media.svelte

@@ -6,12 +6,13 @@ import ChapterIDs from '../../models/book/ChapterID';
 import Format from '../chapter/Format.svelte';
 import MediaPreview from './MediaPreview.svelte';
 import { onMount } from 'svelte';
-import { getBook, getEdition, isEditable } from './Contexts';
-import Button from '../app/Button.svelte';
+import { getBase, getBook, getEdition, isBookEditable, isEditionEditable, } from './Contexts';
 import PageHeader from './PageHeader.svelte';
+import ConfirmButton from '../editor/ConfirmButton.svelte';
 let book = getBook();
 let edition = getEdition();
-let editable = isEditable();
+let editable = isBookEditable();
+let base = getBase();
 let images = [];
 $: embeds = $edition?.getEmbeds() ?? [];
 $: media = $book?.getMedia();
@@ -29,7 +30,9 @@ $: unused = images?.filter((image) => embeds.find((embed) => embed.getURL() ===
 {#if $edition}
     <Page title={`${$edition.getTitle()} - Media`}>
         <Header
+            editable={isEditionEditable()}
             label="Media title"
+            id="media"
             getImage={() => $edition?.getImage(ChapterIDs.MediaID) ?? null}
             setImage={(embed) =>
                 $edition
@@ -44,56 +47,57 @@ $: unused = images?.filter((image) => embeds.find((embed) => embed.getURL() ===
                 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 {editable}>
+            These are the images in the book, in order of appearance. 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>
 
         {#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>
+            <p>These are the images in the book:</p>
         {/if}
         {#each embeds as embed}
-            <MediaPreview
-                url={embed.getSmallURL()}
-                alt={embed.getDescription() === ''
-                    ? 'no description, image not used'
-                    : embed.getDescription()}
-            >
-                <span
-                    >{#if editable}{images &&
+            {#if !embed.isVideo()}
+                <MediaPreview
+                    url={embed.isLocal()
+                        ? `${$base}/${embed.getSmallURL()}`
+                        : embed.getSmallURL()}
+                    alt={embed.getDescription() === ''
+                        ? 'no description'
+                        : embed.getDescription()}
+                >
+                    {#if editable}{images &&
                         images.find((i) => i.url === embed.getURL()) ===
                             undefined
-                            ? 'linked'
+                            ? embed.getURL().length === 0
+                                ? 'no url'
+                                : 'linked'
                             : 'uploaded'}{embed.getCredit().isEmptyText()
                             ? ''
-                            : ' • '}{/if}<Format
-                        node={embed.getCredit()}
-                    /></span
-                >
-            </MediaPreview>
+                            : ' • '}{/if}<Format node={embed.getCredit()} />
+                </MediaPreview>
+            {/if}
         {/each}
         {#if editable && unused !== undefined && unused.length > 0}
             <PageHeader id="unused">Unused</PageHeader>
-            <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.
+            <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 this unused image"
-                            command={() =>
-                                media
-                                    ?.remove(image)
-                                    .then((images) => updateImages(images))}
-                            >- image</Button
-                        ></span
+                    <ConfirmButton
+                        tooltip="delete unused image"
+                        confirm="delete image?"
+                        command={() =>
+                            media
+                                ?.remove(image)
+                                .then((images) => updateImages(images))}
+                        >⨉ image</ConfirmButton
                     >
                 </MediaPreview>
             {/each}

package/package/components/page/MediaPreview.svelte

@@ -0,0 +1,55 @@
+<script>export let url;
+export let alt;
+let loaded;
+let urlChecked;
+$: {
+    if (urlChecked !== url) {
+        urlChecked = url;
+        let image = new Image();
+        image.src = url;
+        loaded = image.complete;
+        if (!loaded) {
+            image.onload = () => (loaded = true);
+            image.onerror = () => (loaded = null);
+        }
+    }
+}
+</script>
+
+<figure class={'media-preview'}>
+    {#if loaded}
+        <img src={url.startsWith('http') ? url : `${url}`} {alt} />
+    {:else if loaded === null}
+        <div class="missing">missing image</div>
+    {/if}
+    <figcaption class="credit"><slot /></figcaption>
+</figure>
+
+<style>
+    .media-preview {
+        display: inline-block;
+        width: 12rem;
+        margin: 1em;
+        vertical-align: bottom;
+    }
+
+    .media-preview img {
+        width: 100%;
+        height: auto;
+    }
+
+    .missing {
+        height: 8em;
+        border: 1px solid var(--bookish-border-color-light);
+        padding: var(--bookish-inline-padding);
+        font-family: var(--bookish-paragraph-font-family);
+        font-size: var(--bookish-small-font-size);
+    }
+
+    .credit {
+        display: block;
+        text-align: right;
+        font-style: italic;
+        font-size: var(--bookish-small-font-size);
+    }
+</style>

package/{components → package/components}/page/Outline.svelte

@@ -2,6 +2,7 @@
 import { onMount } from 'svelte';
 import Link from '../Link.svelte';
 import { getBase, getDarkMode } from './Contexts';
+import DarkToggle from '../controls/DarkToggle.svelte';
 export let previous;
 export let next;
 export let collapse = false;
@@ -77,7 +78,7 @@ function highlight() {
     const threshold = getHighlightThreshold();
     // Find the header that we're past so we can update the outline.
     let indexOfNearestHeaderAbove = -1; // -1 represents the title
-    Array.from(document.getElementsByClassName('bookish-header')).forEach((header, index) => {
+    Array.from(document.getElementsByClassName('page-header')).forEach((header, index) => {
         // Is this a header we care about?
         if (header.tagName === 'H1' ||
             header.tagName === 'H2' ||
@@ -112,8 +113,6 @@ onMount(() => {
 let previousLabel = '\u25C0\uFE0E';
 let nextLabel = '\u25B6\uFE0E';
 let expandLabel = '\u2630';
-let lightLabel = '\u263C';
-let darkLabel = '\u263E';
 </script>
 
 <nav
@@ -121,38 +120,44 @@ let darkLabel = '\u263E';
     class={'outline ' +
         (!expanded || collapse ? 'outline-collapsed' : 'outline-expanded')}
 >
-    <!-- Visual cue of expandability, only visible in footer mode. -->
-    <div
-        class={'outline-collapse-cue' +
-            (headers.length === 0 ? ' outline-collapse-cue-disabled' : '')}
-        role="button"
-        aria-label={expanded
-            ? 'Collapse navigation menu'
-            : 'Expand navigation menu'}
-        tabIndex="0"
-        on:click={headers.length > 0 ? toggleExpanded : undefined}
-        on:keydown={(event) => {
-            if (event.key === 'Enter' || event.key === ' ') toggleExpanded();
-        }}
-    >
-        {expandLabel}
-    </div>
-    <div class="outline-headers">
-        <!-- Book navigation links -->
+    <div class="outline-top">
+        <!-- Visual cue of expandability, only visible in footer mode. -->
+        <div
+            class={'outline-toggle' +
+                (headers.length === 0 ? ' outline-toggle-disabled' : '')}
+            role="button"
+            aria-label={expanded
+                ? 'Collapse navigation menu'
+                : 'Expand navigation menu'}
+            tabIndex="0"
+            on:click={headers.length > 0 ? toggleExpanded : undefined}
+            on:keydown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ')
+                    toggleExpanded();
+            }}
+        >
+            {expandLabel}
+        </div>
         <div class="outline-header-nav">
-            {#if previous !== null}<Link to={$base + previous}
+            {#if previous !== null}<Link to="{$base}/{previous}"
                     >{previousLabel}</Link
                 >{:else}<span class="outline-header-nav-disabled"
                     >{previousLabel}</span
                 >{/if}
             &nbsp;&middot;&nbsp;
-            <Link to={$base}>Home</Link>
+            <Link to="{$base}/">Home</Link>
             &nbsp;&middot;&nbsp;
-            {#if next !== null}<Link to={$base + next}>{nextLabel}</Link
+            {#if next !== null}<Link to="{$base}/{next}">{nextLabel}</Link
                 >{:else}<span class="outline-header-nav-disabled"
                     >{nextLabel}</span
                 >{/if}
         </div>
+        <!-- Dark mode toggle -->
+        <div class="outline-dark-toggle"
+            ><DarkToggle dark={$dark} toggle={toggleReadingMode} /></div
+        >
+    </div>
+    <div class="outline-headers">
         <!--  Scan through the headers and add a properly formatted link for each. -->
         {#each headers as header, index}
             <!-- Assumes that all headers have an H1, H2, etc. tag. -->
@@ -173,24 +178,6 @@ let darkLabel = '\u263E';
             {/if}
         {/each}
     </div>
-    <!-- Dark mode toggle -->
-    <div
-        class="outline-reading-mode"
-        role="button"
-        aria-label={$dark === true
-            ? 'Switch to light mode'
-            : 'Switch to dark mode'}
-        tabIndex="0"
-        on:click={toggleReadingMode}
-        on:keydown={(event) => {
-            if (event.key === 'Enter' || event.key === ' ') {
-                toggleReadingMode();
-                event.stopPropagation();
-            }
-        }}
-    >
-        {$dark ? darkLabel : lightLabel}
-    </div>
 </nav>
 
 <style>
@@ -206,18 +193,10 @@ let darkLabel = '\u263E';
         );
     }
 
-    .outline-header-nav {
-        display: inline-block;
-        width: 100%;
-        padding-bottom: var(--outline-padding);
-    }
-
     .outline-header {
         display: block;
         line-height: var(--bookish-paragraph-line-height-tight);
         text-indent: 0;
-        padding-left: 1rem;
-        padding-right: 1rem;
         margin-bottom: 0.75rem;
     }
 
@@ -237,12 +216,12 @@ let darkLabel = '\u263E';
 
     :global(a .outline-header),
     :global(.outline-header-nav a) {
-        color: var(--bookish-muted-color);
+        color: var(--bookish-muted-color) !important;
     }
 
     :global(a .outline-header-active),
     :global(a:hover .outline-header) {
-        color: var(--bookish-paragraph-color);
+        color: var(--bookish-paragraph-color) !important;
     }
 
     .outline-header-nav-disabled {
@@ -250,7 +229,8 @@ let darkLabel = '\u263E';
     }
 
     :global(.outline a:hover) {
-        text-decoration: none;
+        text-decoration: none !important;
+        color: var(--bookish-paragraph-color) !important;
     }
 
     /* Only apply this on devices with hover abilities. */
@@ -260,18 +240,18 @@ let darkLabel = '\u263E';
         }
     }
 
-    :global(a .outline-header-active) {
-        color: var(--bookish-paragraph-color);
-    }
-
-    .outline-reading-mode {
-        transition: transform 0.2s ease-in;
+    .outline-top {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        width: 100%;
+        margin-bottom: 0.75rem;
     }
 
-    .outline-reading-mode:hover {
-        cursor: pointer;
-        transform: scale(1.25, 1.25);
-        color: var(--bookish-paragraph-color);
+    /* Make a little centered box to store the outline to preserve its left aligned structure, while making it easier to click. */
+    .outline-headers {
+        margin: auto;
     }
 
     /* Mobile */
@@ -281,7 +261,6 @@ let darkLabel = '\u263E';
             top: 100%; /* Put it all the way off screen on the bottom, then let JS translate */
             left: 0;
             right: 0;
-            width: 100%;
             z-index: 2; /* Put it above content when it's a sheet in the footer */
             border-top: 1px solid var(--bookish-border-color-light);
             text-align: left;
@@ -289,58 +268,38 @@ let darkLabel = '\u263E';
             background-color: var(--bookish-background-color);
             box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.25);
             backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
             /* Cap height at window size. If the content is too tall, scroll it. */
             max-height: 100%;
             overflow-y: scroll;
+            padding: 0.5em;
         }
 
-        /* Make a little centered box to store the outline to preserve its left aligned structure, while making it easier to click. */
-        .outline-headers {
-            width: 20em;
-            margin: auto;
-        }
-
-        .outline-header-nav {
-            text-align: center;
-            padding-top: 0.5em; /* Add some spacing when in the footer */
-            padding-bottom: 0.5em;
-            text-indent: 0 !important; /* Override header default */
-            font-size: 1.25rem !important;
-        }
-
-        .outline-reading-mode {
-            position: absolute;
-            top: 0.5em;
-            left: 0;
+        .outline-dark-toggle {
             font-size: 1em;
             display: inline-block;
-            padding-left: 1em;
-            padding-right: 1em;
         }
 
-        .outline-collapse-cue {
-            position: absolute;
-            top: 0.5em;
-            right: 0;
+        .outline-top {
+            flex-direction: row-reverse;
+        }
+
+        .outline-toggle {
             font-size: 1em;
             display: inline-block;
-            padding-left: 1em;
-            padding-right: 1em;
             transition: transform 0.2s ease-in;
         }
 
-        .outline-collapse-cue:hover {
+        .outline-toggle:hover {
             cursor: pointer;
             transform: scale(1.25, 1.25);
             color: var(--bookish-paragraph-color);
         }
 
-        .outline-collapse-cue-disabled {
+        .outline-toggle-disabled {
             display: none;
         }
 
-        .outline-expanded .outline-collapse-cue {
+        .outline-expanded .outline-toggle {
             transform: rotate(90deg);
         }
 
@@ -351,6 +310,15 @@ let darkLabel = '\u263E';
         .outline.outline-collapsed {
             transform: translateY(-3rem);
         }
+
+        .outline-headers {
+            width: 20em;
+        }
+
+        /* Center on mobile */
+        .outline-header-nav {
+            margin: auto;
+        }
     }
 
     /* Desktop */
@@ -380,14 +348,19 @@ let darkLabel = '\u263E';
             margin-left: var(--outline-offset);
         }
 
-        .outline-collapse-cue {
+        .outline-toggle {
             display: none;
         }
 
-        .outline-reading-mode {
+        .outline-dark-toggle {
             position: absolute;
             top: calc(var(--outline-padding));
             right: calc(var(--outline-padding));
         }
+
+        /* Left align on desktop, since no collapse cue. */
+        .outline-header-nav {
+            margin-right: auto;
+        }
     }
 </style>

package/{components → package/components}/page/Page.svelte

@@ -45,12 +45,12 @@ function imagesAreLoaded() {
     <meta name="description" content={title} />
 </svelte:head>
 
+<section class={'bookish-page' + (loaded ? ' loaded' : '')}>
+    <slot />
+</section>
+<!-- Overlay loading feedback if loading, but still render the page. -->
 {#if loaded === false}
     <Loading />
-{:else}
-    <section class={'bookish-page' + (loaded ? ' loaded' : '')}>
-        <slot />
-    </section>
 {/if}
 
 <style>

package/{components → package/components}/page/PageHeader.svelte

@@ -10,5 +10,10 @@
         font-weight: var(--bookish-header-font-weight);
         line-height: var(--bookish-header-line-height);
         font-size: var(--bookish-header-1-font-size);
+
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--bookish-inline-padding);
     }
 </style>

package/{components → package/components}/page/PossibleReference.svelte

@@ -2,10 +2,11 @@
 import Format from '../chapter/Format.svelte';
 import Reference from './Reference.svelte';
 export let node;
+export let edit;
 </script>
 
 {#if node instanceof FormatNode}
     <Format {node} />
 {:else}
-    <Reference reference={node} />
+    <Reference reference={node} {edit} />
 {/if}

package/{components → package/components}/page/PossibleReference.svelte.d.ts

@@ -4,6 +4,7 @@ import type Ref from '../../models/book/Reference';
 declare const __propDef: {
     props: {
         node: FormatNode | Ref;
+        edit: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;