@projektemacher/storymapjs 0.10.8 → 0.11.0

package/src/ui/Message.ts

@@ -15,12 +15,19 @@ interface MessageOptions {
     [key: string]: unknown;
 }
 
+export interface MessageEvents {
+    clicked: MessageOptions;
+    loaded: Record<string, unknown>;
+    added: Record<string, unknown>;
+    removed: Record<string, unknown>;
+}
+
 class MessageBase {
     declare "_el": Record<string, HTMLElement>;
     declare "options": MessageOptions;
     "data": Record<string, unknown>;
     declare "animator": Record<string, unknown>;
-    declare "fire": EventedInstance["fire"];
+    declare "fire": EventedInstance<MessageEvents>["fire"];
 
     /*	Constructor
 	================================================== */
@@ -82,6 +89,12 @@ class MessageBase {
         } else {
             this._el.message.innerHTML = t;
         }
+        // the container dismisses on click, so it is a button to assistive
+        // tech too; its name tracks the message text
+        const label = this._el.message.textContent?.trim() ?? "";
+        if (label !== "") {
+            this._el.container.setAttribute("aria-label", label);
+        }
     }
 
     /*	Events
@@ -91,10 +104,24 @@ class MessageBase {
         this.fire("clicked", this.options);
     }
 
+    _onKeyDown(e: Event) {
+        const key = (e as KeyboardEvent).key;
+        if (key === "Enter" || key === " " || key === "Spacebar") {
+            e.preventDefault();
+            this._onMouseClick();
+        }
+    }
+
     /*	Private Methods
 	================================================== */
     _initLayout() {
         // Create Layout
+        // Dismissable by click and keyboard alike (see _onKeyDown): the
+        // fixed hook below carries the focus ring, whatever message_class
+        // the host configured.
+        this._el.container.classList.add("vco-message-dismiss");
+        this._el.container.setAttribute("role", "button");
+        this._el.container.setAttribute("tabindex", "0");
         this._el.message_container = Dom.create("div", "vco-message-container", this._el.container);
         this._el.loading_icon = Dom.create(
             "div",
@@ -108,19 +135,25 @@ class MessageBase {
 
     _initEvents() {
         DomEvent.addListener(this._el.container, "click", this._onMouseClick, this);
+        DomEvent.addListener(this._el.container, "keydown", this._onKeyDown, this);
     }
 
     /**
-     * Release the click listener and drop the element. Called by
+     * Release the listeners 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);
+        DomEvent.removeListener(this._el.container, "keydown", this._onKeyDown, this);
         this._el.container.remove();
     }
 }
 
-export default class Message extends DomMixed(Evented(MessageBase)) {
+const EventedMessageBase = Evented<MessageEvents, typeof MessageBase>(MessageBase);
+
+export default class Message extends DomMixed<MessageEvents, typeof EventedMessageBase>(
+    EventedMessageBase,
+) {
     constructor(...args: ConstructorParameters<typeof MessageBase>) {
         super(...args);
     }

package/src/ui/Swipable.ts

@@ -49,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 } };
@@ -59,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;
@@ -67,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: {},
 
@@ -124,7 +141,7 @@ class SwipableBase {
         // Draggable Data
         this.data = {
             sliding: false,
-            direction: "none",
+            direction: null,
             pagex: {
                 start: 0,
                 end: 0,
@@ -405,9 +422,10 @@ class SwipableBase {
             }
         }
         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();
@@ -448,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/harness-Cr0rYpvt.js

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