npm - @projektemacher/storymapjs - Versions diffs - 0.10.0 - Mend

@projektemacher/storymapjs 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (326) hide show

package/dist/docs/migration.html ADDED Viewed

@@ -0,0 +1,264 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Migration guide — StoryMapJS</title>
+        <meta name="description" content="Migration guide — StoryMapJS documentation" />
+        <link rel="stylesheet" href="../site.css" />
+    </head>
+    <body class="sm-site">
+    <nav class="navbar navbar-dark">
+        <ul>
+            <li class="logo">
+                <a href="../index.html">StoryMap <span>JS</span></a>
+            </li>
+        </ul>
+        <ul class="nav-right">
+            <li>
+                <a class="button button-dark button-active" href="https://github.com/cmahnke/StoryMapJS"
+                    >GitHub</a
+                >
+            </li>
+            <li>
+                <a class="button button-dark" href="https://github.com/cmahnke/StoryMapJS/issues"
+                    >Issues</a
+                >
+            </li>
+        </ul>
+    </nav>
+    <header class="header-product header-product-docs">
+        <nav id="navbar-secondary" class="navbar navbar-subnav" aria-label="Page navigation">
+            <ul>
+                <li><a class="button" href="../index.html#overview">Overview</a></li>
+                <li><a class="button" href="../index.html#examples">Examples</a></li>
+                <li><a class="button" href="./readme.html">README</a></li>
+                <li><a class="button" href="./migration.html">Migration guide</a></li>
+                <li><a class="button" href="./iiif.html">IIIF docs</a></li>
+                <li><a class="button" href="./api/index.html">API docs</a></li>
+                <li><a class="button" href="../index.html#help">Help</a></li>
+            </ul>
+        </nav>
+    </header>
+        <main class="sm-docs">
+            <h1>Migrating from the Knight Lab StoryMapJS</h1>
+<p>This guide helps you move from the original Knight Lab StoryMapJS viewer
+(distributed as a webpack UMD bundle with a <code>KLStoryMap</code> global) to this
+rewritten TypeScript/OpenLayers viewer (ESM only).</p>
+<p>The markup (<code>vco-*</code> classes), storymap JSON format and the
+<code>new StoryMap(elem, data, options, listeners)</code> constructor signature are
+preserved, so most stories render the same. What changed is the delivery
+(ESM instead of UMD), the map engine (Leaflet → OpenLayers, so some
+rendering details differ) and a few removed legacy paths.</p>
+<h2>Bundle and loading</h2>
+<table>
+<thead>
+<tr>
+<th>Knight Lab version (master)</th>
+<th>This version</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><code>&lt;script src=&quot;https://cdn.knightlab.com/libs/storymapjs/latest/js/storymap.js&quot;&gt;</code> + <code>new KLStoryMap.StoryMap(...)</code> (UMD global)</td>
+<td><code>npm install</code> + ESM import: <code>import { StoryMap } from &quot;storymapjs&quot;</code></td>
+</tr>
+<tr>
+<td><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;.../css/storymap.css&quot;&gt;</code> loaded manually</td>
+<td>Import the CSS once (<code>import &quot;storymapjs/css/storymap.css&quot;</code> or the stylesheet from <code>dist/css/</code>); font themes load automatically via the <code>font_css</code> option</td>
+</tr>
+<tr>
+<td><code>main.js</code>/<code>main-min.js</code>, <code>compiled/</code></td>
+<td>single ESM bundle <code>dist/js/storymap.js</code></td>
+</tr>
+</tbody></table>
+<p>There is <strong>no UMD/IIFE bundle and no <code>KLStoryMap</code>/<code>VCO</code> global</strong> anymore. For
+script-tag embedding use the ES module:</p>
+<pre><code class="language-html">&lt;script type=&quot;module&quot;&gt;
+    import { StoryMap } from &quot;https://example.com/storymap/js/storymap.js&quot;;
+    const storymap = new StoryMap(&quot;storymap-embed&quot;, &quot;https://example.com/my-storymap.json&quot;);
+&lt;/script&gt;
+</code></pre>
+<h2>Constructor</h2>
+<p>The signature is the same:</p>
+<pre><code class="language-ts">new StoryMap(elem, data, options?, listeners?)
+</code></pre>
+<ul>
+<li><code>elem</code> — container element or DOM id (unchanged).</li>
+<li><code>data</code> — a storymap document (<code>{ storymap: ... }</code>), an <strong>IIIF Presentation 3
+manifest</strong>, or a <strong>URL of the source file</strong>, which is fetched and validated
+automatically (unchanged).</li>
+<li><code>options</code> — see below for removed/changed options.</li>
+<li><code>listeners</code> — event listeners keyed by name (unchanged); <code>storymap.on(...)</code>
+still works.</li>
+</ul>
+<p>New capabilities:</p>
+<ul>
+<li><strong>Resize handling</strong>: the viewer re-layouts automatically when its container
+resizes (disable with <code>trackResize: false</code>).</li>
+<li><strong>Fullscreen</strong>: a menubar fullscreen toggle driven by the standard HTML5
+fullscreen API (<code>fullscreen: false</code> hides the button).</li>
+<li><strong>Raw OpenLayers options</strong>: pass <code>map_options: { controls, interactions, view, element, ... }</code> to configure the underlying OpenLayers map; <code>element</code>
+(HTMLElement or DOM id) replaces the auto-created map container.</li>
+<li><strong>Runtime options</strong>: <code>storymap.setMapOption(name, value)</code> /
+<code>storymap.setMapOptions({...})</code> — e.g. switch <code>map_type</code> or line styling live.</li>
+</ul>
+<h2>Changed options and map types</h2>
+<table>
+<thead>
+<tr>
+<th>Old</th>
+<th>New</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><code>map_type: &quot;zoomify&quot;</code> (+ <code>options.zoomify</code>)</td>
+<td>preferred: <code>map_type: &quot;iiif&quot;</code> with <code>options.iiif = { url, attribution }</code> (IIIF Image API 2/3); zoomify still works as a legacy image-pyramid basemap (see below)</td>
+</tr>
+<tr>
+<td><code>map_type: &quot;stamen:toner&quot;</code> etc.</td>
+<td><code>&quot;stamen:*&quot;</code> types are deprecated and remapped: <code>stamen:watercolor</code> → <code>ch-watercolor</code>, others → <code>osm:standard</code></td>
+</tr>
+<tr>
+<td>Stadia Maps paid tiles via <code>map_access_token</code></td>
+<td>Recommended: free OpenStreetMap vector styles, e.g. <code>map_type: &quot;osm:bright&quot;</code> (OpenFreeMap), or any style JSON URL</td>
+</tr>
+<tr>
+<td>Bundled <code>map_access_token</code></td>
+<td>removed — pass <code>map_access_token</code> in the options if you use Mapbox/Stadia tiles</td>
+</tr>
+<tr>
+<td>Bundled Flickr API key</td>
+<td>removed — pass <code>api_key_flickr</code> in the options if you use <code>flickr.com/photos</code> API URLs</td>
+</tr>
+<tr>
+<td><code>relative_date: true</code> (moment.js)</td>
+<td>removed — format dates in the story text</td>
+</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>
+</tr>
+</tbody></table>
+<h2>Removed globals and exports</h2>
+<table>
+<thead>
+<tr>
+<th>Removed</th>
+<th>Replacement</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><code>KLStoryMap</code> / <code>VCO</code> global (UMD)</td>
+<td>ESM import of the named exports</td>
+</tr>
+<tr>
+<td><code>window.trace</code></td>
+<td><code>console.log</code></td>
+</tr>
+<tr>
+<td><code>getJSON(url, onload)</code></td>
+<td><code>fetch</code> / the StoryMap constructor&#39;s URL loading</td>
+</tr>
+<tr>
+<td><code>StamenTileLayer</code> export</td>
+<td><code>map_type: &quot;osm:bright&quot;</code> or another OpenFreeMap style</td>
+</tr>
+<tr>
+<td><code>ZoomifyTileLayer</code> export</td>
+<td><code>map_type: &quot;iiif&quot;</code></td>
+</tr>
+<tr>
+<td>Knight Lab usage tracking (gtag)</td>
+<td>none — nothing is sent</td>
+</tr>
+</tbody></table>
+<h2>Removed media types and services</h2>
+<table>
+<thead>
+<tr>
+<th>Removed</th>
+<th>Replacement</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><code>vine</code> media type (service shut down)</td>
+<td>vine URLs fall back to the <code>website</code> iframe — use another media source for those slides</td>
+</tr>
+<tr>
+<td>Juxtapose <code>frame/?uid=</code> embed URLs</td>
+<td>the <code>juxtapose.knightlab.com/frame/?uid=</code> host is dead — use the published format <code>https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=...</code> (note: this keeps a Knight Lab CDN dependency for those slides)</td>
+</tr>
+<tr>
+<td>Twitter <code>@nickname</code> rendering</td>
+<td>tweets from <code>x.com</code> URLs are now parsed too (fixes <code>@undefined</code> nicknames); no migration needed</td>
+</tr>
+</tbody></table>
+<p><code>map_type: &quot;zoomify&quot;</code> is supported again (legacy): the image pyramid renders
+via the storymap data&#39;s <code>zoomify</code> options (<code>path</code>, <code>width</code>, <code>height</code>), using a
+JS warning instead of the previous removal error. Caveat: the pyramid&#39;s
+edge/remainder tiles render slightly stretched (the canvas renderer cannot
+per-tile clamp like the original Leaflet renderer). Using zoomify in a IIIF
+Presentation manifest is ignored — legacy zoomify options only work with
+storymap JSON sources.</p>
+<h2>Map engine: Leaflet → OpenLayers</h2>
+<ul>
+<li><code>storymap.map</code> now exposes the <strong>OpenLayers <code>Map</code></strong> instance instead of a
+Leaflet map. Port any direct Leaflet calls (e.g. <code>setView</code>, <code>flyTo</code>) to the
+OpenLayers API (<code>getView().animate(...)</code>, ...).</li>
+<li>Markers are DOM overlays (<code>.vco-mapmarker</code> / <code>.vco-mapmarker-active</code>) like
+before; the mini map is an OpenLayers <code>OverviewMap</code> control.</li>
+<li>New basemap options: vector styles via <code>map_type: &quot;osm:&lt;style&gt;&quot;</code> (OpenFreeMap)
+or a Mapbox style JSON URL.</li>
+</ul>
+<h2>Data and tooling</h2>
+<ul>
+<li>Storymap JSON is now validated against a JSON Schema
+(<code>schema/storymap.schema.json</code>); invalid documents are reported to the
+console at load time.</li>
+<li>IIIF Presentation 3 manifests are accepted directly as storymap sources.</li>
+<li>The StoryMap IIIF extension context changed to
+<code>https://christianmahnke.de/iiif/storymap</code> — manifests produced with the old
+<code>https://example.org/ns/storymap/v1</code> context need re-converting
+(<code>scripts/convert-to-iiif.mjs</code>).</li>
+<li>The editor, staging/backend infrastructure, AWS/GitHub hosting scripts and the
+Python authoring server are gone — this is a viewer-only library.</li>
+</ul>
+<h2>Events (unchanged)</h2>
+<p><code>change</code> (with <code>current_slide</code>), <code>loaded</code>, <code>title</code>, <code>dataloaded</code>,
+<code>fontLoaded</code>, plus the listener map in the constructor — all work as before.</p>
+        </main>
+    <footer class="footer-knightlab">
+        <div class="footer-grid">
+            <div>
+                <div class="footer-brand">StoryMap <span>JS</span></div>
+                <ul class="list-social">
+                    <li>
+                        <a href="https://github.com/cmahnke/StoryMapJS" title="StoryMapJS fork on GitHub"
+                            >GitHub</a
+                        >
+                    </li>
+                    <li>
+                        <a href="https://github.com/NUKnightLab/StoryMapJS" title="Upstream Knight Lab repository"
+                            >Upstream</a
+                        >
+                    </li>
+                </ul>
+            </div>
+            <div class="footer-description">
+                <p>
+                    A TypeScript rewrite of
+                    <a href="https://github.com/NUKnightLab/StoryMapJS">NUKnightLab/StoryMapJS</a>,
+                    the original tool by
+                    <a href="https://knightlab.northwestern.edu/">Northwestern University Knight Lab</a>.
+                </p>
+                <span class="copyright">
+                    Released under the <a href="https://opensource.org/license/MPL-2-0">MPL-2.0</a> license.
+                </span>
+            </div>
+        </div>
+    </footer>
+    </body>
+</html>

package/dist/docs/readme.html ADDED Viewed

@@ -0,0 +1,178 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>README — StoryMapJS</title>
+        <meta name="description" content="README — StoryMapJS documentation" />
+        <link rel="stylesheet" href="../site.css" />
+    </head>
+    <body class="sm-site">
+    <nav class="navbar navbar-dark">
+        <ul>
+            <li class="logo">
+                <a href="../index.html">StoryMap <span>JS</span></a>
+            </li>
+        </ul>
+        <ul class="nav-right">
+            <li>
+                <a class="button button-dark button-active" href="https://github.com/cmahnke/StoryMapJS"
+                    >GitHub</a
+                >
+            </li>
+            <li>
+                <a class="button button-dark" href="https://github.com/cmahnke/StoryMapJS/issues"
+                    >Issues</a
+                >
+            </li>
+        </ul>
+    </nav>
+    <header class="header-product header-product-docs">
+        <nav id="navbar-secondary" class="navbar navbar-subnav" aria-label="Page navigation">
+            <ul>
+                <li><a class="button" href="../index.html#overview">Overview</a></li>
+                <li><a class="button" href="../index.html#examples">Examples</a></li>
+                <li><a class="button" href="./readme.html">README</a></li>
+                <li><a class="button" href="./migration.html">Migration guide</a></li>
+                <li><a class="button" href="./iiif.html">IIIF docs</a></li>
+                <li><a class="button" href="./api/index.html">API docs</a></li>
+                <li><a class="button" href="../index.html#help">Help</a></li>
+            </ul>
+        </nav>
+    </header>
+        <main class="sm-docs">
+            <h1>StoryMapJS: Maps that tell stories.</h1>
+<blockquote>
+<p><strong>Important:</strong> this is an <strong>unofficial, unapproved fork</strong> of the original
+<a href="https://github.com/NUKnightLab/StoryMapJS">NUKnightLab/StoryMapJS</a>
+repository. It is a proof of concept for an AI-based renovation of the
+codebase, built using the model <strong>GLM 5.3 Flash</strong>. It is not endorsed by,
+affiliated with, or supported by Northwestern University Knight Lab.</p>
+</blockquote>
+<p>This fork is a <strong>viewer-only library</strong>: it renders existing StoryMap JSON
+files (or IIIF Presentation manifests) with TypeScript + Vite + OpenLayers.
+There is no authoring tool — create your storymap JSON by hand or with your
+own code, and see <code>docs/</code> for the migration notes from the original
+Knight Lab release.</p>
+<h2>Development</h2>
+<p>See docs/DEVELOPMENT.md to get setup for local development of StoryMapJS. This
+repository is the viewer library only (TypeScript + Vite + OpenLayers);
+StoryMap JSON is validated against the schema in <code>schema/</code> on load and via
+<code>npm run validate</code>.</p>
+<h2>Contributing language translations</h2>
+<p>StoryMap ships locale files for dozens of languages under
+<code>src/language/locale/</code> (for example
+<a href="src/language/locale/es.json"><code>es.json</code></a>). To add or improve a translation,
+copy an existing file and edit the quoted strings — please <em>don&#39;t</em> change the
+&quot;keys&quot; (the unquoted strings). The file name is the language code, e.g.
+<code>es.json</code> (codes like <code>zh-cn.json</code> and <code>zh-tw.json</code> are also supported — the
+value of the storymap&#39;s <code>language</code> option must match the file name).</p>
+<h2>IIIF images</h2>
+<p>Large images served over the IIIF Image API are rendered so when set to be map_as_image the entire image is shown. When set as cartography the zoom will set so that all the markers fit.</p>
+<p>Points are set to only display on mouseover in image mode, but you can set map_as_image to false in the config options to always show the points. The points are hidden when the intent is an image so that nothing obstructs the image the viewer is looking at. Looking at a painting is hard with a bunch of points on it.</p>
+<h2>Map Options</h2>
+<p>To disable connecting lines on maps set <code>map_as_image: true</code> in the storymap
+options (the default <code>false</code> renders cartography).</p>
+<p>The menubar buttons can be disabled individually:</p>
+<pre><code>show_overview:       false,   // map overview button
+show_back_to_start:  false,   // back to the beginning button
+fullscreen:          false,   // fullscreen toggle
+</code></pre>
+<p>(true is the default; setting the option to false hides the button.)</p>
+<p>More config options available to do what you want with the line:</p>
+<pre><code>line_follows_path:      true,		// Map history path follows default line, if false it will connect previous and current only
+line_color:             &quot;#c34528&quot;,
+line_color_inactive:    &quot;#CCC&quot;,
+line_join:              &quot;miter&quot;,
+line_weight:            3,
+line_opacity:           0.80,
+line_dash:              &quot;5,5&quot;,
+show_lines:             true,
+show_history_line:      true,
+</code></pre>
+<p>To disable zoom calculation/edit zoom level set calculate_zoom to false in the config options.</p>
+<p>Images can now be used in place of map pins.
+Use <code>image</code> inside the location object and include a url to use, together with
+<code>use_custom_marker: true</code> in the location object (or set <code>use_custom_markers: true</code> globally in the storymap options). Same goes for custom icons except you
+need <code>icon</code> inside the location object.</p>
+<h3>Limit the map to a bounding box</h3>
+<p>Set <code>map_bbox</code> to <code>[west, south, east, north]</code> (lon/lat) to constrain the map —
+nothing outside of the box can be visible:</p>
+<pre><code>map_bbox: [-11, 34, 32, 71],   // or null (the default) to leave the map unconstrained
+</code></pre>
+<p>For image-space (IIIF) maps the coordinates are raw image pixels. When the
+slide content panel is opaque (a solid background that hides the map behind it),
+the initial fit accounts for the covered area so the story stays inside the
+visible region.</p>
+<h2>Custom HTML in slide content</h2>
+<p>Slide text is rendered as HTML: the <code>text</code> (and <code>headline</code>) fields accept
+arbitrary markup. If the text contains no <code>&lt;p&gt;</code> tag, it is wrapped in one
+automatically; otherwise it is used as-is. This means you can use links,
+images, lists, emphasis and spans in your slides, e.g.:</p>
+<pre><code>{
+    &quot;headline&quot;: &quot;1920: An American in the Making&quot;,
+    &quot;text&quot;: &quot;Immigrants arriving at &lt;a href=\&quot;https://example.org\&quot;&gt;Ellis Island&lt;/a&gt;.&lt;br&gt;&lt;span class=&#39;vco-note&#39;&gt;Photograph: Library of Congress.&lt;/span&gt;&quot;
+}
+</code></pre>
+<p>The <code>vco-note</code> span renders as a small grey note, like the built-in credits.</p>
+<p><strong>Caution:</strong> the text is rendered raw — it is not sanitized. Only load
+storymaps from sources you trust.</p>
+<h2>GDPR consent for external services</h2>
+<p>Set the <code>consent_required</code> option to <code>true</code> to ask for permission before
+anything is loaded from external services (media embeds such as YouTube,
+Twitter or SoundCloud, map tiles, and external font CSS):</p>
+<pre><code>{
+    &quot;consent_required&quot;: true,
+    ...
+}
+</code></pre>
+<p>Each service asks with an Allow/Deny panel; answering one panel resolves every
+pending panel of the same service. If a decision was already stored in the
+cookie, the panel is skipped entirely. Denied services show a placeholder
+instead of the media, and the map renders without tiles until they are
+allowed. Decisions are stored in a cookie (<code>storymapjs-consent</code>) for 90
+days — clearing cookies asks again.</p>
+<h2>Troubleshooting</h2>
+<p>If a storymap fails to render, open the browser console: the viewer logs
+fetch and validation errors (e.g. &quot;could not load storymap data from ...&quot;).
+The <code>error</code> event also fires for programmatic consumers.</p>
+<h2>Bundled credentials</h2>
+<p>The viewer ships no credentials. Mapbox/Stadia tiles need a token passed via
+<code>map_access_token</code>, and <code>flickr.com/photos</code> API URLs need <code>api_key_flickr</code>
+(both settable in the storymap options).</p>
+        </main>
+    <footer class="footer-knightlab">
+        <div class="footer-grid">
+            <div>
+                <div class="footer-brand">StoryMap <span>JS</span></div>
+                <ul class="list-social">
+                    <li>
+                        <a href="https://github.com/cmahnke/StoryMapJS" title="StoryMapJS fork on GitHub"
+                            >GitHub</a
+                        >
+                    </li>
+                    <li>
+                        <a href="https://github.com/NUKnightLab/StoryMapJS" title="Upstream Knight Lab repository"
+                            >Upstream</a
+                        >
+                    </li>
+                </ul>
+            </div>
+            <div class="footer-description">
+                <p>
+                    A TypeScript rewrite of
+                    <a href="https://github.com/NUKnightLab/StoryMapJS">NUKnightLab/StoryMapJS</a>,
+                    the original tool by
+                    <a href="https://knightlab.northwestern.edu/">Northwestern University Knight Lab</a>.
+                </p>
+                <span class="copyright">
+                    Released under the <a href="https://opensource.org/license/MPL-2-0">MPL-2.0</a> license.
+                </span>
+            </div>
+        </div>
+    </footer>
+    </body>
+</html>

package/dist/embed/index.html ADDED Viewed

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>StoryMapJS Embed</title>
+  <meta charset="utf-8">
+  <meta name="description" content="StoryMapJS Embed">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-touch-fullscreen" content="yes">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <link rel="stylesheet" href="../css/storymap.css">
+  <style>
+    html, body {
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+  <div id="storymap-embed"></div>
+  <script type="module">
+    let StoryMap;
+    try {
+      // production (and preview): the built bundle next to this page
+      ({ StoryMap } = await import("../js/storymap.js"));
+    } catch {
+      // dev server (npm run dev): dist/ is not served; the source entry
+      // brings the widget styles along as bundled CSS
+      ({ StoryMap } = await import("/src/main.ts"));
+    }
+    let storymap;
+    const urlParams = new URLSearchParams(window.location.search);
+    const getStartSlide = () =>
+        urlParams.has("start_at_slide") ? parseInt(urlParams.get("start_at_slide"), 10) : 0;
+    const onStoryMapTitle = (e) => {
+        document.title = "StoryMapJS: " + e.title;
+    };
+    const buildStoryMap = (data) => {
+        if (!data || !data.storymap) {
+            return;
+        }
+        const options = { start_at_slide: getStartSlide() };
+        // font theme loading is handled by the library (data.font_css / stock:default)
+        storymap = new StoryMap("storymap-embed", data, options, {
+            title: onStoryMapTitle,
+        });
+    };
+    // resolve the url parameter against the SITE ROOT (the directory
+    // containing embed/), not against embed/ — works with relative
+    // ("examples/katrina.json"), root-relative ("/examples/…") and full
+    // URLs, in dev, preview and GitHub Pages project subpaths
+    const siteRoot = new URL("..", window.location.href);
+    const urlParam = urlParams.get("url");
+    const showEmbedError = (message) => {
+        const el = document.createElement("div");
+        el.className = "vco-consent-blocked";
+        // inline fallback styles in case the widget CSS did not load
+        el.style.cssText =
+            "display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:20px;background-color:#fff;color:#333;font-family:sans-serif;text-align:center;";
+        el.textContent = message;
+        document.getElementById("storymap-embed").append(el);
+    };
+    if (!urlParam) {
+        showEmbedError(
+            "No storymap url given. Append ?url=<storymap.json> to the embed url.",
+        );
+    } else {
+        fetch(new URL(urlParam, siteRoot).href)
+            .then((response) => {
+                if (!response.ok) {
+                    throw new Error("HTTP " + response.status);
+                }
+                return response.json();
+            })
+            .then((data) => buildStoryMap(data))
+            .catch(() => {
+                showEmbedError(
+                    "Could not load the storymap. Check that the url parameter points at a valid storymap JSON.",
+                );
+            });
+    }
+  </script>
+</body>
+</html>

package/dist/examples/assets/placeholder-city.jpg ADDED Viewed

Binary file

package/dist/examples/assets/placeholder-landscape.jpg ADDED Viewed

Binary file

package/dist/examples/assets/placeholder-portrait.jpg ADDED Viewed

Binary file

package/dist/examples/assets/tone.mp3 ADDED Viewed

Binary file