@projektemacher/storymapjs 0.10.6 → 0.10.7

package/dist/css/fonts/font.oldstandard.css

@@ -12,15 +12,6 @@
 ================================================== */
 /*	Font Base
 ----------------------------------------------------- */
-/* old-standard-tt-latin-400-italic */
-@font-face {
-  font-family: "Old Standard TT";
-  font-style: italic;
-  font-display: swap;
-  font-weight: 400;
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-  src: url(files/old-standard-tt-latin-400-italic.woff2) format("woff2");
-}
 /* old-standard-tt-latin-400-normal */
 @font-face {
   font-family: "Old Standard TT";
@@ -30,8 +21,6 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   src: url(files/old-standard-tt-latin-400-normal.woff2) format("woff2");
 }
-/* old-standard-tt-latin-700-italic */
-
 /* old-standard-tt-latin-700-normal */
 @font-face {
   font-family: "Old Standard TT";
@@ -41,15 +30,6 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   src: url(files/old-standard-tt-latin-700-normal.woff2) format("woff2");
 }
-/* old-standard-tt-latin-ext-400-italic */
-@font-face {
-  font-family: "Old Standard TT";
-  font-style: italic;
-  font-display: swap;
-  font-weight: 400;
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-  src: url(files/old-standard-tt-latin-ext-400-italic.woff2) format("woff2");
-}
 /* old-standard-tt-latin-ext-400-normal */
 @font-face {
   font-family: "Old Standard TT";
@@ -59,8 +39,6 @@
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
   src: url(files/old-standard-tt-latin-ext-400-normal.woff2) format("woff2");
 }
-/* old-standard-tt-latin-ext-700-italic */
-
 /* old-standard-tt-latin-ext-700-normal */
 @font-face {
   font-family: "Old Standard TT";
@@ -70,6 +48,24 @@
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
   src: url(files/old-standard-tt-latin-ext-700-normal.woff2) format("woff2");
 }
+/* old-standard-tt-latin-400-italic */
+@font-face {
+  font-family: "Old Standard TT";
+  font-style: italic;
+  font-display: swap;
+  font-weight: 400;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  src: url(files/old-standard-tt-latin-400-italic.woff2) format("woff2");
+}
+/* old-standard-tt-latin-ext-400-italic */
+@font-face {
+  font-family: "Old Standard TT";
+  font-style: italic;
+  font-display: swap;
+  font-weight: 400;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  src: url(files/old-standard-tt-latin-ext-400-italic.woff2) format("woff2");
+}
 /*	Font Old Standard
 https://fonts.google.com/specimen/Old+Standard+TT
 ---------------------------------------------------- */

package/dist/demo.html

@@ -4,8 +4,8 @@
         <title>StoryMapJS Demo</title>
         <meta charset="utf-8" />
         <style>*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;padding:0}#storymap-embed{width:100%;height:100%}</style>
-      <script type="module" crossorigin src="./assets/demo-CVQ7kFek.js"></script>
-      <link rel="modulepreload" crossorigin href="./assets/main-DwbXrrYn.js">
+      <script type="module" crossorigin src="./assets/demo-D6cTmzn6.js"></script>
+      <link rel="modulepreload" crossorigin href="./assets/main-Y-MYUSJ4.js">
       <link rel="modulepreload" crossorigin href="./assets/modulepreload-polyfill-P2Xu9kJm.js">
         <link rel="stylesheet" href="./css/storymap.css" />
     </head>

package/dist/docs/migration.html

@@ -151,7 +151,7 @@ are rendered wider with a visible track for contrast.</li>
 </tr>
 <tr>
 <td><code>font_css: &quot;stock:&lt;name&gt;&quot;</code> (or a path)</td>
-<td>unchanged, plus the font files ship via <code>@fontsource-utils/scss</code>; no separate font CSS link needed</td>
+<td>paths now resolve against the page URL (not the library location), plus the font files ship via <code>@fontsource-utils/scss</code>; no separate font CSS link needed</td>
 </tr>
 </tbody></table>
 <h2>Removed globals and exports</h2>

package/dist/embed/index.html

@@ -16,6 +16,64 @@
       padding: 0;
       margin: 0;
     }
+    #storymap-embed {
+      width: 100%;
+      height: 100%;
+    }
+    .storymap-url-prompt {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      padding: 20px;
+      box-sizing: border-box;
+      background-color: #fff;
+      color: #333;
+      font-family: sans-serif;
+    }
+    .storymap-url-card {
+      width: 100%;
+      max-width: 480px;
+      text-align: left;
+    }
+    .storymap-url-card h1 {
+      font-size: 1.25rem;
+      margin: 0 0 8px;
+    }
+    .storymap-url-card p {
+      margin: 0 0 12px;
+    }
+    .storymap-url-card label {
+      display: block;
+      margin-bottom: 6px;
+      font-weight: bold;
+    }
+    .storymap-url-row {
+      display: flex;
+      gap: 8px;
+    }
+    .storymap-url-card input {
+      flex: 1;
+      min-width: 0;
+      padding: 8px 10px;
+      font-size: 1rem;
+      border: 1px solid #999;
+      border-radius: 4px;
+    }
+    .storymap-url-card button {
+      padding: 8px 16px;
+      font-size: 1rem;
+      border: 1px solid #333;
+      border-radius: 4px;
+      background-color: #333;
+      color: #fff;
+      cursor: pointer;
+    }
+    .storymap-url-error {
+      margin-top: 8px;
+      color: #a00;
+    }
   </style>
 </head>
 
@@ -39,6 +97,12 @@
     const getStartSlide = () =>
         urlParams.has("start_at_slide") ? parseInt(urlParams.get("start_at_slide"), 10) : 0;
 
+    // slide duration in milliseconds; missing or invalid values disable autoplay
+    const getAutoplay = () => {
+        const value = parseInt(urlParams.get("autoplay"), 10);
+        return Number.isFinite(value) && value > 0 ? value : 0;
+    };
+
     const onStoryMapTitle = (e) => {
         document.title = "StoryMapJS: " + e.title;
     };
@@ -47,7 +111,7 @@
         if (!data || !data.storymap) {
             return;
         }
-        const options = { start_at_slide: getStartSlide() };
+        const options = { start_at_slide: getStartSlide(), autoplay: getAutoplay() };
         // font theme loading is handled by the library (data.font_css / stock:default)
         storymap = new StoryMap("storymap-embed", data, options, {
             title: onStoryMapTitle,
@@ -71,10 +135,71 @@
         document.getElementById("storymap-embed").append(el);
     };
 
+    const showUrlPrompt = (message) => {
+        const container = document.getElementById("storymap-embed");
+        container.innerHTML = "";
+        const el = document.createElement("div");
+        el.className = "storymap-url-prompt";
+        const card = document.createElement("div");
+        card.className = "storymap-url-card";
+        const heading = document.createElement("h1");
+        heading.textContent = "Open a StoryMap";
+        const hint = document.createElement("p");
+        hint.textContent =
+            message || "Enter the URL of a storymap.json file to view it here.";
+        const form = document.createElement("form");
+        form.id = "storymap-url-form";
+        const label = document.createElement("label");
+        label.setAttribute("for", "storymap-url-input");
+        label.textContent = "Storymap JSON URL";
+        const row = document.createElement("div");
+        row.className = "storymap-url-row";
+        const input = document.createElement("input");
+        input.id = "storymap-url-input";
+        input.name = "url";
+        // type="text" (not "url") so relative storymap paths like
+        // "examples/katrina.json" pass native form validation; validity is
+        // checked via new URL(value, siteRoot) on submit instead.
+        input.type = "text";
+        input.inputMode = "url";
+        input.required = true;
+        input.placeholder = "https://example.com/storymap.json";
+        input.autocomplete = "off";
+        input.spellcheck = false;
+        const button = document.createElement("button");
+        button.type = "submit";
+        button.textContent = "Open storymap";
+        const error = document.createElement("p");
+        error.id = "storymap-url-error";
+        error.className = "storymap-url-error";
+        error.hidden = true;
+        row.append(input, button);
+        form.append(label, row, error);
+        card.append(heading, hint, form);
+        el.append(card);
+        container.append(el);
+        form.addEventListener("submit", (e) => {
+            e.preventDefault();
+            const value = input.value.trim();
+            if (!value) {
+                return;
+            }
+            try {
+                // validate + resolve like the viewer fetch below (supports
+                // relative, root-relative and absolute URLs)
+                new URL(value, siteRoot);
+            } catch {
+                error.textContent = "Please enter a valid URL to a storymap.json file.";
+                error.hidden = false;
+                return;
+            }
+            urlParams.set("url", value);
+            window.location.search = urlParams.toString();
+        });
+    };
+
     if (!urlParam) {
-        showEmbedError(
-            "No storymap url given. Append ?url=<storymap.json> to the embed url.",
-        );
+        showUrlPrompt();
     } else {
         fetch(new URL(urlParam, siteRoot).href)
             .then((response) => {

package/dist/harness.html

@@ -4,8 +4,8 @@
         <meta charset="utf-8" />
         <title>StoryMapJS Example Harness</title>
         <style>*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;padding:0}#storymap-embed{width:100%;height:100%}</style>
-      <script type="module" crossorigin src="./assets/harness-C-VZV-ou.js"></script>
-      <link rel="modulepreload" crossorigin href="./assets/main-DwbXrrYn.js">
+      <script type="module" crossorigin src="./assets/harness-BPFlzutp.js"></script>
+      <link rel="modulepreload" crossorigin href="./assets/main-Y-MYUSJ4.js">
       <link rel="modulepreload" crossorigin href="./assets/modulepreload-polyfill-P2Xu9kJm.js">
         <link rel="stylesheet" href="./css/storymap.css" />
     </head>

package/dist/index.html

@@ -259,6 +259,23 @@ new StoryMap("mapdiv", "my-storymap.json");</code></pre>
                                     </p>
                                 </div>
                             </li>
+                            <li>
+                                <input type="checkbox" checked />
+                                <i></i>
+                                <h3>Can the storymap play automatically?</h3>
+                                <div class="accordion-content">
+                                    <p>
+                                        Set the <code>autoplay</code> option to the number of
+                                        milliseconds each slide stays on screen (also available as
+                                        an embed URL parameter):
+                                    </p>
+                                    <pre><code>/embed/index.html?url=my-storymap.json&amp;autoplay=5000</code></pre>
+                                    <p>
+                                        Playback stops at the last slide, and any click, tap or
+                                        keypress hands control back to the viewer.
+                                    </p>
+                                </div>
+                            </li>
                             <li>
                                 <input type="checkbox" checked />
                                 <i></i>

package/dist/js/storymap.d.ts

@@ -3,6 +3,7 @@ import { default as default_3 } from 'ol/Map';
 import { default as default_4 } from 'ol/Overlay';
 import { default as default_5 } from 'ol/tilegrid/TileGrid';
 import { default as default_6 } from 'ol/proj/Projection';
+import { Extent } from 'ol/extent';
 import { Map as Map_3 } from 'ol';
 import { Style } from 'ol/style';
 import { Tile } from 'ol/layer';
@@ -409,6 +410,7 @@ declare class MenuBarBase {
     "options": MenuBarOptions;
     "animator": Record<string, unknown>;
     "fire": EventedInstance["fire"];
+    _fullscreenActive: boolean;
     constructor(elem: HTMLElement | string, parent_elem?: HTMLElement, options?: object);
     show(d?: number): void;
     hide(top: number): void;
@@ -418,6 +420,11 @@ declare class MenuBarBase {
      * Reflect the fullscreen state in the button label/icon.
      */
     setFullscreenState(active: boolean): void;
+    /**
+     * Repaint every text label from the active language (see `setLanguage`).
+     * Icon-only mobile buttons carry no text and are left untouched.
+     */
+    refreshLabels(): void;
     /**
      * Update the progress indicator (issue #247); no-op when disabled.
      */
@@ -509,9 +516,24 @@ declare class OpenLayers extends Map_2 {
     "_tile_layer_mini": Tile | null;
     "_mini_map": default_2;
     "_markers": OpenLayersMapMarker[];
+    /** App-level stacked overlays (see the `overlays` option) */
+    "_overlay_layers": Tile[];
     /** rAF handle of the running active-line draw animation */
     "_line_animation": number | null;
     _createMap(): void;
+    /** Extra attribution fragments (e.g. overlay credits), always listed last. */
+    "_extra_attributions": string[];
+    /**
+     * Append extra attribution fragments and refresh the line. Hosts with
+     * custom layers use this instead of rewriting `.vco-map-attribution`.
+     */
+    setExtraAttributions(parts: string[]): void;
+    /**
+     * (Re)render the attribution line for the current map type. Called at
+     * creation and on every `map_type` switch, which previously left the
+     * initial text stale.
+     */
+    _updateAttribution(): void;
     _getAttribution(map_type: string): string;
     /**
      * Create the tile layer and register its load handler. Deferred until
@@ -522,6 +544,37 @@ declare class OpenLayers extends Map_2 {
      * Ask for tile consent, then attach the layers if allowed.
      */
     _requestTileConsent(consent: ConsentManager, tile_service: string): Promise<void>;
+    /**
+     * (Re)build the stacked raster overlays from the `overlays` option.
+     * Overlays sit above the base tiles (z 1..n) and below the route lines
+     * (z 10/11); every entry accepts any `map_type` value plus declarative
+     * presentation, so hosts no longer capture and patch layer objects.
+     */
+    _buildOverlays(): void;
+    /**
+     * Convert a lon/lat clip box to view units. Only meaningful on
+     * mercator maps; image-space maps (iiif/zoomify) and malformed
+     * boxes yield null (no constraint).
+     */
+    _lonLatBboxToExtent(bbox: [number, number, number, number]): Extent | null;
+    /**
+     * Apply an overlay's blend mode to its layer container. The container
+     * div only exists once the layer has rendered, so retry on later
+     * frames (bounded: rendering settles within a frame or two of any
+     * add/visibility change).
+     */
+    _paintOverlayBlend(entry: {
+        className?: string;
+        blendMode?: string;
+    }, retries?: number): void;
+    /** Refresh the attribution line with the visible overlays' credits. */
+    _syncOverlayAttributions(): void;
+    /** Number of stacked overlay layers (see the `overlays` option). */
+    getOverlayCount(): number;
+    /** Show or hide a stacked overlay by index (re-syncs attribution). */
+    setOverlayVisible(index: number, visible: boolean): void;
+    /** Set a stacked overlay's opacity by index. */
+    setOverlayOpacity(index: number, opacity: number): void;
     /**
      * Map tiles were allowed: attach the main tile layer, create the
      * minimap's deferred layer if it was withheld, then re-fit.
@@ -921,6 +974,7 @@ declare class StoryMapBase {
     "animator_map": AnimationHandle | null;
     "animator_storyslider": AnimationHandle | null;
     "_autoplay_timer": ReturnType<typeof setTimeout> | null;
+    "_transition_timer": ReturnType<typeof setTimeout> | null;
     "_autoplay_stopped": boolean;
     "_hash_initialized": boolean;
     /** the data source was a IIIF Presentation manifest (legacy zoomify options are ignored) */
@@ -946,6 +1000,7 @@ declare class StoryMapBase {
     _loadDataFromUrl(url: string, source: string): Promise<void>;
     _initOptions(): void;
     _loadLanguage(): void;
+    refreshLanguage(code: string): void;
     _loadFontCss(): Promise<void>;
     _onFontLoaded(font: string): void;
     /**
@@ -955,6 +1010,13 @@ declare class StoryMapBase {
      *   marker (or the overview when `n` is 0 for storymaps with one).
      */
     goTo(n: number): void;
+    /**
+     * Announce a slide transition: `transitionstart` now (with the glide
+     * duration both animations were started with) and `transitionend` once
+     * it elapses. Restarts on every navigation, so only the latest
+     * transition ever ends.
+     */
+    _beginTransition(duration: number): void;
     /**
      * Re-measure the container and re-layout the map, slider and menubar.
      * Called automatically on resize (see the `trackResize` option).
@@ -964,21 +1026,31 @@ declare class StoryMapBase {
      * Change a single map option at runtime and apply its effect immediately.
      *
      * Runtime-changeable options: `map_type` (rebuilds the main + minimap tile
-     * layers, keeping the overview fitted to the marker bounds),
-     * `show_lines`, `line_color`, `line_color_inactive`, `line_weight`,
-     * `line_opacity`, `line_dash`, `line_join`, `line_follows_path`,
-     * `show_history_line` (restyled instantly), `map_center_offset` (applied on
-     * the next navigation), `duration`, `ease`, `calculate_zoom`,
-     * `map_background_color`. All other options only take effect on the next
-     * navigation or require re-creating the StoryMap.
+     * layers, keeping the overview fitted to the marker bounds), `overlays`
+     * (rebuilds the stacked overlay layers), `show_lines`, `line_color`,
+     * `line_color_inactive`, `line_weight`, `line_opacity`, `line_dash`,
+     * `line_join`, `line_follows_path`, `show_history_line` (restyled
+     * instantly), `map_center_offset` (applied on the next navigation),
+     * `duration`, `ease`, `calculate_zoom`, `map_background_color`. All other
+     * options only take effect on the next navigation or require re-creating
+     * the StoryMap.
      */
     setMapOption(name: string, value: unknown): void;
+    /**
+     * Show or hide a stacked overlay by index (see the `overlays` option).
+     */
+    setOverlayVisible(index: number, visible: boolean): void;
+    /**
+     * Set a stacked overlay's opacity by index (see the `overlays` option).
+     */
+    setOverlayOpacity(index: number, opacity: number): void;
     /**
      * Change several map options at runtime (see setMapOption).
      */
     setMapOptions(options: Partial<StorymapOptions>): void;
     _initLayout(): void;
     _initEvents(): void;
+    _onKeyDownGlobal(e: KeyboardEvent): void;
     _updateDisplay(map_height?: number, animate?: boolean, d?: number): void;
     _onDataLoaded(e?: unknown): void;
     _startAutoplay(): void;
@@ -1091,6 +1163,12 @@ export declare interface StorymapOptions {
     ease: unknown;
     dragging: boolean;
     trackResize: boolean;
+    /**
+     * Navigate slides with arrow keys anywhere on the page (default false:
+     * arrows only work when the slide panel has focus). Form elements and
+     * the map itself (which pans) are always skipped. Read at construction.
+     */
+    keyboard: boolean;
     /** Re-fetch the source file on every load, bypassing caches (issue #417) */
     nocache: boolean;
     /** Advance slides automatically every N milliseconds; 0 disables (issue #380) */
@@ -1108,6 +1186,13 @@ export declare interface StorymapOptions {
     } | null;
     map_type: string;
     attribution: string;
+    /**
+     * Stacked raster overlays above the base map, below the route lines.
+     * Each entry accepts any `map_type` value (XYZ template, `osm:style`,
+     * …) plus per-layer presentation; see StorymapOverlayLayer. Empty
+     * (default) means base map only.
+     */
+    overlays: StorymapOverlayLayer[];
     map_mini: boolean;
     map_subdomains: string;
     map_as_image: boolean;
@@ -1127,6 +1212,12 @@ export declare interface StorymapOptions {
      * constrained to the box; `null` (default) leaves the map unconstrained.
      */
     map_bbox: number[] | null;
+    /**
+     * Constrain the minimap overview to a bounding box `[west, south, east,
+     * north]` in lon/lat (mercator maps only); `null` (default) leaves the
+     * overview unconstrained.
+     */
+    overview_extent: [number, number, number, number] | null;
     /**
      * Legacy zoomify image pyramid (map_type: "zoomify"): the tiles are
      * placed at the standard mercator tile positions, stretched from the
@@ -1188,6 +1279,34 @@ export declare interface StorymapOptions {
     [key: string]: unknown;
 }
 
+/**
+ * A stacked raster overlay above the base map (StorymapOptions.overlays).
+ * Presentation is declarative: hosts no longer need to reach into the
+ * layer objects for blend modes, clips or stacking tweaks.
+ */
+declare interface StorymapOverlayLayer {
+    /** Any `map_type` value the tile layer factory accepts */
+    map_type: string;
+    /** Layer opacity 0..1 (default 1) */
+    opacity?: number;
+    /** Initial visibility (default true) */
+    visible?: boolean;
+    /** Extra attribution fragment, listed while the overlay is visible */
+    attribution?: string;
+    /**
+     * CSS class for the layer container. OpenLayers paints every layer
+     * with the same class into one shared div/canvas, so a distinct
+     * class isolates this layer (e.g. for blend modes). The class
+     * replaces the default wholesale, so keep the `ol-layer` token
+     * (e.g. `"ol-layer historic-sheet"`) unless you know why not.
+     */
+    className?: string;
+    /** CSS mix-blend-mode for the layer container (needs className) */
+    blendMode?: string;
+    /** Clip box `[west, south, east, north]` in lon/lat (mercator maps) */
+    extent?: [number, number, number, number];
+}
+
 export declare interface StorymapSlide {
     type?: string;
     date?: string | Record<string, unknown> | null;