@projektemacher/storymapjs 0.10.8 → 0.11.0

package/src/language/locale/.expected-gaps.json

@@ -1,13 +1,70 @@
 {
-    "be": ["messages.consent_service_narration"],
-    "bg": ["messages.consent_service_narration"],
-    "cs": ["messages.consent_service_narration"],
+    "be": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
+    ],
+    "bg": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
+    ],
+    "cs": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
+    ],
     "de": ["messages.consent_service_narration"],
-    "el": ["messages.consent_service_narration"],
-    "es": ["messages.consent_service_narration"],
+    "el": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
+    ],
+    "es": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
+    ],
     "et": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
         "buttons.exit_fullscreen",
         "buttons.fullscreen",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
         "messages.consent_allow",
         "messages.consent_blocked",
         "messages.consent_deny",
@@ -15,14 +72,52 @@
         "messages.consent_service_fonts",
         "messages.consent_service_narration",
         "messages.consent_service_tiles",
-        "messages.error"
+        "messages.error",
+        "messages.skip_link"
+    ],
+    "fr": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
+    ],
+    "he": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
+    ],
+    "hu": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
     ],
-    "fr": ["messages.consent_service_narration"],
-    "he": ["messages.consent_service_narration"],
-    "hu": ["messages.consent_service_narration"],
     "is": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
         "buttons.exit_fullscreen",
         "buttons.fullscreen",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
         "messages.consent_allow",
         "messages.consent_blocked",
         "messages.consent_deny",
@@ -30,15 +125,63 @@
         "messages.consent_service_fonts",
         "messages.consent_service_narration",
         "messages.consent_service_tiles",
-        "messages.error"
+        "messages.error",
+        "messages.skip_link"
+    ],
+    "it": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
+    ],
+    "jp": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
+    ],
+    "ko": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
+    ],
+    "nl": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
     ],
-    "it": ["messages.consent_service_narration"],
-    "jp": ["messages.consent_service_narration"],
-    "ko": ["messages.consent_service_narration"],
-    "nl": ["messages.consent_service_narration"],
     "nn": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
         "buttons.exit_fullscreen",
         "buttons.fullscreen",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
         "messages.consent_allow",
         "messages.consent_blocked",
         "messages.consent_deny",
@@ -46,17 +189,75 @@
         "messages.consent_service_fonts",
         "messages.consent_service_narration",
         "messages.consent_service_tiles",
-        "messages.error"
+        "messages.error",
+        "messages.skip_link"
+    ],
+    "no": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
+    ],
+    "pl": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
+    ],
+    "pt": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
+    ],
+    "ru": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
+    ],
+    "sk": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
     ],
-    "no": ["messages.consent_service_narration"],
-    "pl": ["messages.consent_service_narration"],
-    "pt": ["messages.consent_service_narration"],
-    "ru": ["messages.consent_service_narration"],
-    "sk": ["messages.consent_service_narration"],
     "sr": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
         "buttons.exit_fullscreen",
         "buttons.fullscreen",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
         "buttons.overview",
+        "media.iframe_title",
         "messages.consent_allow",
         "messages.consent_blocked",
         "messages.consent_deny",
@@ -64,14 +265,52 @@
         "messages.consent_service_fonts",
         "messages.consent_service_narration",
         "messages.consent_service_tiles",
-        "messages.error"
+        "messages.error",
+        "messages.skip_link"
+    ],
+    "sv": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
+    ],
+    "tr": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
+    ],
+    "uk": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
     ],
-    "sv": ["messages.consent_service_narration"],
-    "tr": ["messages.consent_service_narration"],
-    "uk": ["messages.consent_service_narration"],
     "ur": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
         "buttons.exit_fullscreen",
         "buttons.fullscreen",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
         "messages.consent_allow",
         "messages.consent_blocked",
         "messages.consent_deny",
@@ -79,8 +318,29 @@
         "messages.consent_service_fonts",
         "messages.consent_service_narration",
         "messages.consent_service_tiles",
-        "messages.error"
+        "messages.error",
+        "messages.skip_link"
     ],
-    "zh-cn": ["messages.consent_service_narration"],
-    "zh-tw": ["messages.consent_service_narration"]
+    "zh-cn": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
+    ],
+    "zh-tw": [
+        "buttons.audio_badge",
+        "buttons.autoplay_pause",
+        "buttons.autoplay_play",
+        "buttons.layers",
+        "buttons.layers_basemaps",
+        "buttons.layers_overlays",
+        "media.iframe_title",
+        "messages.consent_service_narration",
+        "messages.skip_link"
+    ]
 }

package/src/language/locale/de.json

@@ -3,6 +3,7 @@
     "lang": "de",
     "messages": {
         "loading": "Daten werden geladen",
+        "skip_link": "Zum Story-Inhalt springen",
         "wikipedia": "von Wikipedia, der freien Enzyklopädie",
         "start": "Explore",
         "consent_start_title": "Externe Inhalte",
@@ -25,7 +26,16 @@
         "uncollapse_toggle": "Karte anzeigen",
         "swipe_to_navigate": "Swipe to Navigate<br><span class='vco-button'>OK</span>",
         "fullscreen": "Vollbild",
-        "exit_fullscreen": "Vollbild beenden"
+        "exit_fullscreen": "Vollbild beenden",
+        "layers": "Ebenen",
+        "layers_basemaps": "Grundkarten",
+        "layers_overlays": "Overlays",
+        "autoplay_pause": "Autoplay pausieren",
+        "autoplay_play": "Autoplay fortsetzen",
+        "audio_badge": "Enthält Audio"
+    },
+    "media": {
+        "iframe_title": "Eingebettetes Medium"
     },
     "direction": "ltr"
 }

package/src/language/locale/en.json

@@ -4,6 +4,7 @@
     "messages": {
         "error": "Error loading",
         "loading": "Loading",
+        "skip_link": "Skip to story content",
         "wikipedia": "From Wikipedia, the free encyclopedia",
         "start": "Start Exploring",
         "consent_message": "Load content from {service}?",
@@ -26,7 +27,16 @@
         "uncollapse_toggle": "Show Map",
         "swipe_to_navigate": "Swipe to Navigate<br><span class='vco-button'>OK</span>",
         "fullscreen": "Full Screen",
-        "exit_fullscreen": "Exit Full Screen"
+        "exit_fullscreen": "Exit Full Screen",
+        "layers": "Layers",
+        "layers_basemaps": "Basemaps",
+        "layers_overlays": "Overlays",
+        "autoplay_pause": "Pause autoplay",
+        "autoplay_play": "Resume autoplay",
+        "audio_badge": "Has audio"
+    },
+    "media": {
+        "iframe_title": "Embedded media"
     },
     "direction": "ltr"
 }

package/src/main.ts

@@ -103,6 +103,23 @@ export {
  */
 export { storymapToManifest } from "./storymap/to-iiif";
 
+/**
+ * Read a slideshow tour (W3C AnnotationCollection + extension) as storymap
+ * data — the counterpart of `manifestToStorymapData()` for that format.
+ * Pure, so the same document always produces the same story.
+ */
+export {
+    isSlideshowCollection,
+    slideshowVersion,
+    slideshowToStorymapData,
+} from "./storymap/from-slideshow";
+export type {
+    SlideshowPlayerSettings,
+    SlideshowTranslatorOptions,
+    SlideshowToStorymapResult,
+    SlideshowWarning,
+} from "./storymap/from-slideshow";
+
 /**
  * The manifest shape `storymapToManifest()` produces, for a host that wants to
  * consume or further annotate the result.
@@ -136,6 +153,40 @@ export type { default as OlVectorLayer } from "ol/layer/Vector";
 export type { default as OlSource } from "ol/source/Source";
 export type { default as OlProjection } from "ol/proj/Projection";
 
+/**
+ * What a listener receives: the event payload plus the framework's `type`
+ * and `target` fields.
+ */
+export type { FiredEvent } from "./core/mixins";
+
+/** The swipe directions a `Swipable` reports. */
+export type { SwipeDirection } from "./ui/Swipable";
+
+/**
+ * Per-emitter event maps (`event name → payload`), for typed subscriptions:
+ * `storymap.on("change", (e) => ...)` now infers `e` instead of `unknown`.
+ *
+ * @remarks Each map lists exactly the events its emitter fires.
+ */
+export type { StoryMapEvents } from "./storymap/StoryMap";
+export type { StorySliderEvents } from "./slider/StorySlider";
+export type { StorymapBasemap } from "./types";
+export type { SlideEvents, SlideBackgroundState } from "./slider/Slide";
+export type { SlideNavEvents } from "./slider/SlideNav";
+export type { MediaEvents } from "./media/Media";
+export type { TextEvents } from "./media/types/Text";
+export type { MapEvents } from "./map/Map";
+export type { MapMarkerEvents, MarkerEventPayload } from "./map/MapMarker";
+export type { MenuBarEvents } from "./ui/MenuBar";
+export type { MessageEvents } from "./ui/Message";
+export type { SwipableEvents } from "./ui/Swipable";
+
+/**
+ * A map marker as returned by `storymap.getMarker(n)` / `getMarkers()` —
+ * the handle for `openPopup()` / `closePopup()` / `popupOpen`.
+ */
+export type { default as StoryMapMarker } from "./map/openlayers/MapMarker.OpenLayers";
+
 /**
  * Payload of the `imageready` event, fired when an image source is actually
  * attached — the only outward signal that the imagery is really on the map.

package/src/map/Map.ts

@@ -7,6 +7,8 @@ import type { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
 import type Layer from "ol/layer/Layer";
 import type OverviewMap from "ol/control/OverviewMap";
 import type MapMarker from "./MapMarker";
+import type { MarkerEventPayload } from "./MapMarker";
+import type { ImagereadyPayload } from "./openlayers/Map.OpenLayers";
 import type { LinePoint, ViewToOptions } from "./types";
 import type {
     AnimationHandle,
@@ -26,6 +28,21 @@ import type {
 
 ================================================ */
 
+export interface MapEvents {
+    change: { current_marker: number };
+    loaded: StorymapData;
+    added: StorymapData;
+    removed: StorymapData;
+    markerAdded: MapMarker;
+    markerRemoved: MapMarker;
+    markerclick: MarkerEventPayload;
+    popupopen: MarkerEventPayload;
+    popupclose: MarkerEventPayload;
+    imageready: ImagereadyPayload;
+    /** Deferred tile layers attached after a tile consent grant. */
+    tilesallowed: undefined;
+}
+
 /** Wheel/scroll zoom bookkeeping (handles cleared via clearTimeout). */
 interface ScrollState {
     start_time: number | null;
@@ -49,6 +66,8 @@ class MapBase {
     declare "_line": VectorLayer | null;
     declare "_line_active": VectorLayer | null;
     declare "current_marker": number;
+    /** The wheel handler on the map element, stored for dispose(). */
+    declare "_onWheelBound": ((e: WheelEvent) => void) | null;
     declare "bounds_array": number[][] | null;
     declare "_tile_layer": Layer | null;
     declare "_tile_layer_mini": Layer | null;
@@ -60,7 +79,7 @@ class MapBase {
     declare "timer": ReturnType<typeof setTimeout> | null;
     declare "touch_scale": number;
     declare "scroll": ScrollState;
-    declare "fire": EventedInstance["fire"];
+    declare "fire": EventedInstance<MapEvents>["fire"];
     constructor(
         elem: string | HTMLElement,
         data?: Partial<StorymapData>,
@@ -214,6 +233,10 @@ class MapBase {
             // Check to see if it's an overview
             if (marker.data.type && marker.data.type === "overview") {
                 this._markerOverview();
+                // overview stops are navigable like any other: report the
+                // change exactly as the branches below do, or a click on an
+                // overview pin moves the map without ever moving the story
+                this._onMarkerChange();
             } else {
                 // Make marker active
                 marker.active(true);
@@ -662,6 +685,18 @@ class MapBase {
         if (this.current_marker !== e.marker_number) {
             this.goTo(e.marker_number, false);
         }
+        // Re-fired (after navigation) so hosts can tell a marker click
+        // apart from programmatic navigation: `change` alone does not say
+        // *how* the story moved.
+        this.fire("markerclick", { marker_number: e.marker_number });
+    }
+
+    _onMarkerPopupOpen(e: { marker_number: number }): void {
+        this.fire("popupopen", { marker_number: e.marker_number });
+    }
+
+    _onMarkerPopupClose(e: { marker_number: number }): void {
+        this.fire("popupclose", { marker_number: e.marker_number });
     }
 
     _onMapLoaded(e?: unknown): void {
@@ -777,15 +812,18 @@ class MapBase {
     _afterCreateMarkers(): void {}
 
     _initEvents(): void {
-        this._el.map.addEventListener("wheel", (e) => {
+        // stored so the engine's dispose() can detach it (an inline arrow
+        // would have no other handle)
+        this._onWheelBound = (e: WheelEvent) => {
             this._onWheel(e);
-        });
-
-        //this.on("wheel", this._onWheel, this);
+        };
+        this._el.map.addEventListener("wheel", this._onWheelBound);
     }
 }
 
-export default class Map extends DomMixed(Evented(MapBase)) {
+const EventedMapBase = Evented<MapEvents, typeof MapBase>(MapBase);
+
+export default class Map extends DomMixed<MapEvents, typeof EventedMapBase>(EventedMapBase) {
     constructor(...args: ConstructorParameters<typeof MapBase>) {
         super(...args);
     }

package/src/map/MapMarker.ts

@@ -11,7 +11,18 @@ import type {
 /*	MapMarker
 	Creates a marker. Takes a data object and
 	populates the marker with content.
-================================================= */
+================================================== */
+
+/** A marker event payload: the marker by slide index. */
+export interface MarkerEventPayload {
+    marker_number: number;
+}
+
+export interface MapMarkerEvents {
+    markerclick: MarkerEventPayload;
+    popupopen: MarkerEventPayload;
+    popupclose: MarkerEventPayload;
+}
 
 class MapMarkerBase {
     declare "_el": Record<string, HTMLElement>;
@@ -26,7 +37,7 @@ class MapMarkerBase {
     declare "data": MapMarkerData;
     declare "options": StorymapOptions;
     declare "animator": AnimationHandle | null;
-    declare "fire": EventedInstance["fire"];
+    declare "fire": EventedInstance<MapMarkerEvents>["fire"];
 
     /*	Constructor
 	================================================== */
@@ -163,7 +174,9 @@ class MapMarkerBase {
     _updateDisplay(width: number, height: number, animate?: boolean): void {}
 }
 
-export default class MapMarker extends Evented(MapMarkerBase) {
+export default class MapMarker extends Evented<MapMarkerEvents, typeof MapMarkerBase>(
+    MapMarkerBase,
+) {
     constructor(...args: ConstructorParameters<typeof MapMarkerBase>) {
         super(...args);
     }