bookish-press 0.4.1 → 0.4.3

package/components/chapter/Marginal.svelte

@@ -1,48 +1,190 @@
+<svelte:options immutable={true} />
+
 <script>import { isMobile, watchMobile } from '../../util/isMobile';
 import { onMount } from 'svelte';
-import { getChapter } from '../page/Contexts';
+import { getCaret, getChapter, isChapterEditable, } from '../page/Contexts';
+export let node;
 export let id;
+export let label;
 let hovered = false;
 let chapter = getChapter();
+$: editable = isChapterEditable();
+let caret = getCaret();
 // If there's no marginal selected or this is different from the current selection, this is hidden.
-function isHidden() {
-    return $chapter?.marginalID === null || $chapter?.marginalID !== id;
-}
+$: selectedMarginal = $chapter?.marginal;
+$: isHidden = editable
+    ? // If editable, it's hidden if the caret is not inside the marginal content.
+        !($caret?.range?.start.node === node ||
+            $caret?.range?.start.node
+                .getAncestors($caret.root)
+                .some((ancestor) => ancestor === node))
+    : // If not editable, it's hidden if it's not selected.
+        $selectedMarginal !== id;
 function toggle() {
+    if (editable)
+        return;
     if ($chapter) {
-        if (isMobile() && isHidden())
-            $chapter.setMarginal(id);
+        if (isMobile() && isHidden)
+            $chapter.marginal.set(id);
         // Otherwise, deselect.
         else
-            $chapter.setMarginal(undefined);
+            $chapter.marginal.set(undefined);
     }
 }
-function handleEnter() { hovered = true; }
-function handleExit() { hovered = false; }
+function handleEnter() {
+    hovered = true;
+}
+function handleExit() {
+    hovered = false;
+}
 onMount(() => {
     const mediaWatch = watchMobile();
-    mediaWatch.addEventListener("change", toggle);
-    return () => mediaWatch.removeEventListener("change", toggle);
+    mediaWatch.addEventListener('change', toggle);
+    return () => mediaWatch.removeEventListener('change', toggle);
 });
 </script>
 
-<span 
-    class={"bookish-marginal-interactor" + (hovered ? " bookish-marginal-hovered" : "") + (isHidden() ? "" : " bookish-marginal-selected")} 
-	tabIndex=0
+<span
+    class={`bookish-marginal-interactor ${
+        hovered ? ' bookish-marginal-hovered' : ''
+    } ${isHidden ? '' : 'bookish-marginal-selected'} ${
+        editable ? '' : 'interactive'
+    }`}
+    aria-label={label}
+    tabIndex="0"
     on:mousedown={toggle}
-	on:keydown={event => event.key === "Enter" || event.key === " " ? toggle() : undefined }
-    on:mouseenter={handleEnter} 
+    on:keydown={(event) =>
+        event.key === 'Enter' || event.key === ' ' ? toggle() : undefined}
+    on:mouseenter={handleEnter}
+    on:mouseleave={handleExit}><slot name="interactor" /></span
+><span
+    class={'bookish-marginal' +
+        (isHidden ? ' bookish-marginal-hidden' : '') +
+        (hovered ? ' bookish-marginal-hovered' : '')}
+    tabIndex={editable ? null : 0}
+    on:mousedown={toggle}
+    on:keydown={(event) =>
+        event.key === 'Enter' || event.key === ' ' ? toggle() : undefined}
+    on:mouseenter={handleEnter}
     on:mouseleave={handleExit}
 >
-    <slot name="interactor"></slot>
+    <slot name="content" />
 </span>
-<span 
-    class={"bookish-marginal" + (isHidden() ? " bookish-marginal-hidden" : "") + (hovered ? " bookish-marginal-hovered" : "")} 
-	tabIndex=0
-    on:mousedown|stopPropagation={toggle} 
-	on:keydown={event => event.key === "Enter" || event.key === " " ? toggle() : undefined }
-    on:mouseenter={handleEnter} 
-    on:mouseleave={handleExit}
->
-    <slot name="content"></slot>
-</span>
+
+<style>
+    :global(.bookish-definition)
+        .bookish-marginal-interactor.bookish-marginal-hovered {
+        border-bottom-color: var(--bookish-link-color) !important;
+        border-bottom-width: 3px;
+    }
+
+    /* Mobile */
+    @media screen and (max-width: 1200px) {
+        /* Fixed position for small screens. */
+        .bookish-marginal {
+            background-color: var(--bookish-background-color);
+            padding: 0.75em;
+            position: fixed;
+            width: auto;
+            height: auto;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 2;
+            transform: translateY(0);
+            transition: transform 0.2s ease-in;
+        }
+
+        .interactive {
+            cursor: pointer;
+        }
+
+        /* Handle nested marginals by just not showing them. */
+        .bookish-marginal :global(.bookish-marginal) {
+            display: none;
+        }
+
+        .bookish-marginal-interactor:hover {
+            font-weight: bold;
+        }
+
+        :global(.bookish-definition) .bookish-marginal-interactor:hover {
+            font-weight: normal;
+        }
+
+        :global(.bookish-definition:hover) {
+            border-bottom-color: var(--bookish-border-color-bold) !important;
+        }
+
+        .bookish-marginal-hidden {
+            transform: translateY(100%);
+            transition: transform 0.2s ease-out;
+            height: 0;
+            bottom: 0;
+        }
+    }
+
+    /* Desktop */
+    @media screen and (min-width: 1200px) {
+        /* On larger screens, put marginal right things in the right margin. */
+        .bookish-marginal {
+            float: right;
+            width: 12rem;
+            display: block;
+            padding-bottom: 0.5rem;
+            position: absolute;
+        }
+
+        :global(
+                .bookish-definition
+                    .bookish-marginal.bookish-marginal-hovered
+                    .bookish-definition-entry
+            ) {
+            background: linear-gradient(
+                    to right,
+                    var(--bookish-link-color) 0px,
+                    var(--bookish-link-color) 3px,
+                    transparent 3px
+                )
+                no-repeat right;
+        }
+    }
+
+    /* A little circle around the citation and footer symbols, when hovered on a device that supports hovering. */
+    @media (hover: hover) {
+        .bookish-marginal-interactor.bookish-marginal-hovered
+            :global(.bookish-citation-symbol:before),
+        .bookish-marginal-interactor.bookish-marginal-hovered
+            :global(.bookish-footnote-symbol:before),
+        .bookish-marginal-interactor.bookish-marginal-hovered
+            :global(.bookish-comment-symbol:before) {
+            opacity: 0.3;
+        }
+    }
+
+    /* A little circle around the citation and footer symbols, when hovered */
+    .bookish-marginal-interactor.bookish-marginal-selected
+        :global(.bookish-citation-symbol:before),
+    .bookish-marginal-interactor.bookish-marginal-selected
+        :global(.bookish-footnote-symbol:before),
+    .bookish-marginal-interactor.bookish-marginal-selected
+        :global(.bookish-comment-symbol:before) {
+        opacity: 0.7;
+    }
+
+    .bookish-marginal-interactor :global(.bookish-citation-symbol:before),
+    .bookish-marginal-interactor :global(.bookish-footnote-symbol:before),
+    .bookish-marginal-interactor :global(.bookish-comment-symbol:before) {
+        content: '';
+        width: 3em;
+        height: 3em;
+        top: -1em;
+        left: calc(-1.5em + 50%); /* Centered plus half of the span width */
+        border-radius: 3em;
+        position: absolute;
+        z-index: -1;
+        opacity: 0;
+        background-color: var(--bookish-highlight-color);
+        transition: opacity 0.2s;
+    }
+</style>

package/components/chapter/Marginal.svelte.d.ts

@@ -1,7 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type Node from '../../models/chapter/Node';
 declare const __propDef: {
     props: {
+        node: Node;
         id: string;
+        label: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -11,9 +14,9 @@ declare const __propDef: {
         content: {};
     };
 };
-export declare type MarginalProps = typeof __propDef.props;
-export declare type MarginalEvents = typeof __propDef.events;
-export declare type MarginalSlots = typeof __propDef.slots;
+export type MarginalProps = typeof __propDef.props;
+export type MarginalEvents = typeof __propDef.events;
+export type MarginalSlots = typeof __propDef.slots;
 export default class Marginal extends SvelteComponentTyped<MarginalProps, MarginalEvents, MarginalSlots> {
 }
 export {};

package/components/chapter/Paragraph.svelte

@@ -1,15 +1,88 @@
+<svelte:options immutable={true} />
+
 <script>import Format from './Format.svelte';
-import { getChapter } from "../page/Contexts";
+import { getChapter, getEdition } from '../page/Contexts';
 export let node;
 export let placeholder = undefined;
 $: level = node.getLevel();
 $: chapter = getChapter();
-$: id = node.getLevel() === 0 || $chapter === undefined ? undefined : "header-" + ($chapter.chapter.getAST()?.getHeaders().indexOf(node) ?? "");
-$: classes = node.getLevel() === 0 ? undefined : "bookish-header" + ($chapter && $chapter.highlightedID === id ? " bookish-content-highlight" : "");
+$: edition = getEdition();
+$: id =
+    node.getLevel() === 0 ||
+        $chapter === undefined ||
+        $edition === undefined
+        ? undefined
+        : 'header-' +
+            ($chapter.chapter.getAST($edition)?.getHeaders().indexOf(node) ??
+                '');
+$: classes =
+    node.getLevel() === 0
+        ? undefined
+        : 'bookish-header' +
+            ($chapter && $chapter.highlightedID === id
+                ? ' bookish-content-highlight'
+                : '');
 </script>
 
 {#if level === 0}
-    <p data-nodeid={node.nodeID}><Format node={node.getFormat()} placeholder={placeholder ?? "¶"}/></p>
+    <p data-nodeid={node.nodeID} class:placeholder
+        ><Format node={node.getFormat()} placeholder={placeholder ?? '¶'} /></p
+    >
 {:else}
-    <svelte:element this={`h${level + 1}`} class={classes} id={id} data-nodeid={node.nodeID}><Format node={node.getFormat()} /></svelte:element>
-{/if}
+    <svelte:element
+        this={`h${level + 1}`}
+        class={classes}
+        {id}
+        data-nodeid={node.nodeID}
+        ><Format node={node.getFormat()} /></svelte:element
+    >
+{/if}
+
+<style>
+    p {
+        font-family: var(--bookish-paragraph-font-family);
+        font-size: var(--bookish-paragraph-font-size);
+        color: var(--bookish-paragraph-color);
+
+        margin-top: var(--bookish-paragraph-spacing);
+        margin-bottom: var(--bookish-paragraph-spacing);
+
+        line-height: var(--bookish-paragraph-line-height);
+
+        /* Allow paragraphs to break on words to support small screens. */
+        word-break: break-word;
+
+        /* Empty paragraphs should have at least some height. */
+        min-height: var(--bookish-paragraph-line-height);
+    }
+
+    .placeholder {
+        color: var(--bookish-muted-color);
+        font-style: italic;
+    }
+
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        font-family: var(--bookish-header-font-family);
+        font-weight: var(--bookish-header-font-weight);
+        margin-top: var(--bookish-header-spacing);
+        margin-bottom: var(--bookish-header-spacing);
+        line-height: var(--bookish-header-line-height);
+    }
+
+    h2 {
+        font-size: var(--bookish-header-1-font-size);
+    }
+
+    h3 {
+        font-size: var(--bookish-header-2-font-size);
+    }
+
+    h4 {
+        font-size: var(--bookish-header-3-font-size);
+        font-style: italic;
+    }
+</style>

package/components/chapter/Paragraph.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type ParagraphNode from "../../models/chapter/ParagraphNode";
+import type ParagraphNode from '../../models/chapter/ParagraphNode';
 declare const __propDef: {
     props: {
         node: ParagraphNode;
@@ -10,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ParagraphProps = typeof __propDef.props;
-export declare type ParagraphEvents = typeof __propDef.events;
-export declare type ParagraphSlots = typeof __propDef.slots;
+export type ParagraphProps = typeof __propDef.props;
+export type ParagraphEvents = typeof __propDef.events;
+export type ParagraphSlots = typeof __propDef.slots;
 export default class Paragraph extends SvelteComponentTyped<ParagraphProps, ParagraphEvents, ParagraphSlots> {
 }
 export {};

package/components/chapter/Positioned.svelte

@@ -0,0 +1,33 @@
+<svelte:options immutable={true} />
+
+<script>export let position;
+</script>
+
+<div
+    class={position === '<'
+        ? 'inset-left'
+        : position === '>'
+        ? 'inset-right'
+        : ''}><slot /></div
+>
+
+<style>
+    /* Desktop */
+    @media screen and (min-width: 1200px) {
+        .inset-left {
+            float: left;
+            clear: both;
+            width: 75%;
+            margin-left: -30% !important;
+            margin-right: 2em;
+        }
+
+        .inset-right {
+            float: right;
+            clear: both;
+            width: 75%;
+            margin-right: -30% !important;
+            margin-left: 2em;
+        }
+    }
+</style>

package/components/chapter/Positioned.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type Position from '../../models/chapter/Position';
+declare const __propDef: {
+    props: {
+        position: Position;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type PositionedProps = typeof __propDef.props;
+export type PositionedEvents = typeof __propDef.events;
+export type PositionedSlots = typeof __propDef.slots;
+export default class Positioned extends SvelteComponentTyped<PositionedProps, PositionedEvents, PositionedSlots> {
+}
+export {};

package/components/chapter/Problem.svelte

@@ -0,0 +1,15 @@
+<svelte:options immutable={true} />
+
+<span><slot /></span>
+
+<style>
+    span {
+        display: inline-block;
+        background-color: var(--bookish-error-background-color);
+        color: var(--bookish-error-color);
+        border-radius: var(--bookish-roundedness);
+        font-weight: 400;
+        padding: var(--bookish-inline-padding)
+            calc(2 * var(--bookish-inline-padding));
+    }
+</style>

package/components/chapter/Problem.svelte.d.ts

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

package/components/chapter/Python.svelte

@@ -1,81 +1,128 @@
 <script context="module">"use strict";
 </script>
 
-<script>import { afterUpdate, onMount } from "svelte";
+<script>import { afterUpdate, onMount } from 'svelte';
 import Code from './Code.svelte';
 export let node;
 export let startCode;
 // Start with whatever code was passed in.
 let code = startCode;
 // What is currently rendered to the console (not always program output).
-let output = "";
+let output = '';
 // Whether the runtime is loaded. Initialized based on presence of global.
 let loaded = skulptLoaded();
 let ref = null;
 onMount(() => {
     // Dynamically load the script to minimize payload and reduce index complexity.
-    if (document.getElementById("skulpt") === null) {
+    if (document.getElementById('skulpt') === null) {
         let script = document.createElement('script');
         script.type = 'text/javascript';
         script.async = true;
         script.id = 'skulpt';
-        script.onload = () => loaded = true;
-        script.src = "https://cdn.jsdelivr.net/combine/npm/skulpt@1.2.0/dist/skulpt.min.js,npm/skulpt@1.2.0/dist/skulpt-stdlib.min.js";
+        script.onload = () => (loaded = true);
+        script.src =
+            'https://cdn.jsdelivr.net/combine/npm/skulpt@1.2.0/dist/skulpt.min.js,npm/skulpt@1.2.0/dist/skulpt-stdlib.min.js';
         document.getElementsByTagName('head')[0].appendChild(script);
     }
 });
 // Always scroll to the bottom of the output.
 afterUpdate(() => {
     if (ref) {
-        let outputView = ref.querySelector(".bookish-python-output");
+        let outputView = ref.querySelector('.bookish-python-output');
         if (outputView)
             outputView.scrollTop = outputView.scrollHeight;
     }
 });
 function skulptLoaded() {
-    return window.hasOwnProperty("Sk");
+    return window.hasOwnProperty('Sk');
+}
+function reset() {
+    code = startCode;
+}
+function handleEdit(newCode) {
+    code = newCode;
 }
-function reset() { code = startCode; }
-function handleEdit(newCode) { code = newCode; }
 function handleOutput(out) {
     // Update the state to re-render.
-    output = out;
+    output += out;
 }
 function start() {
     if (skulptLoaded()) {
         // Communicate that executing is starting, wait a second, then execute the program.
         // This is important in case the user wants to run it again; it provides confirmation that it was run again.
-        output = "Executing...";
+        output = 'Executing...';
         setTimeout(() => execute(), 500);
     }
 }
 function execute() {
     // Reset the output, run the code, and update it's output.
-    output = "";
+    output = '';
     if (Sk) {
         Sk.configure({ output: handleOutput });
         try {
             if (Sk)
-                Sk.importMainWithBody("<stdin>", false, code, true);
+                Sk.importMainWithBody('<stdin>', false, code, true);
         }
         catch (error) {
             handleOutput(error);
         }
     }
 }
-$: lines = output.split("\n");
+$: lines = output.split('\n');
 </script>
 
 <div class="bookish-python" bind:this={ref}>
-    <Code inline={false} language={"python"} editable edited={handleEdit} nodeID={node.nodeID}>{code}</Code>
-    <div class="bookish-code-language">{"python"}</div>
+    <Code
+        inline={false}
+        language={'python'}
+        editable
+        edited={handleEdit}
+        nodeID={node.nodeID}>{code}</Code
+    >
     <div class="bookish-python-controls">
-        <button disabled={startCode === code } on:click={reset}>{"\u21BB"}</button>
-        <button disabled={!loaded} on:click={start}>{"\u25B6\uFE0E"}</button>
+        <button disabled={startCode === code} on:click={reset}
+            >{'\u21BB'}</button
+        >
+        <button disabled={!loaded} on:click={start}>{'\u25B6\uFE0E'}</button>
         <div class="bookish-python-output">
-            {#each lines as line, index }
-                <span class="python-output-line">{line}{#if index < lines.length - 1}<br/>{/if}</span>
+            {#each lines as line, index}
+                <span class="python-output-line"
+                    >{line}{#if index < lines.length - 1}<br />{/if}</span
+                >
             {/each}
         </div>
     </div>
-</div>
+</div>
+
+<style>
+    .bookish-python-controls {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        width: 100%;
+    }
+
+    .bookish-python button {
+        background: var(--bookish-block-background-color);
+        border: 1px solid var(--bookish-border-color-light);
+        width: 3em;
+        height: 3rem;
+        padding: 0;
+        display: inline-block;
+        vertical-align: top;
+    }
+
+    .bookish-python .bookish-python-output {
+        flex: 1;
+        border: 1px solid lightGray;
+        padding: 0.5rem;
+        height: 3rem;
+        overflow-y: scroll;
+        display: inline-block;
+        vertical-align: top;
+        color: var(--bookish-paragraph-color);
+        font-family: var(--bookish-code-font-family);
+        font-weight: var(--bookish-code-font-weight);
+        font-size: var(--bookish-block-font-size);
+    }
+</style>

package/components/chapter/Python.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type CodeNode from "../../models/chapter/CodeNode";
+import type CodeNode from '../../models/chapter/CodeNode';
 declare const __propDef: {
     props: {
         node: CodeNode;
@@ -10,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type PythonProps = typeof __propDef.props;
-export declare type PythonEvents = typeof __propDef.events;
-export declare type PythonSlots = typeof __propDef.slots;
+export type PythonProps = typeof __propDef.props;
+export type PythonEvents = typeof __propDef.events;
+export type PythonSlots = typeof __propDef.slots;
 export default class Python extends SvelteComponentTyped<PythonProps, PythonEvents, PythonSlots> {
 }
 export {};