bookish-press 0.4.0

package/components/page/Instructions.svelte

@@ -0,0 +1,30 @@
+<script>import { isEditable } from "./Contexts";
+let editable = isEditable();
+</script>
+
+{#if editable }
+    <div class="bookish-instructions"><slot></slot></div>
+{/if}
+
+<style>
+    .bookish-instructions {
+        font-style: italic;
+        margin-top: var(--bookish-app-margin);
+        margin-bottom: var(--bookish-app-margin);
+        line-height: 1.2;
+        padding: var(--bookish-app-margin);
+        border: 2px solid var(--bookish-app-chrome-border-color);
+        border-radius: var(--bookish-roundedness);
+    }
+
+    .bookish-instructions :global(p), .bookish-instructions :global(li) {
+        font-family: var(--bookish-app-chrome-font-family);
+        font-size: var(--bookish-app-chrome-font-size);
+        line-height: var(--bookish-app-chrome-line-height);
+        margin-bottom: 0;
+    }
+
+    .bookish-instructions :global(p) {
+        margin-top: 0;
+    }
+</style>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type InstructionsProps = typeof __propDef.props;
+export declare type InstructionsEvents = typeof __propDef.events;
+export declare type InstructionsSlots = typeof __propDef.slots;
+export default class Instructions extends SvelteComponentTyped<InstructionsProps, InstructionsEvents, InstructionsSlots> {
+}
+export {};

package/components/page/License.svelte

@@ -0,0 +1,29 @@
+<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";
+let edition = getEdition();
+let editable = isEditable();
+$: formatNode = Parser.parseFormat($edition, $edition.getLicense()).withTextIfEmpty();
+</script>
+
+<h2 class="bookish-header" id="license">License</h2>
+
+<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>
+
+ <!-- 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}

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    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 default class License extends SvelteComponentTyped<LicenseProps, LicenseEvents, LicenseSlots> {
+}
+export {};

package/components/page/Loading.svelte

@@ -0,0 +1,13 @@
+<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>
+</div>

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

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

package/components/page/Media.svelte

@@ -0,0 +1,76 @@
+<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";
+let edition = getEdition();
+let editable = isEditable();
+let images = [];
+$: embeds = $edition.getEmbeds();
+$: media = $edition.getBook()?.getMedia();
+function updateImages(newImages) {
+    images = newImages;
+}
+onMount(() => {
+    // Listen to image changes.
+    media?.notify(updateImages);
+    return () => media?.stopNotifying(updateImages);
+});
+$: 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()}
+        >
+            <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.
+        </Instructions>
+        {#each unused as image }
+            <MediaPreview
+                url={image.url}
+                alt={""}
+            >
+                <span>uploaded <button on:click={() => media?.remove(image).then(images => updateImages(images))}>x</button></span>
+            </MediaPreview>
+        {/each}
+    {/if}
+</Page>

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    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 default class Media extends SvelteComponentTyped<MediaProps, MediaEvents, MediaSlots> {
+}
+export {};

package/components/page/MediaPreview.svelte

@@ -0,0 +1,11 @@
+<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>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        url: string;
+        alt: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type MediaPreviewProps = typeof __propDef.props;
+export declare type MediaPreviewEvents = typeof __propDef.events;
+export declare type MediaPreviewSlots = typeof __propDef.slots;
+export default class MediaPreview extends SvelteComponentTyped<MediaPreviewProps, MediaPreviewEvents, MediaPreviewSlots> {
+}
+export {};

package/components/page/Outline.svelte

@@ -0,0 +1,173 @@
+<script>import { isMobile } from '../../util/isMobile';
+import { onMount } from 'svelte';
+import Link from '../Link.svelte';
+import { getBase, getDarkMode } from './Contexts';
+export let previous;
+export let next;
+export let collapse = false;
+export let listener = undefined;
+let headerString = null;
+let headerIndex = -1;
+let expanded = false;
+let dark = getDarkMode();
+let base = getBase();
+let outline = null;
+let headers = [];
+function toggleExpanded() {
+    // Don't toggle when in margin mode.
+    if (!isMobile())
+        return;
+    const newExpanded = !expanded;
+    // Toggle expanded state
+    expanded = newExpanded;
+    if (listener)
+        listener(newExpanded, layout);
+}
+function toggleReadingMode() {
+    dark.set(!$dark);
+}
+function layout() {
+    position();
+    highlight();
+    updateHeaders();
+}
+function updateHeaders() {
+    // When the outline updates (due to the page its on updating), generate a unique string for the current header outline.
+    // If it's different from the last rendered state, refresh.
+    headers = Array.from(document.getElementsByClassName("bookish-header"));
+    let newHeaderString = headers.reduce((sum, el) => sum + el.outerHTML, "");
+    // If the headers change, update the outline.
+    if (headerString !== newHeaderString)
+        headerString = newHeaderString;
+}
+function getHighlightThreshold() { return window.innerHeight / 3; }
+function position() {
+    // Left align the floating outline with the left margin of the chapter
+    // and the top of the title, unless we're past it.
+    let title = document.getElementsByClassName("bookish-chapter-header-text")[0];
+    // If we found them both...
+    if (outline && title) {
+        // If so, remove the inline position so the footer CSS applies.
+        if (isMobile()) {
+            outline.style.removeProperty("margin-top");
+        }
+        // If not, set the position of the outline.
+        else {
+            let titleY = title.getBoundingClientRect().top + window.scrollY;
+            // If the title is off screen, anchor it to the top of the window. (CSS is set to do this).
+            if (titleY - 50 < window.scrollY) {
+                outline.classList.add("bookish-outline-fixed-left");
+                outline.classList.remove("bookish-outline-title-left");
+            }
+            // Otherwise, anchor it to the title position.
+            else {
+                outline.classList.remove("bookish-outline-fixed-left");
+                outline.classList.add("bookish-outline-title-left");
+            }
+            // Tell any listeners about the repositioning.
+            if (listener)
+                listener(false, layout);
+        }
+    }
+}
+function highlight() {
+    const top = window.scrollY;
+    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) => {
+        // Is this a header we care about?
+        if (header.tagName === "H1" || header.tagName === "H2" || header.tagName === "H3") {
+            let rect = header.getBoundingClientRect();
+            let headerTop = rect.y + top - rect.height;
+            // Are we past this header?
+            if (top > headerTop - threshold)
+                indexOfNearestHeaderAbove = index;
+        }
+    });
+    // Update the outline and progress bar.
+    headerIndex = indexOfNearestHeaderAbove;
+}
+onMount(() => {
+    window.addEventListener('resize', layout);
+    window.addEventListener('scroll', layout);
+    // This is a bit hacky: we update the headers on every selection change so we 
+    // can detect any header changes during editing. This isn't necessary during
+    // reading, and is only necessary when a header is created, updated, or removed,
+    // but we don't have a precise mechanism to listen to chapter changes, so we do this instead.
+    document.addEventListener("selectionchange", updateHeaders);
+    // Position outline after first render.
+    layout();
+    // Stop listening!
+    return () => {
+        window.removeEventListener('scroll', layout);
+        window.removeEventListener('resize', layout);
+        document.removeEventListener("selectionchange", updateHeaders);
+    };
+});
+let previousLabel = "\u25C0\uFE0E";
+let nextLabel = "\u25B6\uFE0E";
+let expandLabel = "\u2630";
+let lightLabel = "\u263C";
+let darkLabel = "\u263E";
+</script>
+
+<div 
+    bind:this={outline}
+    class={"bookish-outline " + (!expanded || collapse ? "bookish-outline-collapsed": "bookish-outline-expanded")}
+>
+    <!-- Dark mode toggle -->
+    <div 
+        class="bookish-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>
+    <!-- Visual cue of expandability, only visible in footer mode. -->
+    <div 
+        class={"bookish-outline-collapse-cue" + (headers.length === 0 ? " bookish-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="bookish-outline-headers">
+
+        <!-- Book navigation links -->
+        <div class="bookish-outline-header-nav">
+            {#if previous !== null}<Link to={base + "/" + previous}>{previousLabel}</Link>{:else}<span class="bookish-outline-header-nav-disabled">{previousLabel}</span>{/if}
+            &nbsp;&middot;&nbsp;
+            <Link to={base + "/"}>Home</Link>
+            &nbsp;&middot;&nbsp;
+            {#if next !== null}<Link to={base + "/" + next}>{nextLabel}</Link>{:else}<span class="bookish-outline-header-nav-disabled">{nextLabel}</span>{/if}
+        </div>
+        <!--  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. -->
+            {@const level = Number.parseInt(header.tagName.charAt(1)) }
+            <!-- Only h1, h2, and h3 headers... -->
+            {#if level <= 3 }
+                <Link to={"#" + header.id}>
+                    <div class={"bookish-outline-header bookish-outline-header-level-" + (level - 1) + (headerIndex === index ? " bookish-outline-header-active" : "")}>
+                        {header.textContent}
+                    </div>
+                </Link>
+            {/if}
+        {/each}
+    </div>
+</div>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        previous: string | null;
+        next: string | null;
+        collapse?: boolean | undefined;
+        listener?: ((expanded: boolean, layout: Function) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type OutlineProps = typeof __propDef.props;
+export declare type OutlineEvents = typeof __propDef.events;
+export declare type OutlineSlots = typeof __propDef.slots;
+export default class Outline extends SvelteComponentTyped<OutlineProps, OutlineEvents, OutlineSlots> {
+}
+export {};

package/components/page/Page.svelte

@@ -0,0 +1,53 @@
+<script>import { onMount } from 'svelte';
+import Loading from './Loading.svelte';
+export let title;
+export let afterLoaded = undefined;
+let loaded = false;
+let lastHeight = 0;
+let intervalID = null;
+let mountTime = Date.now();
+function watchLoading() {
+    const bodyHeight = document.body.clientHeight;
+    // If the height hasn't changed and images are loaded OR it's been 2 seconds, load.
+    if ((lastHeight === bodyHeight && imagesAreLoaded()) || (Date.now() - mountTime) > 2000) {
+        // Stop watching the images
+        stopWatching();
+        // Set to loaded to hide the overlay and notify callback if there is one.
+        loaded = true;
+        if (afterLoaded)
+            afterLoaded();
+    }
+    // Remember the last height
+    lastHeight = bodyHeight;
+}
+function stopWatching() {
+    if (intervalID)
+        clearInterval(intervalID);
+}
+onMount(() => {
+    // Watch the height of the document and wait until it's been stable for a while before scrolling
+    // to any targets. We use the data below to monitor the document height over time.
+    intervalID = setInterval(() => watchLoading(), 50);
+    return () => stopWatching();
+});
+function imagesAreLoaded() {
+    let done = true;
+    Array.from(document.getElementsByTagName("img")).forEach(el => {
+        done = done && el.complete;
+    });
+    return done;
+}
+</script>
+
+<svelte:head>
+    <title>{title}</title>
+    <meta name="description" content={title}>
+</svelte:head>
+
+{#if loaded === false }
+    <Loading/>
+{:else}
+    <div class={"bookish-page" + (loaded ? " bookish-page-loaded": "")}>
+        <slot></slot>
+    </div>
+{/if}

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        afterLoaded?: Function | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type PageProps = typeof __propDef.props;
+export declare type PageEvents = typeof __propDef.events;
+export declare type PageSlots = typeof __propDef.slots;
+export default class Page extends SvelteComponentTyped<PageProps, PageEvents, PageSlots> {
+}
+export {};

package/components/page/PossibleChapter.svelte

@@ -0,0 +1,14 @@
+<script>import Chapter from "./Chapter.svelte";
+import { page } from "$app/stores";
+import { getEdition } from "./Contexts";
+import Unknown from "./Unknown.svelte";
+$: edition = getEdition();
+$: chapterID = $page.params.chapterid;
+$: chapter = $edition.getChapter(chapterID);
+</script>
+
+{#if chapter}
+    <Chapter chapter={chapter}/>
+{:else}
+    <Unknown>This chapter doesn't exist...</Unknown>
+{/if}

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PossibleChapterProps = typeof __propDef.props;
+export declare type PossibleChapterEvents = typeof __propDef.events;
+export declare type PossibleChapterSlots = typeof __propDef.slots;
+export default class PossibleChapter extends SvelteComponentTyped<PossibleChapterProps, PossibleChapterEvents, PossibleChapterSlots> {
+}
+export {};

package/components/page/PossibleReference.svelte

@@ -0,0 +1,16 @@
+<script>import ErrorNode from "../../models/chapter/ErrorNode";
+import FormatNode from "../../models/chapter/FormatNode";
+import ErrorMessage from "../chapter/ErrorMessage.svelte";
+import Format from "../chapter/Format.svelte";
+import Reference from "./Reference.svelte";
+export let node;
+</script>
+
+
+{#if node instanceof FormatNode}
+    <Format node={node}/>
+{:else if node instanceof ErrorNode}
+    <ErrorMessage node={node}/>
+{:else}
+    <Reference node={node} />
+{/if}

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import ErrorNode from "../../models/chapter/ErrorNode";
+import FormatNode from "../../models/chapter/FormatNode";
+import type ReferenceNode from "../../models/chapter/ReferenceNode";
+declare const __propDef: {
+    props: {
+        node: FormatNode | ErrorNode | ReferenceNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PossibleReferenceProps = typeof __propDef.props;
+export declare type PossibleReferenceEvents = typeof __propDef.events;
+export declare type PossibleReferenceSlots = typeof __propDef.slots;
+export default class PossibleReference extends SvelteComponentTyped<PossibleReferenceProps, PossibleReferenceEvents, PossibleReferenceSlots> {
+}
+export {};

package/components/page/Print.svelte

@@ -0,0 +1,8 @@
+<script>import Chapter from './Chapter.svelte';
+import { getEdition } from './Contexts';
+let edition = getEdition();
+</script>
+
+{#each $edition.getChapters().filter(chapter => !chapter.isForthcoming()) as chapter }
+    <Chapter chapter={chapter} print />
+{/each}

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PrintProps = typeof __propDef.props;
+export declare type PrintEvents = typeof __propDef.events;
+export declare type PrintSlots = typeof __propDef.slots;
+export default class Print extends SvelteComponentTyped<PrintProps, PrintEvents, PrintSlots> {
+}
+export {};