bookish-press 0.4.47 → 0.4.49

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 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.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 {};

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

@@ -1,149 +1,119 @@
-<script lang="ts">
-    import { isMobile } from '$lib/util/isMobile';
-    import { onMount } from 'svelte';
-    import Link from '$lib/components/Link.svelte';
-    import { getBase, getDarkMode } from './Contexts';
-
-    export let previous: string | null;
-    export let next: string | null;
-    export let collapse = false;
-    export let listener:
-        | ((expanded: boolean, layout: Function) => void)
-        | undefined = undefined;
-
-    let headerString: string | null = null;
-    let headerIndex = -1;
-    let expanded = false;
-    let dark = getDarkMode();
-    let base = getBase();
-    let outline: HTMLElement | null = null;
-    let headers: Element[] = [];
-
-    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('page-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');
+<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('page-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('outline-fixed-left');
+                outline.classList.remove('outline-title-left');
             }
-            // If not, set the position of the outline.
+            // Otherwise, anchor it to the title position.
             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('outline-fixed-left');
-                    outline.classList.remove('outline-title-left');
-                }
-                // Otherwise, anchor it to the title position.
-                else {
-                    outline.classList.remove('outline-fixed-left');
-                    outline.classList.add('outline-title-left');
-                }
-
-                // Tell any listeners about the repositioning.
-                if (listener) listener(false, layout);
+                outline.classList.remove('outline-fixed-left');
+                outline.classList.add('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('page-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);
-        };
+}
+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('page-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;
+        }
     });
-
-    let previousLabel = '\u25C0\uFE0E';
-    let nextLabel = '\u25B6\uFE0E';
-    let expandLabel = '\u2630';
-    let lightLabel = '\u263C';
-    let darkLabel = '\u263E';
+    // 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>
 
 <nav

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 type OutlineProps = typeof __propDef.props;
+export type OutlineEvents = typeof __propDef.events;
+export type OutlineSlots = typeof __propDef.slots;
+export default class Outline extends SvelteComponentTyped<OutlineProps, OutlineEvents, OutlineSlots> {
+}
+export {};

package/components/page/Page.svelte

@@ -0,0 +1,84 @@
+<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>
+
+<section class={'bookish-page' + (loaded ? ' loaded' : '')}>
+    <slot />
+</section>
+<!-- Overlay loading feedback if loading, but still render the page. -->
+{#if loaded === false}
+    <Loading />
+{/if}
+
+<style>
+    /* A page, such as table of contents, chapter, or references */
+    .bookish-page {
+        max-width: 720px;
+
+        /* This helps marginals relative to the page */
+        position: relative;
+
+        /* To make room for navigation footer. Without this, the page is too short to show it. */
+        padding-left: var(--bookish-block-padding);
+        padding-right: var(--bookish-block-padding);
+        padding-bottom: 5em;
+
+        /* Center the application in the viewport */
+        margin-top: 0;
+        margin-left: auto;
+        margin-right: auto;
+
+        /* Hidden by default until tagged as loaded */
+        opacity: 0;
+        transition: opacity 0.25s ease-in;
+
+        z-index: 1;
+    }
+
+    .loaded {
+        opacity: 1;
+    }
+</style>

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 type PageProps = typeof __propDef.props;
+export type PageEvents = typeof __propDef.events;
+export type PageSlots = typeof __propDef.slots;
+export default class Page extends SvelteComponentTyped<PageProps, PageEvents, PageSlots> {
+}
+export {};

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

@@ -1,5 +1,4 @@
-<script lang="ts">
-    export let id: string | null = null;
+<script>export let id = null;
 </script>
 
 <h2 class="page-header" {id}><slot /></h2>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type PageHeaderProps = typeof __propDef.props;
+export type PageHeaderEvents = typeof __propDef.events;
+export type PageHeaderSlots = typeof __propDef.slots;
+export default class PageHeader extends SvelteComponentTyped<PageHeaderProps, PageHeaderEvents, PageHeaderSlots> {
+}
+export {};

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  PageParagraphProps */
+/** @typedef {typeof __propDef.events}  PageParagraphEvents */
+/** @typedef {typeof __propDef.slots}  PageParagraphSlots */
+export default class PageParagraph extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type PageParagraphProps = typeof __propDef.props;
+export type PageParagraphEvents = typeof __propDef.events;
+export type PageParagraphSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+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} />
+{: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: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PossibleChapterProps = typeof __propDef.props;
+export type PossibleChapterEvents = typeof __propDef.events;
+export type PossibleChapterSlots = typeof __propDef.slots;
+export default class PossibleChapter extends SvelteComponentTyped<PossibleChapterProps, PossibleChapterEvents, PossibleChapterSlots> {
+}
+export {};

package/components/page/PossibleReference.svelte

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

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

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

package/{src/lib/components → components}/page/Print.svelte

@@ -1,8 +1,6 @@
-<script lang="ts">
-    import Chapter from './Chapter.svelte';
-    import { getEdition } from './Contexts';
-
-    let edition = getEdition();
+<script>import Chapter from './Chapter.svelte';
+import { getEdition } from './Contexts';
+let edition = getEdition();
 </script>
 
 {#if $edition}

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

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