@projektemacher/storymapjs 0.10.5 → 0.10.7

package/src/types.ts

@@ -0,0 +1,297 @@
+// Shared types for the StoryMapJS codebase.
+
+// ---------- Storymap data (exchange format) ----------
+
+export interface StorymapSlideText {
+    headline?: string;
+    text?: string;
+    text_align?: string;
+}
+
+export interface StorymapSlideLocation {
+    lat?: number;
+    lon?: number;
+    zoom?: number;
+    line?: boolean;
+    icon?: string;
+    iconSize?: number[];
+    image?: string;
+    use_custom_marker?: boolean;
+    [key: string]: unknown;
+}
+
+export type MediaTypeMatch = {
+    type: string;
+    name: string;
+    match_str: string;
+    // media type class constructor
+    cls: new (data: StorymapSlideMedia, options: Record<string, unknown>) => unknown;
+};
+
+export interface StorymapSlideMedia {
+    url?: string | null;
+    caption?: string | null;
+    credit?: string | null;
+    thumb?: string | null;
+    mediatype?: MediaTypeMatch | null;
+    [key: string]: unknown;
+}
+
+export interface StorymapSlideBackground {
+    url?: string | null;
+    color?: string | null;
+    opacity?: number;
+}
+
+export interface StorymapSlide {
+    type?: string;
+    date?: string | Record<string, unknown> | null;
+    group?: string;
+    location?: StorymapSlideLocation;
+    media?: StorymapSlideMedia;
+    text?: StorymapSlideText;
+    background?: StorymapSlideBackground | string | null;
+    uniqueid?: string;
+    [key: string]: unknown;
+}
+
+export interface StorymapData {
+    uniqueid?: string;
+    slides: StorymapSlide[];
+    [key: string]: unknown;
+}
+
+export interface StorymapDataWrapper {
+    storymap: StorymapData;
+}
+
+// ---------- StoryMap / Map options ----------
+
+export interface StorymapOptions {
+    width: number;
+    height: number;
+    layout: string;
+    base_class: string;
+    default_bg_color: { r: number; g: number; b: number };
+    map_size_sticky: number;
+    map_center_offset: { left: number; top: number } | null;
+    less_bounce: boolean;
+    start_at_slide: number;
+    call_to_action: boolean;
+    call_to_action_text: string;
+    menubar_height: number;
+    /** Show a fullscreen toggle button in the menubar (default: true) */
+    fullscreen: boolean;
+    /** Show the map overview button in the menubar (default: true) */
+    show_overview: boolean;
+    /** Show the back-to-the-beginning button in the menubar (default: true) */
+    show_back_to_start: boolean;
+    skinny_size: number;
+    duration: number;
+    ease: unknown;
+    dragging: boolean;
+    trackResize: boolean;
+    /**
+     * Navigate slides with arrow keys anywhere on the page (default false:
+     * arrows only work when the slide panel has focus). Form elements and
+     * the map itself (which pans) are always skipped. Read at construction.
+     */
+    keyboard: boolean;
+    /** Re-fetch the source file on every load, bypassing caches (issue #417) */
+    nocache: boolean;
+    /** Advance slides automatically every N milliseconds; 0 disables (issue #380) */
+    autoplay: number;
+    /** Show a progress bar in the menubar (issue #247) */
+    show_progress: boolean;
+    /** Show the slide headline as a label on the active map marker (issue #243) */
+    marker_labels: boolean;
+    /** Default text alignment for slide text: left, center or right (issue #244) */
+    text_align: "left" | "center" | "right";
+    /** Override the overview fit center (issues #107, #271) */
+    map_overview_center: { lat: number; lon: number } | null;
+    map_type: string;
+    attribution: string;
+    /**
+     * Stacked raster overlays above the base map, below the route lines.
+     * Each entry accepts any `map_type` value (XYZ template, `osm:style`,
+     * …) plus per-layer presentation; see StorymapOverlayLayer. Empty
+     * (default) means base map only.
+     */
+    overlays: StorymapOverlayLayer[];
+    map_mini: boolean;
+    map_subdomains: string;
+    map_as_image: boolean;
+    map_access_token: string;
+    map_background_color: string;
+    /**
+     * Landscape map layout: `"full"` (default) spans the whole width with the
+     * slide panel fading in over it (the map view is offset so markers clear
+     * the panel); `"left"` limits the map to the left, visible half with an
+     * opaque slide panel — no offset needed, fits and constraints align with
+     * the visible area directly. Portrait layouts are unaffected.
+     */
+    map_area: "full" | "left";
+    /**
+     * Limit the map to a bounding box `[west, south, east, north]` (lon/lat;
+     * raw image pixel coordinates for image-space maps). The view center is
+     * constrained to the box; `null` (default) leaves the map unconstrained.
+     */
+    map_bbox: number[] | null;
+    /**
+     * Constrain the minimap overview to a bounding box `[west, south, east,
+     * north]` in lon/lat (mercator maps only); `null` (default) leaves the
+     * overview unconstrained.
+     */
+    overview_extent: [number, number, number, number] | null;
+    /**
+     * Legacy zoomify image pyramid (map_type: "zoomify"): the tiles are
+     * placed at the standard mercator tile positions, stretched from the
+     * world's top-left corner.
+     */
+    zoomify?:
+        | {
+              path?: string;
+              width?: number;
+              height?: number;
+              tolerance?: number;
+              attribution?: string;
+          }
+        | boolean;
+    /**
+     * Ask for permission before loading anything from external services
+     * (media embeds, map tiles, external font CSS) — GDPR consent mode.
+     * Grants are remembered per service in a cookie for 90 days.
+     */
+    consent_required: boolean;
+    /** Slide text color override, sets --vco-color-text (issue #177) */
+    text_color: string;
+    /** Slide panel background color override (issue #177) */
+    text_background_color: string;
+    /** Show the great-circle route distance in the menubar (issue #341) */
+    show_distance: boolean;
+    /**
+     * Raw OpenLayers map configuration. `controls` and `interactions` replace
+     * the StoryMapJS defaults, `view` is merged over the computed default view
+     * and `element` (an HTMLElement or DOM id) replaces the auto-created map
+     * container div.
+     */
+    map_options: StorymapMapOptions;
+    map_popup: boolean;
+    zoom_distance: number;
+    calculate_zoom: boolean;
+    line_follows_path: boolean;
+    line_color: string;
+    line_color_inactive: string;
+    line_join: string;
+    line_weight: number;
+    line_opacity: number;
+    line_dash: string;
+    show_lines: boolean;
+    show_history_line: boolean;
+    use_custom_markers: boolean;
+    iiif: { url: string; attribution: string };
+    map_height: number;
+    storyslider_height: number;
+    slide_padding_lr: number;
+    slide_default_fade: string;
+    menubar_default_y: number;
+    path_gfx: string;
+    script_path: string;
+    font_css: string;
+    language: string;
+    api_key_flickr: string;
+    [key: string]: unknown;
+}
+
+// ---------- animation ----------
+
+export interface AnimateOptions extends Record<string, unknown> {
+    duration?: number;
+    easing?: unknown;
+    complete?: unknown;
+    left?: string | number;
+    top?: string | number;
+}
+
+export interface AnimationHandle {
+    stop: (jump?: boolean) => void;
+}
+
+// ---------- map ----------
+
+/**
+ * A stacked raster overlay above the base map (StorymapOptions.overlays).
+ * Presentation is declarative: hosts no longer need to reach into the
+ * layer objects for blend modes, clips or stacking tweaks.
+ */
+export interface StorymapOverlayLayer {
+    /** Any `map_type` value the tile layer factory accepts */
+    map_type: string;
+    /** Layer opacity 0..1 (default 1) */
+    opacity?: number;
+    /** Initial visibility (default true) */
+    visible?: boolean;
+    /** Extra attribution fragment, listed while the overlay is visible */
+    attribution?: string;
+    /**
+     * CSS class for the layer container. OpenLayers paints every layer
+     * with the same class into one shared div/canvas, so a distinct
+     * class isolates this layer (e.g. for blend modes). The class
+     * replaces the default wholesale, so keep the `ol-layer` token
+     * (e.g. `"ol-layer historic-sheet"`) unless you know why not.
+     */
+    className?: string;
+    /** CSS mix-blend-mode for the layer container (needs className) */
+    blendMode?: string;
+    /** Clip box `[west, south, east, north]` in lon/lat (mercator maps) */
+    extent?: [number, number, number, number];
+}
+
+/** OpenLayers passthrough options (see StorymapOptions.map_options) */
+export interface StorymapMapOptions {
+    /** HTMLElement or DOM id that becomes the real map container */
+    element?: HTMLElement | string;
+    /** Merged over the default view configuration */
+    view?: Record<string, unknown>;
+    /** Replaces the default (empty) controls list */
+    controls?: unknown[];
+    /** Replaces the default (empty) interactions list */
+    interactions?: unknown[];
+    /** Any other ol/Map constructor option (layers, pixelRatio, ...) */
+    [key: string]: unknown;
+}
+
+export interface LatLngLiteral {
+    lat: number | undefined;
+    lon?: number | undefined;
+    lng?: number | undefined;
+}
+
+export interface MapMarkerData {
+    real_marker?: boolean;
+    location?: StorymapSlideLocation;
+    media?: StorymapSlideMedia & { mediatype?: MediaTypeMatch | null };
+    text?: { headline?: string };
+    type?: string;
+    [key: string]: unknown;
+}
+
+export type IconSpec = {
+    url: string;
+    size: number[];
+    anchor: number[];
+};
+
+// ---------- media ----------
+
+export interface MediaState {
+    loaded: boolean;
+    [key: string]: unknown;
+}
+
+export interface LanguageStrings {
+    [key: string]: unknown;
+    loading: string;
+    wikipedia: string;
+    start: string;
+}

package/src/ui/Draggable.ts

@@ -0,0 +1,374 @@
+import { mergeData } from "../core/Util";
+import { Evented, type EventedInstance } from "../core/mixins";
+import Dom from "../dom/Dom";
+import { DomEvent, type LegacyEvent } from "../dom/DomEvent";
+import { touch } from "../core/Browser";
+import { easeInOutQuint, easeOutStrong } from "../animation/easings";
+import Animate from "morpheus";
+import type { AnimateOptions, AnimationHandle } from "../types";
+
+/*	Draggable
+	Draggable allows you to add dragging capabilities to any element. Supports mobile devices too.
+	TODO Enable constraints
+================================================== */
+
+interface DragEventNames {
+    down: string;
+    up: string;
+    leave: string;
+    move: string;
+}
+
+interface DraggableOptions {
+    enable: { x: boolean; y: boolean };
+    constraint: {
+        top: number | boolean;
+        bottom: number | boolean;
+        left: number | boolean;
+        right: number | boolean;
+    };
+    momentum_multiplier: number;
+    duration: number;
+    ease: unknown;
+}
+
+interface DragData {
+    sliding: boolean;
+    direction: string | null;
+    pagex: { start: number; end: number };
+    pagey: { start: number; end: number };
+    pos: { start: { x: number; y: number }; end: { x: number; y: number } };
+    new_pos: { x: number; y: number };
+    new_pos_parent: { x: number; y: number };
+    time: { start: number; end: number };
+    touch: boolean;
+}
+
+export class DraggableBase {
+    declare "_el": Record<string, HTMLElement>;
+    declare "options": DraggableOptions;
+    declare "animator": AnimationHandle | null;
+    declare "dragevent": DragEventNames;
+    declare "data": DragData;
+    declare "fire": EventedInstance["fire"];
+
+    mousedrag = {
+        down: "mousedown",
+        up: "mouseup",
+        leave: "mouseleave",
+        move: "mousemove",
+    };
+
+    touchdrag = {
+        down: "touchstart",
+        up: "touchend",
+        leave: "touchleave",
+        move: "touchmove",
+    };
+
+    constructor(drag_elem: HTMLElement, options: Record<string, unknown>, move_elem?: HTMLElement) {
+        // DOM ELements
+        this._el = {
+            drag: drag_elem,
+            move: drag_elem,
+        };
+
+        if (move_elem) {
+            this._el.move = move_elem;
+        }
+
+        //Options
+        this.options = {
+            enable: {
+                x: true,
+                y: true,
+            },
+            constraint: {
+                top: false,
+                bottom: false,
+                left: false,
+                right: false,
+            },
+            momentum_multiplier: 2000,
+            duration: 1000,
+            ease: easeInOutQuint,
+        };
+
+        // Animation Object
+        this.animator = null;
+
+        // Drag Event Type
+        this.dragevent = this.mousedrag;
+
+        if (touch) {
+            this.dragevent = this.touchdrag;
+        }
+
+        // Draggable Data
+        this.data = {
+            sliding: false,
+            direction: "none",
+            pagex: {
+                start: 0,
+                end: 0,
+            },
+            pagey: {
+                start: 0,
+                end: 0,
+            },
+            pos: {
+                start: {
+                    x: 0,
+                    y: 0,
+                },
+                end: {
+                    x: 0,
+                    y: 0,
+                },
+            },
+            new_pos: {
+                x: 0,
+                y: 0,
+            },
+            new_pos_parent: {
+                x: 0,
+                y: 0,
+            },
+            time: {
+                start: 0,
+                end: 0,
+            },
+            touch: false,
+        };
+
+        // Merge Data and Options
+        mergeData(this.options, options);
+    }
+
+    enable(e?: LegacyEvent): void {
+        // Temporarily disableing this until I have time to fix some issues.
+        //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 }; //Dom.getPosition(this._el.move);
+        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";
+        //this._el.move.style.zIndex = "11";
+        //this._el.move.style.cursor = "move";
+    }
+
+    disable() {
+        DomEvent.removeListener(this._el.drag, this.dragevent.down, this._onDragStart, this);
+        DomEvent.removeListener(this._el.drag, this.dragevent.up, this._onDragEnd, this);
+    }
+
+    stopMomentum() {
+        if (this.animator) {
+            this.animator.stop();
+        }
+    }
+
+    updateConstraint(c: DraggableOptions["constraint"]): void {
+        this.options.constraint = c;
+
+        // Temporary until issues are fixed
+    }
+
+    /*	Private Methods
+	================================================== */
+    _onDragStart(e: LegacyEvent) {
+        if (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;
+            }
+        } else {
+            this.data.pagex.start = e.pageX;
+            this.data.pagey.start = e.pageY;
+        }
+
+        // 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";
+        }
+
+        if (this.options.enable.y) {
+            this._el.move.style.top = this.data.pagey.start - this._el.move.offsetHeight / 2 + "px";
+        }
+
+        this.data.pos.start = Dom.getPosition(this._el.drag);
+        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);
+    }
+
+    _onDragEnd(e: LegacyEvent) {
+        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.fire("dragend", this.data);
+
+        //  momentum
+        this._momentum();
+    }
+
+    _onDragMove(e: LegacyEvent) {
+        e.preventDefault();
+        this.data.sliding = true;
+
+        if (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;
+            }
+        } else {
+            this.data.pagex.end = e.pageX;
+            this.data.pagey.end = e.pageY;
+        }
+
+        this.data.pos.end = Dom.getPosition(this._el.drag);
+        this.data.new_pos.x = -(
+            this.data.pagex.start -
+            this.data.pagex.end -
+            this.data.pos.start.x
+        ); //-(this.data.pagex.start - this.data.pagex.end - this.data.pos.end.x);
+        this.data.new_pos.y = -(
+            this.data.pagey.start -
+            this.data.pagey.end -
+            this.data.pos.start.y
+        );
+
+        if (this.options.enable.x) {
+            this._el.move.style.left = this.data.new_pos.x + "px";
+        }
+
+        if (this.options.enable.y) {
+            this._el.move.style.top = this.data.new_pos.y + "px";
+        }
+
+        this.fire("dragmove", this.data);
+    }
+
+    _momentum() {
+        const pos_adjust = {
+                x: 0,
+                y: 0,
+                time: 0,
+            },
+            pos_change = {
+                x: 0,
+                y: 0,
+                time: 0,
+            };
+        let swipe = false;
+        const _swipe_direction = "";
+
+        if (touch) {
+            //this.options.momentum_multiplier = this.options.momentum_multiplier * 2;
+        }
+
+        pos_adjust.time = (Date.now() - this.data.time.start) * 10;
+        pos_change.time = (Date.now() - this.data.time.start) * 10;
+
+        pos_change.x =
+            this.options.momentum_multiplier *
+            (Math.abs(this.data.pagex.end) - Math.abs(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;
+
+        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 < 3000) {
+            swipe = true;
+        }
+
+        // Detect Direction
+        if (Math.abs(pos_change.x) > 10000) {
+            this.data.direction = "left";
+            if (pos_change.x > 0) {
+                this.data.direction = "right";
+            }
+        }
+        // Detect Swipe
+        if (Math.abs(pos_change.y) > 10000) {
+            this.data.direction = "up";
+            if (pos_change.y > 0) {
+                this.data.direction = "down";
+            }
+        }
+        this._animateMomentum();
+        if (swipe) {
+            this.fire("swipe_" + this.data.direction, this.data);
+        }
+    }
+
+    _animateMomentum() {
+        const pos = {
+                x: this.data.new_pos.x,
+                y: this.data.new_pos.y,
+            },
+            animate: AnimateOptions = {
+                duration: this.options.duration,
+                easing: easeOutStrong,
+            };
+
+        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;
+                }
+            }
+            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;
+                }
+            }
+            animate.left = Math.floor(pos.x) + "px";
+        }
+
+        this.animator = Animate(this._el.move, animate);
+
+        this.fire("momentum", this.data);
+    }
+}
+
+export class Draggable extends Evented(DraggableBase) {
+    constructor(...args: ConstructorParameters<typeof DraggableBase>) {
+        super(...args);
+    }
+}