@projektemacher/storymapjs 0.10.7 → 0.11.0

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;
 }
@@ -34,7 +49,7 @@ interface SwipableOptions {
 
 interface DragData {
     sliding: boolean;
-    direction: string | null;
+    direction: SwipeDirection | null;
     pagex: { start: number; end: number };
     pagey: { start: number; end: number };
     pos: { start: { x: number; y: number }; end: { x: number; y: number } };
@@ -44,6 +59,23 @@ interface DragData {
     touch: boolean;
 }
 
+/** The four swipe directions. `"none"` is not one: an undecided gesture
+ *  carries `null`, and the truthiness guard at the fire site treats it as
+ *  "no swipe" rather than a fifth direction. */
+export type SwipeDirection = "left" | "right" | "up" | "down";
+
+export interface SwipableEvents {
+    dragstart: DragData;
+    dragend: DragData;
+    dragmove: DragData;
+    momentum: DragData;
+    swipe_left: DragData;
+    swipe_right: DragData;
+    swipe_up: DragData;
+    swipe_down: DragData;
+    swipe_nodirection: DragData;
+}
+
 class SwipableBase {
     declare "mousedrag": DragEventNames;
     declare "touchdrag": DragEventNames;
@@ -52,7 +84,7 @@ class SwipableBase {
     declare "animator": AnimationHandle | null;
     declare "dragevent": DragEventNames;
     declare "data": DragData;
-    declare "fire": EventedInstance["fire"];
+    declare "fire": EventedInstance<SwipableEvents>["fire"];
 
     //_el: {},
 
@@ -70,6 +102,7 @@ class SwipableBase {
         this.touchdrag = {
             down: "touchstart",
             up: "touchend",
+            cancel: "touchcancel",
             leave: "mouseleave",
             move: "touchmove",
         };
@@ -108,7 +141,7 @@ class SwipableBase {
         // Draggable Data
         this.data = {
             sliding: false,
-            direction: "none",
+            direction: null,
             pagex: {
                 start: 0,
                 end: 0,
@@ -148,7 +181,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 +201,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 +232,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 +265,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 +311,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 +357,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,35 +396,39 @@ 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();
-        if (swipe && this.data.direction) {
-            this.fire("swipe_" + this.data.direction, this.data);
-        } else if (this.data.direction) {
+        const direction = this.data.direction;
+        if (swipe && direction) {
+            this.fire(`swipe_${direction}`, this.data);
+        } else if (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 +440,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);
@@ -381,7 +466,7 @@ class SwipableBase {
     }
 }
 
-export default class Swipable extends Evented(SwipableBase) {
+export default class Swipable extends Evented<SwipableEvents, typeof SwipableBase>(SwipableBase) {
     constructor(...args: ConstructorParameters<typeof SwipableBase>) {
         super(...args);
     }

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)}