@projektemacher/storymapjs 0.10.7 → 0.10.8

package/src/ui/MenuBar.ts

@@ -5,7 +5,7 @@ import { easeInOutQuint } from "../animation/easings";
 
 import { DomEvent } from "../dom/DomEvent";
 import { Browser } from "../core/Browser";
-import { Language } from "../language/Language";
+import { Language, currentLocale } from "../language/Language";
 
 /*	MenuBar
 	Buttons, progress and distance display for the storymap
@@ -53,7 +53,11 @@ class MenuBarBase {
         if (typeof elem === "object") {
             this._el.container = elem;
         } else {
-            this._el.container = Dom.get(elem);
+            const found = Dom.get(elem);
+            if (!found) {
+                throw new Error("StoryMapJS: no element with id " + elem);
+            }
+            this._el.container = found;
         }
 
         if (parent_elem) {
@@ -116,6 +120,40 @@ class MenuBarBase {
         }
     }
 
+    /**
+     * Repaint the overview button label. An image map has no interactive
+     * overview, so it gets the shorter wording.
+     */
+    _renderOverviewLabel(): void {
+        this._el.button_overview.innerHTML = this.options.map_as_image
+            ? Language.buttons.overview
+            : Language.buttons.map_overview;
+    }
+
+    /**
+     * Repaint the "back to start" button label. Icon-only on mobile.
+     */
+    _renderBackToStartLabel(): void {
+        this._el.button_backtostart.innerHTML = Browser.mobile
+            ? "<span class='vco-icon-goback'></span>"
+            : Language.buttons.backtostart + " <span class='vco-icon-goback'></span>";
+    }
+
+    /**
+     * Repaint the collapse/expand toggle. Icon-only on mobile.
+     */
+    _renderCollapseLabel(collapsed: boolean): void {
+        const arrow = collapsed ? "arrow-down" : "arrow-up";
+        if (Browser.mobile) {
+            this._el.button_collapse_toggle.innerHTML = `<span class='vco-icon-${arrow}'></span>`;
+        } else {
+            const text = collapsed
+                ? Language.buttons.uncollapse_toggle
+                : Language.buttons.collapse_toggle;
+            this._el.button_collapse_toggle.innerHTML = `${text} <span class='vco-icon-${arrow}'></span>`;
+        }
+    }
+
     /**
      * Repaint every text label from the active language (see `setLanguage`).
      * Icon-only mobile buttons carry no text and are left untouched.
@@ -124,21 +162,10 @@ class MenuBarBase {
         if (Browser.mobile) {
             return;
         }
-        if (this.options.map_as_image) {
-            this._el.button_overview.innerHTML = Language.buttons.overview;
-        } else {
-            this._el.button_overview.innerHTML = Language.buttons.map_overview;
-        }
-        this._el.button_backtostart.innerHTML =
-            Language.buttons.backtostart + " <span class='vco-icon-goback'></span>";
+        this._renderOverviewLabel();
+        this._renderBackToStartLabel();
         this.setFullscreenState(this._fullscreenActive);
-        if (this.collapsed) {
-            this._el.button_collapse_toggle.innerHTML =
-                Language.buttons.uncollapse_toggle + "<span class='vco-icon-arrow-down'></span>";
-        } else {
-            this._el.button_collapse_toggle.innerHTML =
-                Language.buttons.collapse_toggle + "<span class='vco-icon-arrow-up'></span>";
-        }
+        this._renderCollapseLabel(this.collapsed);
     }
 
     /**
@@ -171,7 +198,7 @@ class MenuBarBase {
         }
         this._el.distance.style.display = "";
         const miles = kilometers * 0.621371;
-        const locale = typeof Language.lang === "string" && Language.lang ? Language.lang : "en";
+        const locale = currentLocale();
         this._el.distance.textContent =
             kilometers >= 10
                 ? `${Math.round(kilometers).toLocaleString(locale)} km · ${Math.round(miles).toLocaleString("en-US")} mi`
@@ -203,28 +230,23 @@ class MenuBarBase {
         if (this.collapsed) {
             this.collapsed = false;
             this.show();
-            this._el.button_overview.style.display = "inline";
-            this.fire("collapse", { y: this.options.menubar_default_y });
-            if (Browser.mobile) {
-                this._el.button_collapse_toggle.innerHTML =
-                    "<span class='vco-icon-arrow-up'></span>";
-            } else {
-                this._el.button_collapse_toggle.innerHTML =
-                    Language.buttons.collapse_toggle + "<span class='vco-icon-arrow-up'></span>";
-            }
+            // Restore from the option, not unconditionally: a story with
+            // show_overview false (including every mapless story, which the
+            // viewer forces off) would otherwise resurrect a dead overview
+            // button on every un-collapse.
+            this._el.button_overview.style.display =
+                this.options.show_overview === false ? "none" : "inline";
+            // `collapsed` is the authoritative signal: `y` is the menubar
+            // position, and reading it back as a map height made the
+            // un-collapse pass shrink the map to the menubar's pixel height.
+            this.fire("collapse", { y: this.options.menubar_default_y, collapsed: false });
+            this._renderCollapseLabel(false);
         } else {
             this.collapsed = true;
             this.hide(25);
             this._el.button_overview.style.display = "none";
-            this.fire("collapse", { y: 1 });
-            if (Browser.mobile) {
-                this._el.button_collapse_toggle.innerHTML =
-                    "<span class='vco-icon-arrow-down'></span>";
-            } else {
-                this._el.button_collapse_toggle.innerHTML =
-                    Language.buttons.uncollapse_toggle +
-                    "<span class='vco-icon-arrow-down'></span>";
-            }
+            this.fire("collapse", { y: 1, collapsed: true });
+            this._renderCollapseLabel(true);
         }
     }
 
@@ -233,31 +255,40 @@ class MenuBarBase {
     _initLayout() {
         // Create Layout
 
-        // Buttons
-        this._el.button_overview = Dom.create("span", "vco-menubar-button", this._el.container);
+        // Buttons — real <button> elements for keyboard/AT operability
+        // (issue #385 wave); class styling carries the look
+        this._el.button_overview = Dom.create("button", "vco-menubar-button", this._el.container);
+        this._el.button_overview.setAttribute("type", "button");
         DomEvent.addListener(this._el.button_overview, "click", this._onButtonOverview, this);
         if (this.options.show_overview === false) {
             this._el.button_overview.style.display = "none";
         }
 
-        this._el.button_backtostart = Dom.create("span", "vco-menubar-button", this._el.container);
+        this._el.button_backtostart = Dom.create(
+            "button",
+            "vco-menubar-button",
+            this._el.container,
+        );
+        this._el.button_backtostart.setAttribute("type", "button");
         DomEvent.addListener(this._el.button_backtostart, "click", this._onButtonBackToStart, this);
         if (this.options.show_back_to_start === false) {
             this._el.button_backtostart.style.display = "none";
         }
 
         // Fullscreen toggle (hidden via CSS/display when disabled by options)
-        this._el.button_fullscreen = Dom.create("span", "vco-menubar-button", this._el.container);
+        this._el.button_fullscreen = Dom.create("button", "vco-menubar-button", this._el.container);
+        this._el.button_fullscreen.setAttribute("type", "button");
         DomEvent.addListener(this._el.button_fullscreen, "click", this._onButtonFullscreen, this);
         if (this.options.fullscreen === false) {
             this._el.button_fullscreen.style.display = "none";
         }
 
         this._el.button_collapse_toggle = Dom.create(
-            "span",
+            "button",
             "vco-menubar-button",
             this._el.container,
         );
+        this._el.button_collapse_toggle.setAttribute("type", "button");
         DomEvent.addListener(
             this._el.button_collapse_toggle,
             "click",
@@ -292,15 +323,16 @@ class MenuBarBase {
             this._el.button_fullscreen.innerHTML = "<span class='vco-icon-resize-full'></span>";
             this._el.container.setAttribute("ontouchstart", " ");
         } else {
-            this._el.button_backtostart.innerHTML =
-                Language.buttons.backtostart + " <span class='vco-icon-goback'></span>";
-            this._el.button_collapse_toggle.innerHTML =
-                Language.buttons.collapse_toggle + "<span class='vco-icon-arrow-up'></span>";
+            this._renderBackToStartLabel();
+            this._renderCollapseLabel(this.collapsed);
             this._el.button_fullscreen.innerHTML =
                 Language.buttons.fullscreen + " <span class='vco-icon-resize-full'></span>";
         }
 
-        if (this.options.layout === "landscape") {
+        if (this.options.layout === "landscape" || this.options.map_type === "none") {
+            // Landscape has no map split to collapse; a mapless story has no
+            // map at all, so the toggle would flip its label while nothing
+            // on screen changes.
             this._el.button_collapse_toggle.style.display = "none";
         }
     }
@@ -314,6 +346,27 @@ class MenuBarBase {
             this.options.height = height;
         }
     }
+
+    /**
+     * Release the button listeners, the progress animation and the element.
+     * Called by `StoryMap.dispose()`; the menubar must not be used afterwards.
+     */
+    dispose(): void {
+        const buttons: [string, EventListener][] = [
+            ["button_overview", this._onButtonOverview as EventListener],
+            ["button_backtostart", this._onButtonBackToStart as EventListener],
+            ["button_fullscreen", this._onButtonFullscreen as EventListener],
+            ["button_collapse_toggle", this._onButtonCollapseMap as EventListener],
+        ];
+        for (const [key, handler] of buttons) {
+            const el = this._el[key];
+            if (el) {
+                DomEvent.removeListener(el, "click", handler, this);
+            }
+        }
+        this._el.container?.getAnimations?.().forEach((a) => a.cancel());
+        this._el.container?.remove();
+    }
 }
 
 export default class MenuBar extends DomMixed(Evented(MenuBarBase)) {

package/src/ui/Message.ts

@@ -109,6 +109,15 @@ class MessageBase {
     _initEvents() {
         DomEvent.addListener(this._el.container, "click", this._onMouseClick, this);
     }
+
+    /**
+     * Release the click listener and drop the element. Called by
+     * `StorySlider.dispose()`; the message must not be used afterwards.
+     */
+    dispose() {
+        DomEvent.removeListener(this._el.container, "click", this._onMouseClick, this);
+        this._el.container.remove();
+    }
 }
 
 export default class Message extends DomMixed(Evented(MessageBase)) {

package/src/ui/Swipable.ts

@@ -1,4 +1,4 @@
-import Animate from "morpheus";
+import Animate from "../animation/tween";
 import { easeInOutQuint, easeOutStrong } from "../animation/easings";
 import { Browser } from "../core/Browser";
 import { Evented, type EventedInstance } from "../core/mixins";
@@ -7,13 +7,28 @@ import { DomEvent, type LegacyEvent } from "../dom/DomEvent";
 import type { AnimateOptions, AnimationHandle } from "../types";
 
 /*    Swipable
-    Draggable allows you to add dragging capabilities to any element. Supports mobile devices too.
-    TODO Enable constraints
+    Adds drag/swipe capabilities to an element, with momentum on release.
 ================================================== */
 
+/**
+ * Clamp `value` into `[min, max]`. Either bound may be `false` (unset) or a
+ * number; `0` is a real bound, so this tests for a number rather than
+ * truthiness.
+ */
+function clampAxis(value: number, min: number | boolean, max: number | boolean): number {
+    if (typeof max === "number" && value > max) {
+        return max;
+    }
+    if (typeof min === "number" && value < min) {
+        return min;
+    }
+    return value;
+}
+
 interface DragEventNames {
     down: string;
     up: string;
+    cancel?: string;
     leave: string;
     move: string;
 }
@@ -70,6 +85,7 @@ class SwipableBase {
         this.touchdrag = {
             down: "touchstart",
             up: "touchend",
+            cancel: "touchcancel",
             leave: "mouseleave",
             move: "touchmove",
         };
@@ -148,7 +164,16 @@ class SwipableBase {
     enable(e?: LegacyEvent): void {
         DomEvent.addListener(this._el.drag, this.dragevent.down, this._onDragStart, this);
         DomEvent.addListener(this._el.drag, this.dragevent.up, this._onDragEnd, this);
-        this.data.pos.start = 0 as unknown as { x: number; y: number }; //VCO.Dom.getPosition(this._el.move);
+        // iOS fires touchcancel when the browser claims the gesture (page
+        // scroll): without it, touchend never runs and the move/leave
+        // listeners registered in _onDragStart leak on every cancelled touch
+        if (this.dragevent === this.touchdrag && this.touchdrag.cancel) {
+            DomEvent.addListener(this._el.drag, this.touchdrag.cancel, this._onDragEnd, this);
+        }
+        // reset the dragged element to its origin. `pos.start` used to be
+        // assigned the *number* 0 and then read as `pos.start.x`, which is
+        // undefined — so this wrote `left: "undefinedpx"`.
+        this.data.pos.start = { x: 0, y: 0 };
         this._el.move.style.left = this.data.pos.start.x + "px";
         this._el.move.style.top = this.data.pos.start.y + "px";
         this._el.move.style.position = "absolute";
@@ -159,6 +184,21 @@ class SwipableBase {
     disable() {
         DomEvent.removeListener(this._el.drag, this.dragevent.down, this._onDragStart, this);
         DomEvent.removeListener(this._el.drag, this.dragevent.up, this._onDragEnd, this);
+        if (this.dragevent === this.touchdrag && this.touchdrag.cancel) {
+            DomEvent.removeListener(this._el.drag, this.touchdrag.cancel, this._onDragEnd, this);
+        }
+    }
+
+    /**
+     * Full teardown for `dispose()`: `disable()` only covers the listeners
+     * `enable()` adds, but a gesture in flight also holds the `move`/`leave`
+     * pair plus the momentum animation.
+     */
+    dispose() {
+        this.stopMomentum();
+        this.disable();
+        DomEvent.removeListener(this._el.drag, this.dragevent.move, this._onDragMove, this);
+        DomEvent.removeListener(this._el.drag, this.dragevent.leave, this._onDragEnd, this);
     }
 
     stopMomentum() {
@@ -175,21 +215,29 @@ class SwipableBase {
     /*    Private Methods
     ================================================== */
     _onDragStart(e: LegacyEvent) {
+        // an in-flight momentum animation must not fight the new gesture
         if (this.animator) {
             this.animator.stop();
         }
+        // guard against duplicate move/leave listeners when a previous
+        // gesture never ended (e.g. a touchcancel before the fix) — an
+        // in-flight gesture is restarted from the new touch position
+        if (this.data.sliding) {
+            this._detachGestureListeners();
+        }
         if (Browser.touch) {
-            if (e.originalEvent) {
-                this.data.pagex.start = e.originalEvent.touches[0].screenX;
-                this.data.pagey.start = e.originalEvent.touches[0].screenY;
-            } else {
-                this.data.pagex.start = e.targetTouches[0].screenX;
-                this.data.pagey.start = e.targetTouches[0].screenY;
-            }
+            const touch = e.originalEvent
+                ? e.originalEvent.touches[0]
+                : e.targetTouches
+                  ? e.targetTouches[0]
+                  : null;
+            this.data.pagex.start = touch ? touch.clientX : (e.pageX ?? 0);
+            this.data.pagey.start = touch ? touch.clientY : (e.pageY ?? 0);
         } else {
-            this.data.pagex.start = e.pageX;
-            this.data.pagey.start = e.pageY;
+            this.data.pagex.start = e.pageX ?? 0;
+            this.data.pagey.start = e.pageY ?? 0;
         }
+        this.data.sliding = true;
         // Center element to finger or mouse
         if (this.options.enable.x) {
             //this._el.move.style.left = this.data.pagex.start - (this._el.move.offsetWidth / 2) + "px";
@@ -200,18 +248,44 @@ class SwipableBase {
         this.data.pos.start = { x: this._el.move.offsetLeft, y: this._el.move.offsetTop };
         this.data.time.start = Date.now();
         this.fire("dragstart", this.data);
-        DomEvent.addListener(this._el.drag, this.dragevent.move, this._onDragMove, this);
-        DomEvent.addListener(this._el.drag, this.dragevent.leave, this._onDragEnd, this);
+        this._attachGestureListeners();
     }
 
     _onDragEnd(e: LegacyEvent) {
+        // touchcancel/touchend may arrive without a move, or twice (touchend
+        // after touchcancel): record the position and finish exactly once
+        const was_sliding = this.data.sliding;
+        if (Browser.touch && was_sliding) {
+            const touch = e.originalEvent
+                ? (e.originalEvent.changedTouches[0] ?? e.originalEvent.touches[0])
+                : null;
+            if (touch) {
+                this.data.pagex.end = touch.clientX;
+                this.data.pagey.end = touch.clientY;
+            }
+        } else if (!Browser.touch && was_sliding) {
+            this.data.pagex.end = e.pageX ?? this.data.pagex.end;
+            this.data.pagey.end = e.pageY ?? this.data.pagey.end;
+        }
         this.data.sliding = false;
-        DomEvent.removeListener(this._el.drag, this.dragevent.move, this._onDragMove, this);
-        DomEvent.removeListener(this._el.drag, this.dragevent.leave, this._onDragEnd, this);
+        this._detachGestureListeners();
+        if (!was_sliding) {
+            return;
+        }
         this.fire("dragend", this.data);
         this._momentum();
     }
 
+    _attachGestureListeners(): void {
+        DomEvent.addListener(this._el.drag, this.dragevent.move, this._onDragMove, this);
+        DomEvent.addListener(this._el.drag, this.dragevent.leave, this._onDragEnd, this);
+    }
+
+    _detachGestureListeners(): void {
+        DomEvent.removeListener(this._el.drag, this.dragevent.move, this._onDragMove, this);
+        DomEvent.removeListener(this._el.drag, this.dragevent.leave, this._onDragEnd, this);
+    }
+
     _onDragMove(e: LegacyEvent) {
         const change = {
             x: 0,
@@ -220,22 +294,25 @@ class SwipableBase {
         //e.preventDefault();
         this.data.sliding = true;
         if (Browser.touch) {
-            if (e.originalEvent) {
-                this.data.pagex.end = e.originalEvent.touches[0].screenX;
-                this.data.pagey.end = e.originalEvent.touches[0].screenY;
-            } else {
-                this.data.pagex.end = e.targetTouches[0].screenX;
-                this.data.pagey.end = e.targetTouches[0].screenY;
-            }
+            const touch = e.originalEvent
+                ? e.originalEvent.touches[0]
+                : e.targetTouches
+                  ? e.targetTouches[0]
+                  : null;
+            this.data.pagex.end = touch ? touch.clientX : (e.pageX ?? this.data.pagex.end);
+            this.data.pagey.end = touch ? touch.clientY : (e.pageY ?? this.data.pagey.end);
         } else {
-            this.data.pagex.end = e.pageX;
-            this.data.pagey.end = e.pageY;
+            this.data.pagex.end = e.pageX ?? this.data.pagex.end;
+            this.data.pagey.end = e.pageY ?? this.data.pagey.end;
         }
-        change.x = this.data.pagex.start - this.data.pagex.end;
-        change.y = this.data.pagey.start - this.data.pagey.end;
-        this.data.pos.end = { x: this._el.drag.offsetLeft, y: this._el.drag.offsetTop };
-        this.data.new_pos.x = -(change.x - this.data.pos.start.x);
-        this.data.new_pos.y = -(change.y - this.data.pos.start.y);
+        // signed gesture deltas: direction must follow the movement, not the
+        // absolute screen position (|end| - |start| misread rightward swipes
+        // that stay on the left half of the screen as "left")
+        change.x = this.data.pagex.end - this.data.pagex.start;
+        change.y = this.data.pagey.end - this.data.pagey.start;
+        this.data.pos.end = { x: this.data.pos.start.x, y: this.data.pos.start.y };
+        this.data.new_pos.x = this.data.pos.start.x - change.x;
+        this.data.new_pos.y = this.data.pos.start.y - change.y;
         if (this.options.enable.x && Math.abs(change.x) > Math.abs(change.y)) {
             e.preventDefault();
             this._el.move.style.left = this.data.new_pos.x + "px";
@@ -263,29 +340,22 @@ class SwipableBase {
                 y: false,
             };
         let swipe = false;
-        const _swipe_direction = "";
         this.data.direction = null;
-        pos_adjust.time = (Date.now() - this.data.time.start) * 10;
-        pos_change.time = (Date.now() - this.data.time.start) * 10;
+        // signed travel distance of the gesture (px), scaled by speed
         pos_change.x =
-            this.options.momentum_multiplier *
-            (Math.abs(this.data.pagex.end) - Math.abs(this.data.pagex.start));
+            this.options.momentum_multiplier * (this.data.pagex.end - this.data.pagex.start);
         pos_change.y =
-            this.options.momentum_multiplier *
-            (Math.abs(this.data.pagey.end) - Math.abs(this.data.pagey.start));
-        pos_adjust.x = Math.round(pos_change.x / pos_change.time);
-        pos_adjust.y = Math.round(pos_change.y / pos_change.time);
-        this.data.new_pos.x = this.data.pos.end.x + pos_adjust.x;
-        this.data.new_pos.y = this.data.pos.end.y + pos_adjust.y;
+            this.options.momentum_multiplier * (this.data.pagey.end - this.data.pagey.start);
+        pos_change.time = (Date.now() - this.data.time.start) * 10;
+        pos_adjust.x = Math.round(pos_change.x / Math.max(pos_change.time, 1));
+        pos_adjust.y = Math.round(pos_change.y / Math.max(pos_change.time, 1));
+        this.data.new_pos.x = this.data.pos.start.x + pos_adjust.x;
+        this.data.new_pos.y = this.data.pos.start.y + pos_adjust.y;
         if (!this.options.enable.x) {
             this.data.new_pos.x = this.data.pos.start.x;
-        } else if (this.data.new_pos.x > 0) {
-            this.data.new_pos.x = 0;
         }
         if (!this.options.enable.y) {
             this.data.new_pos.y = this.data.pos.start.y;
-        } else if (this.data.new_pos.y < 0) {
-            this.data.new_pos.y = 0;
         }
         // Detect Swipe
         if (pos_change.time < 2000) {
@@ -309,26 +379,29 @@ class SwipableBase {
         // Detect Direction and long swipe
         if (swipe_detect.x) {
             // Long Swipe
-            if (Math.abs(pos_change.x) > this._el.drag.offsetWidth / 2) {
+            if (
+                Math.abs(this.data.pagex.end - this.data.pagex.start) >
+                this._el.drag.offsetWidth / 2
+            ) {
                 swipe = true;
             }
             if (Math.abs(pos_change.x) > 10000) {
-                this.data.direction = "left";
-                if (pos_change.x > 0) {
-                    this.data.direction = "right";
-                }
+                // leftward finger travel (end < start) pulls the next slide
+                // into view → "left"; rightward travel goes back → "right"
+                this.data.direction =
+                    this.data.pagex.end < this.data.pagex.start ? "left" : "right";
             }
         }
         if (swipe_detect.y) {
             // Long Swipe
-            if (Math.abs(pos_change.y) > this._el.drag.offsetHeight / 2) {
+            if (
+                Math.abs(this.data.pagey.end - this.data.pagey.start) >
+                this._el.drag.offsetHeight / 2
+            ) {
                 swipe = true;
             }
             if (Math.abs(pos_change.y) > 10000) {
-                this.data.direction = "up";
-                if (pos_change.y > 0) {
-                    this.data.direction = "down";
-                }
+                this.data.direction = this.data.pagey.end < this.data.pagey.start ? "up" : "down";
             }
         }
         this._animateMomentum();
@@ -337,7 +410,7 @@ class SwipableBase {
         } else if (this.data.direction) {
             this.fire("swipe_nodirection", this.data);
         } else if (this.options.snap) {
-            this.animator.stop();
+            this.animator?.stop();
             this.animator = Animate(this._el.move, {
                 top: this.data.pos.start.y,
                 left: this.data.pos.start.x,
@@ -349,31 +422,25 @@ class SwipableBase {
 
     _animateMomentum() {
         const pos = {
-                x: this.data.new_pos.x,
-                y: this.data.new_pos.y,
-            },
-            animate: AnimateOptions = {
-                duration: this.options.duration,
-                easing: easeOutStrong,
-            };
+            x: this.data.new_pos.x,
+            y: this.data.new_pos.y,
+        };
+        const animate: AnimateOptions = {
+            duration: this.options.duration,
+            easing: easeOutStrong,
+        };
+        // Clamp the resting position into the configured range. Each bound is
+        // optional and defaults to `false`, so test for a number rather than
+        // truthiness (0 is a meaningful bound). The x pair was inverted —
+        // `left` was treated as the maximum and `right` as the minimum — so a
+        // real horizontal constraint snapped every momentum animation to the
+        // left edge.
         if (this.options.enable.y) {
-            if (this.options.constraint.top || this.options.constraint.bottom) {
-                if (pos.y > (this.options.constraint.bottom as number)) {
-                    pos.y = this.options.constraint.bottom as number;
-                } else if (pos.y < (this.options.constraint.top as number)) {
-                    pos.y = this.options.constraint.top as number;
-                }
-            }
+            pos.y = clampAxis(pos.y, this.options.constraint.top, this.options.constraint.bottom);
             animate.top = Math.floor(pos.y) + "px";
         }
         if (this.options.enable.x) {
-            if (this.options.constraint.left || this.options.constraint.right) {
-                if (pos.x >= (this.options.constraint.left as number)) {
-                    pos.x = this.options.constraint.left as number;
-                } else if (pos.x < (this.options.constraint.right as number)) {
-                    pos.x = this.options.constraint.right as number;
-                }
-            }
+            pos.x = clampAxis(pos.x, this.options.constraint.left, this.options.constraint.right);
             animate.left = Math.floor(pos.x) + "px";
         }
         this.animator = Animate(this._el.move, animate);

package/dist/assets/demo-D6cTmzn6.js

@@ -1 +0,0 @@
-import{t as e}from"./main-Y-MYUSJ4.js";import"./modulepreload-polyfill-P2Xu9kJm.js";function t(e){document.title=`StoryMapJS: `+e.title}window.storymap=new e(`storymap-embed`,`./demo.json`,{},{title:t});

package/dist/assets/harness-BPFlzutp.js

@@ -1 +0,0 @@
-import{t as e}from"./main-Y-MYUSJ4.js";import"./modulepreload-polyfill-P2Xu9kJm.js";window.__smErrors=[],window.__smReady=!1,window.addEventListener(`error`,e=>{window.__smErrors.push(String(e.message||e))});var t=new URLSearchParams(window.location.search),n=t.get(`manifest`),r=t.get(`url`),i=n===null?t.get(`example`):n,a=n===null?`/examples/`:`/examples-iiif/`,o={};if(t.get(`options`))try{o=JSON.parse(t.get(`options`))}catch(e){window.__smErrors.push(`harness: bad options param: `+e)}var s=r??a+i+`.json`;fetch(s).then(e=>e.json()).then(t=>{window.__sm=new e(`storymap-embed`,t,o,{}),window.__smReady=!0}).catch(e=>{window.__smErrors.push(`harness: `+(e&&e.message?e.message:String(e))),window.__smReady=!0});

package/dist/assets/index-DDsPBPZA.js

@@ -1 +0,0 @@
-import"./modulepreload-polyfill-P2Xu9kJm.js";var e=[{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`},{id:`iiif-wellcome`,title:`Wellcome Collection (IIIF)`,kind:`IIIF`},{id:`president`,title:`A Month in the Life of President Obama`,kind:`Map`},{url:`https://s3.amazonaws.com/uploads.knightlab.com/storymapjs/a1a349b51799ee49e96bed10cc235e7f/garden-of-earthly-delights/published.json`,thumb:`bosch-garden`,title:`The Garden of Earthly Delights – Hieronymus Bosch`,kind:`Knight Lab example`},{url:`https://uploads.knightlab.com/storymapjs/3df56e350378e51781746bfb2a2ea428/test/published.json`,thumb:`southern-literary-trail`,title:`Southern Literary Trail`,kind:`Georgia Humanities`}];function t(e){let t=e.url??`examples/`+e.id+`.json`,n=e.thumb??e.id??``,r=document.createElement(`a`);r.className=`card`,r.href=`./embed/index.html?url=${encodeURIComponent(t)}`;let i=document.createElement(`span`);i.className=`header-image`;let a=document.createElement(`span`);a.className=`header-image-background bw`,a.style.backgroundImage=`url('./thumbs/${n}.jpg'), linear-gradient(135deg, #b8b8b8, #646464)`,a.setAttribute(`role`,`img`),a.setAttribute(`aria-label`,e.title),i.append(a);let o=document.createElement(`article`);o.className=`card-content`;let s=document.createElement(`h3`);s.textContent=e.title,o.append(s);let c=document.createElement(`footer`);return c.textContent=e.kind,r.append(i,o,c),r}var n=document.getElementById(`examples-cards`);if(n){n.classList.add(`cards-link`);for(let r of e)n.append(t(r))}var r=document.getElementById(`demo-frame`);if(r){let e=()=>{r.style.height=window.innerHeight-20+`px`};e(),window.addEventListener(`resize`,e)}