@projektemacher/storymapjs 0.10.7 → 0.10.8

package/src/scss/media/types/VCO.Media.Text.scss

@@ -56,6 +56,14 @@
             // font-weight:normal;
         }
     }
+
+    // Inline images embedded in slide text HTML (e.g. sketches, maps):
+    // constrain to the text column, keep aspect ratio with explicit
+    // width/height attributes
+    img {
+        max-width: 100%;
+        height: auto;
+    }
 }
 
 // When the background is an image

package/src/scss/media/types/VCO.Media.Wikipedia.scss

@@ -44,7 +44,8 @@
             padding: 20px;
 
             @include background-color-opacity(0, 0, 0, 60);
-            @include border-radius(7px);
+
+            border-radius: 7px;
 
             h4 a {
                 @include slide-text-shadow;

package/src/scss/slider/VCO.Slide.scss

@@ -61,8 +61,7 @@
         z-index: -1;
         overflow: hidden;
         display: none;
-
-        @include opacity(50);
+        opacity: 0.5;
     }
 
     .vco-slide-scrollable-container {
@@ -348,6 +347,16 @@
     text-align: right;
 }
 
+/* Extra iframe media in slide text (issue #358)
+================================================== */
+.vco-text-content {
+    iframe {
+        width: 100%;
+        min-height: 280px;
+        border: 0;
+    }
+}
+
 /* Text Background 
 ================================================== */
 .vco-slide.vco-text-background {
@@ -356,7 +365,8 @@
             padding: 20px;
 
             @include background-color-opacity(0, 0, 0, 60);
-            @include border-radius(7px);
+
+            border-radius: 7px;
 
             h2 {
                 margin-top: 5px;

package/src/scss/slider/VCO.SlideNav.scss

@@ -29,8 +29,7 @@
         word-break: break-all;
         overflow-wrap: anywhere;
         hyphens: auto;
-
-        @include opacity(15);
+        opacity: 0.15;
     }
 
     .vco-slidenav-title {
@@ -93,7 +92,7 @@
     &:hover {
         .vco-slidenav-title,
         .vco-slidenav-description {
-            @include opacity(100);
+            opacity: 1;
         }
     }
 }
@@ -149,8 +148,7 @@
         &:hover {
             .vco-slidenav-icon {
                 margin-left: 32 - 20px;
-
-                @include opacity(100);
+                opacity: 1;
             }
         }
     }
@@ -159,8 +157,7 @@
         &:hover {
             .vco-slidenav-icon {
                 margin-left: -4px;
-
-                @include opacity(100);
+                opacity: 1;
             }
         }
     }
@@ -194,7 +191,7 @@
         }
 
         .vco-slidenav-icon {
-            @include opacity(33);
+            opacity: 0.33;
         }
     }
 }
@@ -208,16 +205,14 @@
 
             .vco-slidenav-icon {
                 margin-left: 32 - 24px;
-
-                @include opacity(100);
+                opacity: 1;
             }
         }
 
         &:active {
             .vco-slidenav-icon {
                 margin-left: 0;
-
-                @include opacity(100);
+                opacity: 1;
             }
         }
     }
@@ -227,14 +222,13 @@
             .vco-slidenav-icon {
                 // margin-left: 0px;
                 margin-left: 100 - 20px;
-
-                @include opacity(100);
+                opacity: 1;
             }
         }
 
         &:active {
             .vco-slidenav-icon {
-                @include opacity(100);
+                opacity: 1;
             }
         }
     }
@@ -247,13 +241,13 @@
     .vco-slidenav-previous {
         &:hover {
             .vco-slidenav-icon {
-                @include opacity(33);
+                opacity: 0.33;
             }
         }
 
         &:active {
             .vco-slidenav-icon {
-                @include opacity(100);
+                opacity: 1;
             }
         }
     }

package/src/scss/slider/VCO.StorySlider.scss

@@ -10,8 +10,10 @@
     height: 100%;
     overflow: hidden;
 
-    @include user-select(none);
-
+    // horizontal drags belong to the slider; vertical panning passes
+    // through to the page (mobile navigation, #288)
+    touch-action: pan-y;
+    user-select: none;
     position: relative;
 
     img,

package/src/scss/ui/VCO.Consent.scss

@@ -75,3 +75,47 @@
     font-size: $base-font-size;
     text-align: center;
 }
+
+/* Start-of-story consent: allow all / individually / decline all
+================================================= */
+.vco-consent-start {
+    .vco-consent-services {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        max-width: 420px;
+        width: 100%;
+        margin-top: 6px;
+    }
+
+    .vco-consent-service {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        padding: 4px 0;
+        border-bottom: 1px solid rgb(0 0 0 / 10%);
+
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+    .vco-consent-service-label {
+        color: $color-dark;
+        text-align: left;
+    }
+
+    .vco-consent-buttons {
+        margin-top: 0;
+
+        button:disabled {
+            opacity: 0.5;
+            cursor: default;
+        }
+    }
+
+    .vco-consent-start-actions {
+        margin-top: 12px;
+    }
+}

package/src/scss/ui/VCO.MenuBar.Button.scss

@@ -31,6 +31,14 @@
         background: $color-theme;
         color: $color-background;
     }
+
+    // keyboard focus parity with the hover state
+    &:focus-visible {
+        background: $color-theme;
+        color: $color-background;
+        outline: 2px solid $color-theme;
+        outline-offset: -2px;
+    }
 }
 
 .vco-mobile {

package/src/scss/ui/VCO.Message.scss

@@ -43,9 +43,7 @@
             height: 30px;
             background-color: #666;
             vertical-align: middle;
-
-            @include box-shadow(inset 0 1px 2px rgba(255, 255, 255, 0.1));
-
+            box-shadow: inset 0 1px 2px rgb(255 255 255 / 10%);
             margin-left: auto;
             margin-right: auto;
 
@@ -96,8 +94,7 @@
                 color: #333;
                 padding: 10px;
                 margin-top: 10px;
-
-                @include border-radius(7px);
+                border-radius: 7px;
             }
         }
     }

package/src/site/site.ts

@@ -18,7 +18,8 @@ const EXAMPLES: ExampleEntry[] = [
     { id: "katrina", title: "Hurricane Katrina", kind: "Map" },
     { id: "population", title: "US Population Shifts", kind: "Map" },
     { id: "marktwain", title: "Mark Twain's Travels", kind: "Map" },
-    { id: "seurat", title: "A Sunday on La Grande Jatte", kind: "Gigapixel" },
+    // a legacy Zoomify pyramid, not IIIF — labelled accordingly
+    { id: "seurat", title: "A Sunday on La Grande Jatte", kind: "Large image (legacy)" },
     { id: "iiif-wellcome", title: "Wellcome Collection (IIIF)", kind: "IIIF" },
     { id: "president", title: "A Month in the Life of President Obama", kind: "Map" },
     // remote showcase examples, rendered by the embed player

package/src/slider/Slide.ts

@@ -4,6 +4,7 @@ import { DomEvent } from "../dom/DomEvent";
 import Dom from "../dom/Dom";
 import { easeInSpline } from "../animation/easings";
 import MediaType from "../media/MediaType";
+import { sanitizeSlideText } from "../media/EmbedUtil";
 import Text from "../media/types/Text";
 import { Browser } from "../core/Browser";
 import { MediaTypeMatch, StorymapSlide, StorymapSlideBackground } from "../types";
@@ -27,6 +28,19 @@ interface SlideOptions {
     [key: string]: unknown;
 }
 
+/**
+ * The slide's element cache. `call_to_action` is null until the slide is told
+ * to show one (`addCallToAction`).
+ */
+type SlideElements = {
+    container: HTMLElement;
+    scroll_container: HTMLElement;
+    background: HTMLElement;
+    content_container: HTMLElement;
+    content: HTMLElement;
+    call_to_action: HTMLElement | null;
+};
+
 /*	Media instance surface as used by Slide; instances are created
 	dynamically via the matched MediaTypeMatch.cls constructor. Media is
 	Evented — "media_loaded" signals that content heights may have changed. */
@@ -35,8 +49,10 @@ interface MediaInstance {
     loadMedia: () => void;
     stopMedia: () => void;
     updateDisplay: (w?: number, h?: number, l?: string) => void;
+    dispose?: () => void;
     on?: EventedInstance["on"];
-    _state?: { loaded?: boolean };
+    off?: EventedInstance["off"];
+    _state?: { loaded?: boolean; eager?: boolean };
 }
 
 interface SlideHas {
@@ -52,13 +68,17 @@ interface SlideHas {
 }
 
 class SlideBase {
-    declare "_el": Record<string, HTMLElement>;
+    /** `call_to_action` is only created when the slide shows one. */
+    declare "_el": SlideElements;
     declare "_media": MediaInstance | null;
     declare "_mediaclass": unknown;
     declare "_text": Text;
     declare "_state": { loaded: boolean };
     declare "_scroll_hint": HTMLElement | null;
     declare "_scroll_hint_dismissed": boolean;
+    declare "_onSlideScrollBound": EventListener;
+    /** Every `media_ended` handler registered via `onMediaEnded`, kept so `dispose()` can remove them. */
+    declare "_media_ended_fns": (() => void)[];
     declare "has": SlideHas;
     declare "title": string;
     declare "data": StorymapSlide;
@@ -107,7 +127,7 @@ class SlideBase {
             },
         };
 
-        this.has.title = title_slide;
+        this.has.title = title_slide === true;
 
         this.title = "";
 
@@ -139,7 +159,8 @@ class SlideBase {
         // Animation Object
         this.animator = {};
 
-        // Merge Data and Options
+        this._onSlideScrollBound = null as unknown as EventListener;
+        this._media_ended_fns = [];
         mergeData(this.options, options);
         mergeData(this.data, data);
 
@@ -154,6 +175,37 @@ class SlideBase {
 
     hide() {}
 
+    /**
+     * Release the slide's listeners, media and DOM. Called by
+     * `StorySlider.dispose()`; the slide must not be used afterwards.
+     */
+    dispose() {
+        // the scroll listener was registered against a bound copy, so this
+        // only works because that reference was kept
+        if (this._onSlideScrollBound) {
+            this._el.container?.removeEventListener("scroll", this._onSlideScrollBound);
+            this._onSlideScrollBound = null as unknown as EventListener;
+        }
+        if (this._el.call_to_action) {
+            DomEvent.removeListener(this._el.call_to_action, "click", this._onCallToAction, this);
+        }
+        if (this._scroll_hint) {
+            DomEvent.removeListener(this._scroll_hint, "click", this._onScrollHintClick, this);
+            this._scroll_hint = null;
+        }
+        this._el.container?.getAnimations?.().forEach((a) => a.cancel());
+        // the media_ended handlers registered via onMediaEnded() live on the
+        // media object, which outlives this slide once nulled — remove them
+        // here or a disposed slide's advance closure fires on a later ended
+        for (const fn of this._media_ended_fns) {
+            this._media?.off?.("media_ended", fn);
+        }
+        this._media_ended_fns = [];
+        this._media?.dispose?.();
+        this._media = null;
+        this._el.container?.remove();
+    }
+
     setActive(is_active: boolean) {
         this.active = is_active;
 
@@ -164,7 +216,14 @@ class SlideBase {
             // the hint may re-appear on a revisit if the content still
             // overflows (the dismissed flag resets per activation)
             this._scroll_hint_dismissed = false;
+            // the active slide's images load eagerly: media built after this
+            // point (the 1200ms load timer) honors the flag, already-built
+            // images are upgraded below
+            if (this._media?._state) {
+                this._media._state.eager = true;
+            }
             this.loadMedia();
+            this._eagerLoadImages();
             this._updateScrollHint();
         } else {
             this.stopMedia();
@@ -183,6 +242,17 @@ class SlideBase {
         }
     }
 
+    /*  Perf: preloaded slide images are `lazy`; make them `eager` the
+        moment the slide becomes active so navigation never waits on a
+        deferred fetch (loading starts now, not on intersection). */
+    _eagerLoadImages() {
+        this._el.container
+            .querySelectorAll<HTMLImageElement>("img.vco-media-image")
+            .forEach((img) => {
+                img.loading = "eager";
+            });
+    }
+
     stopMedia() {
         if (this._media && this._state.loaded) {
             try {
@@ -211,6 +281,28 @@ class SlideBase {
         return this.has.background;
     }
 
+    /**
+     * True when this slide's media is a timed, playable one (audio or video).
+     * `autoplay_media` waits for such a slide's media to end instead of using
+     * its timer; everything else keeps the timer.
+     */
+    hasPlayableMedia(): boolean {
+        const kind = this.options.media_type as string | undefined;
+        return kind === "audio" || kind === "video";
+    }
+
+    /**
+     * Call `fn` when this slide's media finishes playing. A slide with no
+     * media — or media that cannot end — never calls it, which is why
+     * `autoplay_media` keeps its timer as a fallback rather than waiting on
+     * an event that may not arrive.
+     */
+    onMediaEnded(fn: () => void): void {
+        if (!this.hasPlayableMedia() || !this._media?.on) return;
+        this._media.on("media_ended", fn);
+        this._media_ended_fns.push(fn);
+    }
+
     scrollToTop() {
         this._el.container.scrollTop = 0;
     }
@@ -235,11 +327,7 @@ class SlideBase {
             return;
         }
         if (!this._scroll_hint) {
-            this._scroll_hint = Dom.create(
-                "div",
-                "vco-slide-scroll-hint",
-                el,
-            );
+            this._scroll_hint = Dom.create("div", "vco-slide-scroll-hint", el);
             this._scroll_hint.innerHTML = "<span class='vco-icon-arrow-down'></span>";
             DomEvent.addListener(this._scroll_hint, "click", this._onScrollHintClick, this);
         }
@@ -276,8 +364,12 @@ class SlideBase {
             "vco-slide-calltoaction",
             this._el.content_container,
         );
-        this._el.call_to_action.innerHTML =
-            "<span class='vco-slide-calltoaction-button-text'>" + str + "</span>";
+        // The text comes from `call_to_action_text` in the storymap JSON, so
+        // it goes through the sanitizer like every other author string
+        // instead of being concatenated into markup.
+        const button_text = Dom.create("span", "vco-slide-calltoaction-button-text");
+        button_text.appendChild(sanitizeSlideText(str));
+        this._el.call_to_action?.appendChild(button_text);
         DomEvent.addListener(this._el.call_to_action, "click", this._onCallToAction, this);
     }
 
@@ -308,8 +400,11 @@ class SlideBase {
         this._el.content = Dom.create("div", "vco-slide-content", this._el.content_container);
         this._el.background = Dom.create("div", "vco-slide-background", this._el.container);
         // first scroll of any kind hides the scroll hint (passive: the
-        // listener never prevents default)
-        this._el.container.addEventListener("scroll", this._onSlideScroll.bind(this), {
+        // listener never prevents default). The reference is kept because
+        // `.bind()` returns a new function each call, so the listener could
+        // otherwise never be removed again.
+        this._onSlideScrollBound = this._onSlideScroll.bind(this);
+        this._el.container.addEventListener("scroll", this._onSlideScrollBound, {
             passive: true,
         });
         // Style Slide Background
@@ -341,46 +436,45 @@ class SlideBase {
         if (this.data.text && this.data.text.text) {
             this.has.text = true;
         }
-        if (this.data.text && this.data.text.headline) {
+        if (this.data.text?.headline) {
             this.has.headline = true;
             this.title = this.data.text.headline;
         }
 
         // Create Media
-        if (this.has.media) {
+        const slide_media = this.data.media;
+        if (this.has.media && slide_media) {
             // Determine the media type
-            this.data.media.mediatype = MediaType(this.data.media) as MediaTypeMatch;
-            this.options.media_name = this.data.media.mediatype.name;
-            this.options.media_type = this.data.media.mediatype.type;
+            slide_media.mediatype = MediaType(slide_media) as MediaTypeMatch;
+            this.options.media_name = slide_media.mediatype.name;
+            this.options.media_type = slide_media.mediatype.type;
 
             // Create a media object using the matched class name
-            this._media = new this.data.media.mediatype.cls(
-                this.data.media,
-                this.options,
-            ) as MediaInstance;
+            this._media = new slide_media.mediatype.cls(slide_media, this.options) as MediaInstance;
             // loaded media changes the content height — the scroll hint
             // may appear or disappear
             this._media.on?.("media_loaded", () => this._updateScrollHint());
         }
 
         // Create Text
-        if (this.has.text || this.has.headline) {
+        if ((this.has.text || this.has.headline) && this.data.text) {
             this._text = new Text(this.data.text, {
                 title: this.has.title,
                 text_align: this.options.text_align as string | undefined,
             });
         }
 
-        // Add to DOM
+        // Add to DOM. Each branch has just established the members it uses
+        // (has.media -> _media, has.text/headline -> _text).
         if (!this.has.text && !this.has.headline && this.has.media) {
             this._el.container.className += " vco-slide-media-only";
-            this._media.addTo(this._el.content);
+            this._media?.addTo(this._el.content);
         } else if (this.has.headline && this.has.media && !this.has.text) {
             this._el.container.className += " vco-slide-media-only";
             this._text.addTo(this._el.content);
-            this._media.addTo(this._el.content);
+            this._media?.addTo(this._el.content);
         } else if (this.has.text && this.has.media) {
-            this._media.addTo(this._el.content);
+            this._media?.addTo(this._el.content);
             this._text.addTo(this._el.content);
         } else if (this.has.text || this.has.headline) {
             this._el.container.className += " vco-slide-text-only";

package/src/slider/SlideNav.ts

@@ -1,9 +1,10 @@
 import { mergeData } from "../core/Util";
 import { DomMixed, Evented, type EventedInstance } from "../core/mixins";
 import Dom from "../dom/Dom";
-import Animate from "morpheus";
+import Animate from "../animation/tween";
 import { DomEvent } from "../dom/DomEvent";
 import { Browser } from "../core/Browser";
+import { sanitizeSlideText } from "../media/EmbedUtil";
 import { AnimateOptions, AnimationHandle } from "../types";
 /*	SlideNav
 	Navigation for Slideshows
@@ -169,18 +170,27 @@ class SlideNavBase {
         // update data
         this.data = mergeData(this.data, d);
 
-        // Title
+        // Title and date are the slide's own headline/date — sanitized like
+        // the slide body. They were the reachable twin of an already-sanitized
+        // field: a hostile headline executed as soon as a nav arrow rendered.
         if (this.data.title !== "") {
-            this._el.title.innerHTML = this.data.title;
+            this._el.title.replaceChildren(sanitizeSlideText(this.data.title));
         }
 
         // Date
-        if (this.data.date !== "") {
-            this._el.description.innerHTML = this.data.description;
+        if (this.data.date) {
+            this._el.description.replaceChildren(sanitizeSlideText(this.data.date));
         }
     }
 
     _initLayout() {
+        // Accessibility (issue #385 wave): the nav container is operable by
+        // keyboard — focusable, announced as a button, Enter/Space activate
+        this._el.container.setAttribute("role", "button");
+        this._el.container.setAttribute("tabindex", "0");
+        const label = this.options.direction === "next" ? "Next slide" : "Previous slide";
+        this._el.container.setAttribute("aria-label", label);
+
         // Create Layout
         this._el.content_container = Dom.create(
             "div",
@@ -188,6 +198,7 @@ class SlideNavBase {
             this._el.container,
         );
         this._el.icon = Dom.create("div", "vco-slidenav-icon", this._el.content_container);
+        this._el.icon.setAttribute("aria-hidden", "true");
         this._el.title = Dom.create("div", "vco-slidenav-title", this._el.content_container);
         this._el.description = Dom.create(
             "div",
@@ -202,6 +213,29 @@ class SlideNavBase {
 
     _initEvents() {
         DomEvent.addListener(this._el.container, "click", this._onMouseClick, this);
+        DomEvent.addListener(this._el.container, "keydown", this._onKeyDown, this);
+    }
+
+    _onKeyDown(e: Event) {
+        const key = (e as KeyboardEvent).key;
+        if (key === "Enter" || key === " " || key === "Spacebar") {
+            e.preventDefault();
+            this._onMouseClick();
+        }
+    }
+
+    /**
+     * Release the listeners and the position animation. Called by
+     * `StorySlider.dispose()`; the nav must not be used afterwards.
+     */
+    dispose() {
+        if (this.animator_position) {
+            this.animator_position.stop();
+            this.animator_position = null;
+        }
+        DomEvent.removeListener(this._el.container, "click", this._onMouseClick, this);
+        DomEvent.removeListener(this._el.container, "keydown", this._onKeyDown, this);
+        this._el.container.remove();
     }
 }