@projektemacher/storymapjs 0.10.8 → 0.11.0

package/src/slider/StorySlider.ts

@@ -55,8 +55,7 @@ interface StorySliderOptions {
 }
 
 /**
- * The slider's element cache. `live_region` only exists when the slide
- * announcements are enabled (the `a11y` option), so it starts out null.
+ * The slider's element cache.
  */
 type StorySliderElements = {
     container: HTMLElement;
@@ -73,6 +72,18 @@ interface SlideBackgroundChange {
     image?: boolean;
 }
 
+export interface StorySliderEvents {
+    colorchange: SlideBackgroundChange;
+    nav_next: Partial<StorymapData>;
+    nav_previous: Partial<StorymapData>;
+    nav_left: Partial<StorymapData>;
+    nav_right: Partial<StorymapData>;
+    slideAdded: Partial<StorymapData>;
+    change: { current_slide: number; uniqueid: string | null | undefined };
+    loaded: Partial<StorymapData>;
+    title: { title: string };
+}
+
 class StorySliderBase {
     declare "_el": StorySliderElements;
     declare "_nav": { previous: SlideNav; next: SlideNav };
@@ -84,13 +95,19 @@ class StorySliderBase {
     declare "_message": Message;
     declare "current_slide": number;
     declare "current_bg_color": string | null;
+    /** Layout the background gradient was built for; a portrait↔landscape
+        switch rebuilds it even when the color is unchanged. */
+    declare "current_bg_layout": string | null;
     declare "data": Partial<StorymapData>;
     declare "options": StorySliderOptions;
     declare "animator": AnimationHandle | null;
     declare "animator_background": AnimationHandle | null;
-    declare "fire": EventedInstance["fire"];
+    declare "fire": EventedInstance<StorySliderEvents>["fire"];
     declare "_loaded": boolean;
-    declare "hasEventListeners": EventedInstance["hasEventListeners"];
+    /** Scroll-spy observer for `mode: "static"`; null in standard mode. */
+    declare "_static_observer": IntersectionObserver | null;
+    /** True while a scroll-spy navigation is settling (suppresses echo scrolls). */
+    declare "_static_spying": boolean;
 
     /*	Private Methods
 	================================================== */
@@ -126,6 +143,7 @@ class StorySliderBase {
 
         // Current Background Color
         this.current_bg_color = null;
+        this.current_bg_layout = null;
 
         // Data Object
         this.data = {};
@@ -165,6 +183,8 @@ class StorySliderBase {
         // Animation Object
         this.animator = null;
         this.animator_background = null;
+        this._static_observer = null;
+        this._static_spying = false;
 
         // Preload scheduling handles, at most one of which is ever live
         this.preloadTimer = undefined;
@@ -250,6 +270,11 @@ class StorySliderBase {
         slide.addTo(this._el.slider_item_container);
         slide.on("added", this._onSlideAdded, this);
         slide.on("background_change", this._onBackgroundChange, this);
+        // a slide added after layout (editor preview, StoryMap.createSlide)
+        // joins the scroll-spy in static mode
+        if (this._isStatic()) {
+            this._initStaticSpy();
+        }
     }
 
     /*	Message
@@ -299,6 +324,8 @@ class StorySliderBase {
      */
     dispose() {
         this._cancelPreload();
+        this._static_observer?.disconnect();
+        this._static_observer = null;
         if (this._swipable) {
             this._swipable.dispose();
         }
@@ -317,7 +344,7 @@ class StorySliderBase {
         this._slides = [];
     }
 
-    goTo(n: number, fast?: boolean, displayupdate?: boolean) {
+    goTo(n: number, fast?: boolean, displayupdate?: boolean, fromScroll = false) {
         this.changeBackground({ color_value: "", image: false });
 
         // Clear Preloader Timer
@@ -344,13 +371,46 @@ class StorySliderBase {
                 this._swipable.stopMomentum();
             }
 
-            if (fast || prefersReducedMotion()) {
+            // Static reading mode: all slides are stacked in a scrollable
+            // list instead of a translating strip. Programmatic navigation
+            // scrolls the slide into view; scroll-spy navigation (fromScroll)
+            // only flips the active state, or scrolling would fight the
+            // visitor's own scroll position.
+            if (this._isStatic()) {
+                if (!fromScroll) {
+                    this._static_spying = true;
+                    this._scrollSlideIntoView(this.current_slide);
+                    // longer than the smooth scroll it triggers: the
+                    // observer must stay deaf until the list settles, or it
+                    // echoes the programmatic scroll back as user input
+                    window.setTimeout(() => {
+                        this._static_spying = false;
+                    }, 600);
+                }
+                // scroll-spy navigation must fire: the map follows the
+                // reading position through the change event (fromScroll only
+                // suppresses the echo scroll above, never the event)
+                this._onSlideChange(fromScroll ? false : displayupdate);
+            } else if (fast || prefersReducedMotion() || this.options.fxmode === "none") {
+                this._el.slider_container.style.opacity = "";
                 this._el.slider_container.style.left = -(this.slide_spacing * n) + "px";
                 this._onSlideChange(displayupdate);
+            } else if (this.options.fxmode === "fade") {
+                // fire the change event at animation start so the map and the
+                // slider animate simultaneously
+                this._onSlideChange(displayupdate);
+                this._el.slider_container.style.left = -(this.slide_spacing * n) + "px";
+                this._el.slider_container.style.opacity = "0";
+                this.animator = Animate(this._el.slider_container, {
+                    opacity: 1,
+                    duration: transition_duration,
+                    easing: this.options.ease,
+                });
             } else {
                 // fire the change event at animation start so the map and the
                 // slider animate simultaneously
                 this._onSlideChange(displayupdate);
+                this._el.slider_container.style.opacity = "";
                 this.animator = Animate(this._el.slider_container, {
                     left: -(this.slide_spacing * n) + "px",
                     duration: transition_duration,
@@ -465,6 +525,11 @@ class StorySliderBase {
     }
 
     showNav(nav_obj: SlideNav, show: boolean) {
+        // `shownav: false` (slideshow shownav) hides the previous/next
+        // chrome; keyboard, swipe and dots navigation still work
+        if (this.options.shownav === false) {
+            show = false;
+        }
         if (this.options.width <= 500 && Browser.mobile) {
             // hidden on small mobile screens
         } else {
@@ -486,26 +551,50 @@ class StorySliderBase {
         const bg_alpha_end = "0.87";
         const _bg_old = this._el.background.getAttribute("style");
 
+        // Dark theme without an explicit slide background: fade from the
+        // themed panel color. White (the light default) would wash the
+        // dark slide; the existing darkness heuristics below (less fade,
+        // inverted nav icons) then behave as they do for dark author
+        // backgrounds.
+        const dark =
+            !bg.color_value &&
+            (this.options.theme === "dark" ||
+                (this.options.theme !== "light" &&
+                    typeof window.matchMedia === "function" &&
+                    window.matchMedia("(prefers-color-scheme: dark)").matches));
         if (bg.color_value) {
             // any CSS color; unparseable values fall back to the default
             bg_color = parseCssColor(bg.color_value) || this.options.default_bg_color;
+        } else if (dark) {
+            bg_color = { r: 34, g: 34, b: 34 };
         } else {
             bg_color = this.options.default_bg_color;
         }
 
-        // Stop animation
-        if (this.animator_background) {
-            this.animator_background.stop();
-        }
-
         const bg_color_rgb = bg_color.r + "," + bg_color.g + "," + bg_color.b;
 
-        if (!this.current_bg_color || this.current_bg_color !== bg_color_rgb) {
+        if (
+            !this.current_bg_color ||
+            this.current_bg_color !== bg_color_rgb ||
+            this.current_bg_layout !== this.options.layout
+        ) {
             this.current_bg_color = bg_color_rgb;
+            this.current_bg_layout = this.options.layout;
             do_animation = true;
         }
 
         if (do_animation) {
+            // Stop the in-flight fade only when replacing it: an early
+            // no-op call (same color, e.g. the empty reset at the top of
+            // goTo before the active slide fires background_change) must not
+            // kill the fade another call just started — stop() commits the
+            // partial opacity inline and the finish handler never runs, so
+            // the gradient below would never be applied and the panel would
+            // keep the opaque stylesheet fallback.
+            if (this.animator_background) {
+                this.animator_background.stop();
+            }
+
             // Figure out CSS
             if (this.options.layout === "landscape") {
                 this._nav.next.setColor(false);
@@ -536,6 +625,8 @@ class StorySliderBase {
             } else {
                 if (bg.color_value) {
                     bg_css += "background-color:" + bg.color_value + ";";
+                } else if (dark) {
+                    bg_css += "background-color:#222;";
                 } else {
                     bg_css += "background-color:#FFF;";
                 }
@@ -552,7 +643,7 @@ class StorySliderBase {
             // FADE OUT IN
             this.animator_background = Animate(this._el.background, {
                 opacity: 0,
-                duration: this.options.duration / 2,
+                duration: prefersReducedMotion() ? 0 : this.options.duration / 2,
                 easing: this.options.ease,
                 complete: () => {
                     this.fadeInBackground(bg_css);
@@ -572,14 +663,85 @@ class StorySliderBase {
 
         this.animator_background = Animate(this._el.background, {
             opacity: 1,
-            duration: this.options.duration / 2,
+            duration: prefersReducedMotion() ? 0 : this.options.duration / 2,
             easing: this.options.ease,
+            complete: () => {
+                // Fold the end state into the inline style so the panel does
+                // not depend on a retained fill-forwards animation to stay
+                // visible: once the fill is dropped (cancel, GC) the element
+                // would snap back to the inline opacity:0 above.
+                this._el.background.style.opacity = "1";
+                this.animator_background?.stop();
+                this.animator_background = null;
+            },
         });
     }
 
     /*	Private Methods
 	================================================== */
 
+    /** True in the stacked reading mode (`mode: "static"`): no strip translation. */
+    _isStatic(): boolean {
+        return (this.options as { mode?: unknown }).mode === "static";
+    }
+
+    /**
+     * Scroll-spy for the static reading mode: the most visible stacked slide
+     * becomes current, so the map follows the reading position. Programmatic
+     * scrolls set `_static_spying` while settling and are ignored, or the
+     * observer would echo them back.
+     */
+    _initStaticSpy(): void {
+        if (typeof IntersectionObserver === "undefined") return;
+        this._static_observer?.disconnect();
+        // the scrolling element is the observer root: the mask scrolls WITH
+        // the content (it is an ancestor chain member, not the scrollport),
+        // so intersections against it would never change
+        const root = this._isStatic() ? this._el.container : this._el.slider_container_mask;
+        this._static_observer = new IntersectionObserver(
+            (entries) => {
+                if (this._static_spying) return;
+                let best = -1;
+                let bestRatio = 0;
+                for (const entry of entries) {
+                    const index = Number((entry.target as HTMLElement).dataset?.slideIndex ?? -1);
+                    if (entry.isIntersecting && entry.intersectionRatio > bestRatio) {
+                        best = index;
+                        bestRatio = entry.intersectionRatio;
+                    }
+                }
+                if (best >= 0 && best !== this.current_slide) {
+                    this.goTo(best, true, false, true);
+                }
+            },
+            { root, threshold: [0, 0.25, 0.5, 0.75, 1] },
+        );
+        for (const child of Array.from(this._el.slider_item_container.children)) {
+            const index = [...this._el.slider_item_container.children].indexOf(child);
+            (child as HTMLElement).dataset.slideIndex = String(index);
+            this._static_observer.observe(child);
+        }
+    }
+
+    /** Scroll a stacked slide into view without moving the host page. */
+    _scrollSlideIntoView(n: number): void {
+        const slide = this._el.slider_item_container.children[n] as HTMLElement | undefined;
+        // the scrollport in static mode is the storyslider element itself
+        const scroller = this._isStatic() ? this._el.container : this._el.slider_container_mask;
+        if (!slide || !scroller || typeof slide.offsetTop !== "number") return;
+        const container = this._el.slider_item_container;
+        const top =
+            (typeof container.offsetTop === "number" ? container.offsetTop : 0) + slide.offsetTop;
+        try {
+            scroller.scrollTo({
+                top,
+                behavior: prefersReducedMotion() ? "auto" : "smooth",
+            });
+        } catch {
+            scroller.scrollTop = top;
+        }
+    }
+
     // Update Display
     _updateDisplay(width?: number, height?: number, animate?: unknown, layout?: string) {
         let _layout;
@@ -617,9 +779,19 @@ class StorySliderBase {
         this._nav.previous.setPosition({ top: nav_pos });
 
         // Position slides
-        for (let i = 0; i < this._slides.length; i++) {
-            this._slides[i].updateDisplay(this.options.width, this.options.height, _layout);
-            this._slides[i].setPosition({ left: this.slide_spacing * i, top: 0 });
+        if (this._isStatic()) {
+            // stacked reading mode: slides flow vertically (see .vco-static),
+            // so no strip positions — but keep the scroll-spy observing the
+            // current set of slides
+            for (let i = 0; i < this._slides.length; i++) {
+                this._slides[i].updateDisplay(this.options.width, this.options.height, _layout);
+            }
+            this._initStaticSpy();
+        } else {
+            for (let i = 0; i < this._slides.length; i++) {
+                this._slides[i].updateDisplay(this.options.width, this.options.height, _layout);
+                this._slides[i].setPosition({ left: this.slide_spacing * i, top: 0 });
+            }
         }
 
         // Go to the current slide
@@ -663,6 +835,10 @@ class StorySliderBase {
 	================================================== */
     _initLayout() {
         this._el.container.className += " vco-storyslider";
+        // Static reading mode: stacked slides with scroll-spy navigation
+        if (this._isStatic()) {
+            this._el.container.classList.add("vco-static");
+        }
 
         // Create Layout
         this._el.slider_container_mask = Dom.create(
@@ -796,13 +972,16 @@ class StorySliderBase {
         this.goTo(this.current_slide);
     }
 
-    _onNavigation(e: { direction: string }) {
-        if (e.direction === "next" || e.direction === "left") {
+    _onNavigation(e: { direction: string | null }) {
+        const direction = e.direction;
+        if (direction === "next" || direction === "left") {
             this.next();
-        } else if (e.direction === "previous" || e.direction === "right") {
+        } else if (direction === "previous" || direction === "right") {
             this.previous();
+        } else {
+            return;
         }
-        this.fire("nav_" + e.direction, this.data);
+        this.fire(`nav_${direction}`, this.data);
     }
 
     _onSlideAdded(e?: unknown) {
@@ -826,7 +1005,9 @@ class StorySliderBase {
     }
 }
 
-export default class StorySlider extends Evented(StorySliderBase) {
+export default class StorySlider extends Evented<StorySliderEvents, typeof StorySliderBase>(
+    StorySliderBase,
+) {
     constructor(...args: ConstructorParameters<typeof StorySliderBase>) {
         super(...args);
     }

package/src/storymap/Consent.ts

@@ -142,10 +142,15 @@ function migrateLegacyKey(key: string): string {
 function consentButton(kind: "allow" | "deny", text: string): HTMLButtonElement {
     const button = Dom.create("button", `vco-consent-${kind}`) as HTMLButtonElement;
     button.setAttribute("type", "button");
+    // Text content provides the accessible name; native <button> is kept
+    // deliberately (no icon-only buttons, so no extra aria-label needed).
     button.textContent = text;
     return button;
 }
 
+/** Counter backing the unique title ids for aria-labelledby (multi-viewer pages). */
+let consentDialogCounter = 0;
+
 /** The title/message pair shared by both dialog shapes. */
 function consentHeader(
     titleText: string,
@@ -153,6 +158,11 @@ function consentHeader(
 ): { title: HTMLElement; message: HTMLElement } {
     const title = Dom.create("p", "vco-consent-title");
     title.textContent = titleText;
+    // Focus target on open: programmatically focusable, unique per dialog
+    // instance so aria-labelledby never collides across viewers.
+    title.setAttribute("tabindex", "-1");
+    consentDialogCounter += 1;
+    title.id = `vco-consent-title-${consentDialogCounter}`;
     const message = Dom.create("p", "vco-consent-message");
     message.textContent = messageText;
     return { title: title, message: message };
@@ -322,6 +332,11 @@ export class ConsentManager {
             messages.consent_start_title ?? "External content",
             messages.consent_start_message ?? "",
         );
+        // Non-modal library widget: exposed as a dialog without trapping
+        // focus or closing on Escape (no auto-decision for the visitor).
+        el.setAttribute("role", "dialog");
+        el.setAttribute("aria-modal", "false");
+        el.setAttribute("aria-labelledby", title.id);
 
         const list = Dom.create("div", "vco-consent-services");
         const toggles: Array<{ key: string; allow: HTMLButtonElement; deny: HTMLButtonElement }> =
@@ -377,6 +392,7 @@ export class ConsentManager {
         el.append(title, message, list, actions);
         container.append(el);
         this.startDialogs.add(el);
+        title.focus();
     }
 
     /**
@@ -400,6 +416,8 @@ export class ConsentManager {
         return new Promise((resolve) => {
             const messages = Language.messages;
             const el = Dom.create("div", "vco-consent");
+            // Non-modal library widget: exposed as a dialog without trapping
+            // focus or closing on Escape (no auto-decision for the visitor).
 
             const template = messages.consent_message ?? "Load content from {service}?";
             const { title, message } = consentHeader(
@@ -409,6 +427,9 @@ export class ConsentManager {
                 messages.consent_start_title ?? "External content",
                 template.replace("{service}", service.label) + (host ? ` (${host})` : ""),
             );
+            el.setAttribute("role", "dialog");
+            el.setAttribute("aria-modal", "false");
+            el.setAttribute("aria-labelledby", title.id);
 
             const buttons = Dom.create("div", "vco-consent-buttons");
             const allow = consentButton("allow", messages.consent_allow ?? "Allow");
@@ -425,6 +446,7 @@ export class ConsentManager {
             buttons.append(allow, deny);
             el.append(title, message, buttons);
             container.append(el);
+            title.focus();
         });
     }