@projektemacher/storymapjs 0.10.8 → 0.11.0

package/src/media/types/Image.ts

@@ -33,6 +33,9 @@ export function iiifSizedUrl(url: string | null, width: number): string | null {
 ================================================== */
 
 export default class Image extends Media {
+    /** The `load` handler on the image, stored so dispose() can detach it. */
+    declare "_onLoad": (() => void) | null;
+
     /*	Load the media
 	================================================== */
     _loadMedia() {
@@ -61,10 +64,12 @@ export default class Image extends Media {
             );
         }
 
-        // Media Loaded Event
-        this._el.content_item.addEventListener("load", (e) => {
+        // Media Loaded Event. The reference is kept so dispose() can detach
+        // it: an inline arrow function has no other handle.
+        this._onLoad = () => {
             this.onMediaLoaded();
-        });
+        };
+        this._el.content_item.addEventListener("load", this._onLoad);
 
         const img = this._el.content_item as HTMLImageElement;
         // offscreen/preloaded slides stay lazy (the active slide is
@@ -112,4 +117,11 @@ export default class Image extends Media {
     _updateMediaDisplay(layout?: string) {
         // modern browsers size media correctly without engine-specific fixes
     }
+
+    _disposeMedia(): void {
+        if (this._onLoad) {
+            this._el.content_item?.removeEventListener("load", this._onLoad);
+            this._onLoad = null;
+        }
+    }
 }

package/src/media/types/SoundCloud.ts

@@ -91,7 +91,7 @@ export default class SoundCloud extends Media {
         try {
             this.widget?.unbind?.();
         } catch (err) {
-            console.log(err);
+            console.warn("StoryMapJS: error unbinding SoundCloud widget.", err);
         }
         this.widget = null;
         this.soundCloudCreated = false;

package/src/media/types/Text.ts

@@ -14,13 +14,21 @@ interface TextData {
 interface TextOptions {
     title?: boolean;
     text_align?: string;
+    /** BCP 47 tag for the slide text (from `StorymapSlide.language`). */
+    language?: string;
+}
+
+export interface TextEvents {
+    loaded: TextData;
+    added: TextData;
+    removed: TextData;
 }
 
 class TextBase {
     declare "_el": Record<string, HTMLElement>;
     declare "data": TextData;
     declare "options": TextOptions;
-    declare "fire": EventedInstance["fire"];
+    declare "fire": EventedInstance<TextEvents>["fire"];
 
     /*	Constructor
 	================================================== */
@@ -57,6 +65,15 @@ class TextBase {
 
         this._el.container = Dom.create("div", "vco-text");
         this._el.container.id = this.data.uniqueid ?? "";
+        // Pronounce mixed-language slides correctly: the reader reports
+        // which language map it picked, and the DOM should say so too.
+        if (
+            typeof this.options.language === "string" &&
+            this.options.language !== "" &&
+            this.options.language !== "none"
+        ) {
+            this._el.container.setAttribute("lang", this.options.language);
+        }
 
         this._initLayout();
 
@@ -124,12 +141,6 @@ class TextBase {
             this._el.content_container.classList.add("vco-text-align-" + align);
         }
 
-        // Date (only rendered when the slide has one; issue #286)
-        if (this.data.date && this.data.date.created_time && this.data.date.created_time !== "") {
-            this._el.date = Dom.create("h3", "vco-headline-date", this._el.content_container);
-            this.addDateText(convertUnixTime(this.data.date.created_time));
-        }
-
         // Headline (sanitized; issue #358 keeps formatting but drops scripts)
         const headline = this.data.headline ?? "";
         if (headline !== "") {
@@ -141,6 +152,14 @@ class TextBase {
             this._el.headline.appendChild(sanitizeSlideText(headline));
         }
 
+        // Date (only rendered when the slide has one; issue #286). Emitted
+        // after the headline and as a <p> (issue #385 wave): an <h3> before
+        // the <h2> was a heading-order skip
+        if (this.data.date && this.data.date.created_time && this.data.date.created_time !== "") {
+            this._el.date = Dom.create("p", "vco-headline-date", this._el.content_container);
+            this.addDateText(convertUnixTime(this.data.date.created_time));
+        }
+
         // Text (sanitized; issue #358 allows extra iframe media in the text field)
         const text = this.data.text ?? "";
         if (text !== "") {
@@ -171,7 +190,7 @@ class TextBase {
     }
 }
 
-export default class Text extends Evented(TextBase) {
+export default class Text extends Evented<TextEvents, typeof TextBase>(TextBase) {
     constructor(...args: ConstructorParameters<typeof TextBase>) {
         super(...args);
     }

package/src/media/types/Twitter.ts

@@ -1,6 +1,7 @@
 import { Media } from "../Media";
 import Dom from "../../dom/Dom";
 import { sanitizeSlideText } from "../EmbedUtil";
+import { tweetAuthor, tweetId } from "../embedId";
 import { loadJSONP, uniqueGlobalName } from "../../core/Load";
 
 /*	Media.Twitter
@@ -20,13 +21,14 @@ export default class Twitter extends Media {
         // Create Dom element
         this._el.content_item = Dom.create("div", "vco-media-twitter", this._el.content);
 
-        // Get Media ID
-
-        const r = /(?:twitter\.com|x\.com)\/(.+?)\/status\/(\d+)/;
-        const match = r.exec(this._url());
-        if (match) {
-            this.user_id = match[1];
-            this.media_id = match[2];
+        // Get Media ID — routed here by MediaType, extracted by the shared
+        // helpers so the accepted shapes cannot diverge again. The id stays
+        // numeric-only, as before: anything else is not a status URL.
+        const media_id = tweetId(this._url());
+        const user_id = tweetAuthor(this._url());
+        if (media_id && user_id && /^\d+$/.test(media_id)) {
+            this.user_id = user_id;
+            this.media_id = media_id;
         } else {
             throw new Error("Invalid Twitter URL");
         }

package/src/media/types/Vimeo.ts

@@ -59,7 +59,7 @@ export default class Vimeo extends Media {
                 "https://player.vimeo.com",
             );
         } catch (err) {
-            console.log(err);
+            console.warn("StoryMapJS: error pausing Vimeo player.", err);
         }
     }
 }

package/src/media/types/YouTube.ts

@@ -94,7 +94,7 @@ export default class YouTube extends Media {
                     this.player.pauseVideo();
                 }
             } catch (err) {
-                console.log(err);
+                console.warn("StoryMapJS: error pausing YouTube player.", err);
             }
         }
     }
@@ -186,7 +186,7 @@ export default class YouTube extends Media {
             try {
                 this.player?.destroy?.();
             } catch (err) {
-                console.log(err);
+                console.warn("StoryMapJS: error destroying YouTube player.", err);
             }
         }
         this.player = null;

package/src/scss/Typography.scss

@@ -5,11 +5,6 @@
 .vco-storymap {
     font-family: $font-main;
 
-    // runtime-themable text colors (issue #177); set inline via the
-    // text_color/text_background_color options
-    --vco-color-text: #{$color-text};
-    --vco-color-text-muted: #{color.adjust($color-dark, $lightness: 40%)};
-
     h1,
     h2,
     h3 {
@@ -56,15 +51,20 @@
         font-size: $base-font-size;
 
         // font-family: $font-secondary;
-        color: var(--vco-color-text-muted);
+        color: var(--vco-color-text-muted, #{color.adjust($color-dark, $lightness: 40%)});
 
         a {
-            color: var(--vco-color-text-muted);
+            color: var(--vco-color-text-muted, #{color.adjust($color-dark, $lightness: 40%)});
             text-decoration: none;
             background-image: linear-gradient(
                 to bottom,
-                rgba(color.adjust($color-dark, $lightness: 40%), 0%) 50%,
-                rgba(color.adjust($color-dark, $lightness: 40%), 60%) 50%
+                rgba(var(--vco-color-text-muted, #{color.adjust($color-dark, $lightness: 40%)}), 0%)
+                    50%,
+                rgba(
+                        var(--vco-color-text-muted, #{color.adjust($color-dark, $lightness: 40%)}),
+                        60%
+                    )
+                    50%
             );
             background-repeat: repeat-x;
             background-size: 2px 2px;
@@ -77,7 +77,7 @@
 
             &:hover,
             &:focus {
-                color: $color-theme;
+                color: var(--vco-color-theme, #{$color-theme});
                 text-decoration: none;
             }
         }
@@ -90,7 +90,7 @@
 
                 &:hover,
                 &:focus {
-                    color: $color-theme;
+                    color: var(--vco-color-theme, #{$color-theme});
                     text-decoration: underline;
                 }
             }
@@ -111,12 +111,12 @@
 
     a {
         text-decoration: none;
-        color: $color-theme;
+        color: var(--vco-color-theme, #{$color-theme});
     }
 
     a:hover {
         text-decoration: underline;
-        color: color.adjust($color-theme, $lightness: -20%);
+        color: var(--vco-color-theme-deep, #{color.adjust($color-theme, $lightness: -20%)});
     }
 
     .vco-caption,
@@ -128,14 +128,14 @@
         line-height: $base-font-size-small;
 
         a {
-            color: $color-dark;
+            color: var(--vco-color-dark, #{$color-dark});
         }
     }
 
     blockquote,
     blockquote p {
         font-family: $font-serif;
-        color: color.adjust($color-dark, $lightness: 60%);
+        color: var(--vco-color-text, #{$color-text});
         text-align: left;
         background: transparent;
         border: 0;

package/src/scss/VCO.StoryMap.scss

@@ -11,6 +11,7 @@
 
 /* Includes
 ================================================== */
+@use "sass:color";
 @use "Variables" as *; // Variables (easy way to make style changes)
 @use "core/Mixins" as *; // Less shortcuts and functions
 @use "core/Reset" as *; // CSS Reset
@@ -22,6 +23,7 @@
 //	Components
 @use "ui/VCO.MenuBar" as *;
 @use "ui/VCO.MenuBar.Button" as *;
+@use "ui/VCO.Layers" as *;
 @use "ui/VCO.Message" as *;
 @use "ui/VCO.Consent" as *;
 @use "slider/VCO.Slide" as *;
@@ -51,11 +53,60 @@
     position: relative;
     user-select: none;
 
+    // Theme palette (dark theme plan): every Variables.scss colour as a
+    // custom property, so a dark theme redeclares values instead of
+    // shipping a second stylesheet. Unused declarations cost nothing, and
+    // use sites keep their Sass value as the fallback, so each partial
+    // migrates independently. Includes the two runtime-themable text
+    // colors (issue #177), set inline via text_color/text_background_color.
+    --vco-color-background: #{$color-background};
+    --vco-color-foreground: #{$color-foreground};
+    --vco-color-dark: #{$color-dark};
+    --vco-color-theme: #{$color-theme};
+    --vco-color-theme-dark: #{$color-theme-dark};
+    --vco-color-text: #{$color-text};
+    --vco-color-text-muted: #{color.adjust($color-dark, $lightness: 40%)};
+    --vco-color-text-background: #{$color-background};
+    --vco-color-header-text: #{$color-header-text};
+    --vco-color-text-inverted: #{$color-text-inverted};
+    --vco-color-header-text-inverted: #{$color-header-text-inverted};
+    --vco-color-ui-background: #{$ui-background-color};
+
+    // Derived tones. Each is computed from the light palette here so the
+    // default render is unchanged; the dark block redefines them from its
+    // own palette. One property per distinct derivation, shared by every
+    // use site with the same arguments.
+    --vco-color-border: #{color.adjust($color-background, $lightness: -10%)};
+    --vco-color-hover: #{color.adjust($color-background, $lightness: -5%)};
+    --vco-color-nav-border: #{color.adjust($color-background, $lightness: -30%)};
+    --vco-color-theme-faint: #{color.adjust($color-theme, $lightness: 90%)};
+    --vco-color-theme-deep: #{color.adjust($color-theme, $lightness: -20%)};
+    --vco-color-theme-bright: #{color.adjust($color-theme, $lightness: 15%)};
+    --vco-color-link: #{color.adjust($color-dark, $lightness: 20%)};
+    --vco-color-ui-fade: #{fadeout($ui-background-color, 10%)};
+    --vco-color-ui-faint: #{fadeout($ui-background-color, 33%)};
+
+    /* Skip link: first tab stop inside the widget, off-screen until
+       focused, so keyboard visitors can jump past the chrome. */
+    .vco-skip-link {
+        position: absolute;
+        top: -999px;
+        left: 8px;
+        z-index: 100;
+        padding: 8px 12px;
+        background-color: var(--vco-color-background, #{$color-background});
+        color: var(--vco-color-text, #{$color-text});
+
+        &:focus-visible {
+            top: 8px;
+        }
+    }
+
     /* fullscreen: fill the screen and sit above everything else */
     &:fullscreen {
         width: 100%;
         height: 100%;
-        background-color: $color-background;
+        background-color: var(--vco-color-background, #{$color-background});
     }
 
     *,
@@ -65,6 +116,52 @@
     }
 }
 
+/* Dark theme (dark theme plan): the same property names redeclared from
+   the dark palette. Values below were carried over from
+   `src/scss/Variables.Dark.scss` (now deleted), except `$color-theme`
+   (`#c34528` is 3.18:1 on `#222`) and `$color-text` (`#808080` is 4.03:1),
+   which are lightened to `#dd735a` (5.06:1) and `#949494` (5.24:1) so
+   every text pair clears AA. Hover tints go brighter in dark mode rather
+   than darker, so they stay visible on dark surfaces.
+   Selected with `data-vco-theme="dark"`, or (when unset) the OS
+   `prefers-color-scheme`; explicit `"light"` pins the light palette. */
+@mixin vco-dark-palette {
+    --vco-color-background: #222;
+    --vco-color-foreground: #ccc;
+    --vco-color-dark: #fff;
+    --vco-color-theme: #dd735a;
+    --vco-color-theme-dark: #c24628;
+    --vco-color-text: #949494;
+    --vco-color-text-muted: #999;
+    --vco-color-text-background: #222;
+    --vco-color-header-text: #fff;
+    --vco-color-text-inverted: #bfbfbf;
+    --vco-color-header-text-inverted: #fff;
+    --vco-color-ui-background: #4d4d4d;
+    --vco-color-border: #080808;
+    --vco-color-hover: #151515;
+    --vco-color-nav-border: #000;
+    --vco-color-theme-faint: #fff;
+
+    // the three link colours share #eaa999 on purpose: in dark mode links,
+    // hovers and deep accents are one tone (5.06:1 on #222)
+    --vco-color-theme-deep: #eaa999;
+    --vco-color-theme-bright: #eaa999;
+    --vco-color-link: #eaa999;
+    --vco-color-ui-fade: #{fadeout(#4d4d4d, 10%)};
+    --vco-color-ui-faint: #{fadeout(#4d4d4d, 33%)};
+}
+
+.vco-storymap[data-vco-theme="dark"] {
+    @include vco-dark-palette;
+}
+
+@media (prefers-color-scheme: dark) {
+    .vco-storymap:not([data-vco-theme="light"]) {
+        @include vco-dark-palette;
+    }
+}
+
 /* Portrait
 ================================================== */
 .vco-layout-portrait {
@@ -89,12 +186,14 @@
             width: 120%;
             overflow: hidden;
 
-            @include gradient-horizontal(
-                rgba(255, 255, 255, 0.0001),
-                rgba(255, 255, 255, 0.85),
-                0%,
-                15%
+            // map-to-panel fade in the panel color so it stays seamless in
+            // both themes (the old white gradient washed dark slides)
+            background-image: linear-gradient(
+                to right,
+                transparent 0%,
+                var(--vco-color-background, #fff) 15%
             );
+            background-repeat: repeat-x;
         }
 
         .vco-slider-container-mask {
@@ -116,7 +215,7 @@
         top: 0;
         left: 0;
         width: 100%;
-        background-color: $color-background;
+        background-color: var(--vco-color-background, #{$color-background});
 
         .vco-slider-background {
             display: none;
@@ -130,7 +229,7 @@
 ================================================== */
 .vco-map-area-left {
     .vco-storyslider {
-        background-color: $color-background;
+        background-color: var(--vco-color-background, #{$color-background});
     }
 
     .vco-slider-background {
@@ -193,3 +292,69 @@
     white-space: nowrap;
     border: 0;
 }
+
+/* Slide panel dock + size (textmode/textsize): right is the long-standing
+   landscape layout; left mirrors it; bottom docks the panel below the map
+   (the component split is computed in StoryMap._updateDisplay). Unset means
+   right at 50/50, so existing stories render unchanged.
+================================================== */
+.vco-layout-landscape {
+    .vco-storyslider {
+        width: var(--vco-panel-size, 50%);
+        left: calc(100% - var(--vco-panel-size, 50%));
+    }
+
+    &.vco-textmode-left {
+        .vco-storyslider {
+            left: 0;
+
+            .vco-slider-background {
+                margin-left: 0;
+                width: 120%;
+                background-image: linear-gradient(
+                    to left,
+                    transparent 0%,
+                    var(--vco-color-background, #fff) 15%
+                );
+                background-repeat: repeat-x;
+            }
+        }
+    }
+
+    &.vco-textmode-bottom {
+        .vco-storyslider {
+            left: 0;
+            width: 100%;
+
+            .vco-slider-background {
+                margin-left: 0;
+                width: 100%;
+                background-image: linear-gradient(
+                    to top,
+                    transparent 0%,
+                    var(--vco-color-background, #fff) 15%
+                );
+                background-repeat: repeat-x;
+            }
+        }
+    }
+}
+
+/* Headline visibility (show_headings: false hides slide headlines) */
+.vco-no-headings {
+    .vco-headline {
+        display: none;
+    }
+}
+
+/* Scrollbar visibility (show_scrollbars: false hides the panel scrollbars;
+   content still scrolls) */
+.vco-no-scrollbars {
+    .vco-slide {
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+}

package/src/scss/core/Reset.scss

@@ -1,16 +1,13 @@
 /*	Reset
 ------------------------------------------------------------------------------------------- */
+@use "../Variables" as *;
 
-.vco-storyjs {
+.vco-storymap {
     /*	Reset tags and common classes
 		Display in IE6-9 and FF3
 		Based on: http://github.com/necolas/normalize.css
 	------------------------------------------------------------------------------------------- */
 
-    div * {
-        box-sizing: content-box;
-    }
-
     h1,
     h2,
     h3,
@@ -91,7 +88,6 @@
         font-weight: normal;
         font-style: normal;
         font-size: 100%;
-        line-height: 1;
         font-family: inherit;
         width: auto;
         float: none;
@@ -111,11 +107,6 @@
         border-spacing: 0;
     }
 
-    ol,
-    ul {
-        list-style: none;
-    }
-
     q::before,
     q::after,
     blockquote::before,
@@ -123,13 +114,9 @@
         content: "";
     }
 
-    a:focus {
-        outline: thin dotted;
-    }
-
-    a:hover,
-    a:active {
-        outline: 0;
+    a:focus-visible {
+        outline: 2px solid var(--vco-color-dark, #{$color-dark});
+        outline-offset: 2px;
     }
 
     article,

package/src/scss/map/VCO.Map.scss

@@ -6,7 +6,7 @@
     height: 100%;
     overflow: hidden;
     top: 0;
-    background-color: $color-foreground;
+    background-color: var(--vco-color-foreground, #{$color-foreground});
 
     .vco-map-mask {
         width: 100%;

package/src/scss/map/VCO.MapMarker.scss

@@ -46,7 +46,18 @@ $map-icon-width: 38px;
     }
 
     .vco-mapmarker-active {
-        color: $color-theme;
+        color: var(--vco-color-theme, #{$color-theme});
+    }
+
+    // pins are keyboard-focusable (tabindex + role=button): every marker
+    // shape gets the same visible ring
+    .vco-mapmarker:focus-visible,
+    .vco-mapmarker-active:focus-visible,
+    .vco-mapmarker-custom:focus-visible,
+    .vco-mapmarker-image-icon:focus-visible,
+    .vco-mapmarker-image-icon-active:focus-visible {
+        outline: 2px solid var(--vco-color-dark, #{$color-dark});
+        outline-offset: 2px;
     }
 
     // Custom icon markers render only their image (no vco-mapmarker class,
@@ -72,7 +83,7 @@ $map-icon-width: 38px;
     }
 
     .vco-mapmarker-image-icon-active {
-        border: 4px solid $color-theme;
+        border: 4px solid var(--vco-color-theme, #{$color-theme});
         filter: grayscale(0);
     }
 
@@ -89,9 +100,9 @@ $map-icon-width: 38px;
         font-family: $font-sanserif;
         font-size: 12px;
         font-weight: bold;
-        color: $color-text;
-        background-color: $color-background;
-        border: 1px solid $color-theme;
+        color: var(--vco-color-text, #{$color-text});
+        background-color: var(--vco-color-background, #{$color-background});
+        border: 1px solid var(--vco-color-theme, #{$color-theme});
         border-radius: 4px;
         box-shadow: 2px 2px 2px rgb(0 0 0 / 30%);
         pointer-events: none;
@@ -145,7 +156,7 @@ $map-icon-width: 38px;
     }
 }
 
-/*  Marker popup and audio badge (docs/plans/iiif-media-tours.md §2)
+/*  Marker popup and audio badge
 ================================================== */
 // A card anchored to the marker element: it is a DOM child, so it travels
 // with the pin and needs no positioning maths. 44px tap targets and a
@@ -163,7 +174,7 @@ $map-icon-width: 38px;
     gap: 8px;
     align-items: flex-start;
     width: max-content;
-    max-width: 260px;
+    max-width: min(260px, calc(100vw - 32px));
     padding: 10px 12px;
     border: 1px solid rgb(0 0 0 / 20%);
     border-radius: 4px;
@@ -178,8 +189,8 @@ $map-icon-width: 38px;
 
     .vco-marker-popup-close {
         flex: 0 0 auto;
-        min-width: 28px;
-        min-height: 28px;
+        min-width: 44px;
+        min-height: 44px;
         margin: -4px -4px 0 0;
         padding: 0;
         border: 0;

package/src/scss/map/openlayers/VCO.Map.OpenLayers.scss

@@ -33,13 +33,13 @@
         position: absolute;
         bottom: 0;
         right: 0;
-        background-color: rgb(255 255 255 / 75%);
+        background-color: rgb(255 255 255 / 90%);
         font-size: 10px;
         padding: 1px 4px;
         z-index: 1000;
 
         a {
-            color: #666;
+            color: #333;
             text-decoration: none;
         }
 
@@ -64,14 +64,17 @@
             }
 
             span {
-                color: $color-theme;
+                color: var(--vco-color-theme, #{$color-theme});
                 display: inline-block;
                 transform: rotate(45deg);
             }
 
             &:hover {
                 text-decoration: none;
-                color: color.adjust($color-theme, $lightness: 15%);
+                color: var(
+                    --vco-color-theme-bright,
+                    #{color.adjust($color-theme, $lightness: 15%)}
+                );
             }
         }
     }