@projektemacher/storymapjs 0.10.6 → 0.10.7

package/src/map/openlayers/MapMarker.OpenLayers.ts

@@ -0,0 +1,176 @@
+import Overlay from "ol/Overlay";
+import { fromLonLat } from "ol/proj";
+import type { Map as OlMap } from "ol";
+import MapMarker from "../MapMarker";
+import type { LatLngLiteral, MapMarkerData, StorymapOptions } from "../../types";
+
+/*	MapMarker.OpenLayers
+	Produces a marker for OpenLayers maps.
+
+	Default and image markers are rendered as HTML overlays so the
+	existing .vco-mapmarker styles apply unchanged.
+================================================= */
+
+export default class OpenLayersMapMarker extends MapMarker {
+    declare "_overlay": Overlay;
+
+    /*	Create Marker
+    ================================================== */
+    _createMarker(d?: MapMarkerData, o?: StorymapOptions): void {
+        if (d.location && typeof d.location.lat == "number" && typeof d.location.lon == "number") {
+            this.data.real_marker = true;
+            const use_custom_marker = o.use_custom_markers || d.location.use_custom_marker;
+            if (use_custom_marker && d.location.icon) {
+                this._custom_icon = {
+                    url: d.location.icon,
+                    size: d.location.iconSize || [48, 48],
+                    anchor: this._customIconAnchor(d.location.iconSize),
+                };
+            } else if (use_custom_marker && d.location.image) {
+                this._custom_image_icon = d.location.image;
+            }
+
+            this._marker = this._createMarkerElement(d, o);
+            this._marker.addEventListener("click", (e) => {
+                e.stopPropagation();
+                this._onMarkerClick(e);
+            });
+        }
+    }
+
+    _createMarkerElement(d: MapMarkerData, o?: StorymapOptions): HTMLDivElement {
+        const el = document.createElement("div");
+        el.title = d.text && d.text.headline ? d.text.headline : "";
+
+        if (this._custom_icon) {
+            // custom icon markers render only their image (like the
+            // original Leaflet L.icon): no vco-mapmarker class, otherwise
+            // the default pin glyph (::before) would show next to the image
+            el.className = "vco-mapmarker-custom";
+            const img = document.createElement("img");
+            img.src = this._custom_icon.url;
+            img.style.width = this._custom_icon.size[0] + "px";
+            img.style.height = "auto";
+            el.appendChild(img);
+            el.style.marginLeft = -this._custom_icon.anchor[0] + "px";
+            el.style.marginTop = -this._custom_icon.anchor[1] + "px";
+        } else if (this._custom_image_icon) {
+            el.className = "vco-mapmarker-image-icon";
+            const img = document.createElement("img");
+            img.src = this._custom_image_icon;
+            img.style.width = "48px";
+            img.style.height = "auto";
+            el.appendChild(img);
+            el.style.marginLeft = "-24px";
+            el.style.marginTop = "-48px";
+        } else {
+            el.className = "vco-mapmarker " + this.media_icon_class;
+        }
+        return el;
+    }
+
+    _addTo(m: OlMap): void {
+        if (this.data.real_marker) {
+            const d = this.data;
+            // Image-space maps (IIIF) use EPSG:4326 with raw image pixel coordinates
+            const is_image_space = m.getView().getProjection().getCode() === "EPSG:4326";
+            const position = is_image_space
+                ? [d.location.lon, d.location.lat]
+                : fromLonLat([d.location.lon, d.location.lat]);
+
+            // Default pins anchor on their tip: OL's inline styles override
+            // any CSS top/left, so the alignment is done here — bottom-center
+            // positioning plus a 1px offset lands the pin tip (the bottommost
+            // glyph pixel, measured against the coordinate via
+            // getPixelFromCoordinate) exactly on the coordinate, so the route
+            // lines meet the markers' tips.
+            const is_default_pin = !this._custom_icon && !this._custom_image_icon;
+            this._overlay = new Overlay({
+                element: this._marker,
+                position: position,
+                stopEvent: false,
+                ...(is_default_pin ? { positioning: "bottom-center", offset: [0, 1] } : {}),
+            });
+            m.addOverlay(this._overlay);
+        }
+    }
+
+    _removeFrom(m: OlMap): void {
+        if (this.data.real_marker && this._overlay) {
+            m.removeOverlay(this._overlay);
+        }
+    }
+
+    _active(a: boolean): void {
+        if (this.data.media && this.data.media.mediatype) {
+            this.media_icon_class = "vco-mapmarker-icon vco-icon-" + this.data.media.mediatype.type;
+        } else {
+            this.media_icon_class = "vco-mapmarker-icon vco-icon-plaintext";
+        }
+        if (this.data.real_marker) {
+            if (this._custom_icon) {
+                // custom icons look the same active or not (as in the
+                // original Leaflet version): only the stacking changes
+                if (!a) {
+                    clearTimeout(this.timer);
+                }
+                this._marker.style.zIndex = a ? "1000" : "";
+            } else if (this._custom_image_icon) {
+                if (a) {
+                    this._marker.classList.remove("vco-mapmarker-image-icon");
+                    this._marker.classList.add("vco-mapmarker-image-icon-active");
+                    this._marker.style.zIndex = "1000";
+                } else {
+                    clearTimeout(this.timer);
+                    this._marker.classList.remove("vco-mapmarker-image-icon-active");
+                    this._marker.classList.add("vco-mapmarker-image-icon");
+                    this._marker.style.zIndex = "";
+                }
+            } else if (a) {
+                this._marker.classList.remove("vco-mapmarker");
+                this._marker.classList.add("vco-mapmarker-active");
+                this._marker.style.zIndex = "1000";
+            } else {
+                clearTimeout(this.timer);
+                this._marker.classList.remove("vco-mapmarker-active");
+                this._marker.classList.add("vco-mapmarker");
+                this._marker.style.zIndex = "";
+            }
+            // place-name label on the active marker (issue #243)
+            const old_label = this._marker.querySelector(".vco-marker-label");
+            if (old_label) {
+                old_label.remove();
+            }
+            if (a && this.options.marker_labels && this.data.text?.headline) {
+                const label = document.createElement("div");
+                label.className = "vco-marker-label";
+                label.textContent = this.data.text.headline;
+                this._marker.appendChild(label);
+            }
+            // refresh media icon class
+            const icon_el = this._marker.querySelector(".vco-mapmarker-icon");
+            if (icon_el) {
+                icon_el.className = this.media_icon_class;
+            } else if (!this._custom_icon && !this._custom_image_icon) {
+                this._marker.className =
+                    (a ? "vco-mapmarker-active " : "vco-mapmarker ") + this.media_icon_class;
+            }
+        }
+    }
+
+    _customIconAnchor(size?: number[]): number[] {
+        if (size) {
+            return [size[0] * 0.5, size[1]];
+        } else {
+            return [24, 48];
+        }
+    }
+
+    _location(): LatLngLiteral {
+        if (this.data.real_marker) {
+            return { lat: this.data.location.lat, lon: this.data.location.lon };
+        } else {
+            return {} as LatLngLiteral;
+        }
+    }
+}

package/src/map/openlayers/zoomifyTiles.ts

@@ -0,0 +1,28 @@
+import type ImageTile from "ol/ImageTile";
+
+/** Zoomify tiles are always addressed on a 256px grid. */
+export const ZOOMIFY_TILE_SIZE = 256;
+
+/**
+ * Pad a cropped Zoomify edge tile onto a full tile canvas.
+ *
+ * Zoomify edge tiles are cropped to the image bounds (e.g. a 256x19 bottom
+ * strip), but OpenLayers draws the loaded image over the whole 256x256 tile
+ * box — stretching those strips across the cell (the smeared bottom in the
+ * Bosch overview, stretched right/bottom edges in the Literary Trail). The
+ * crop is top-left aligned in the tile cell, so draw it at (0, 0) and leave
+ * the rest transparent: the per-tile clamp of the original Leaflet renderer.
+ * Full-size tiles are left untouched for OpenLayers' own load handling.
+ */
+export function padCroppedZoomifyTile(tile: ImageTile, image: HTMLImageElement): void {
+    if (
+        image.naturalWidth !== ZOOMIFY_TILE_SIZE ||
+        image.naturalHeight !== ZOOMIFY_TILE_SIZE
+    ) {
+        const canvas = document.createElement("canvas");
+        canvas.width = ZOOMIFY_TILE_SIZE;
+        canvas.height = ZOOMIFY_TILE_SIZE;
+        canvas.getContext("2d")?.drawImage(image, 0, 0);
+        tile.setImage(canvas);
+    }
+}

package/src/map/types.ts

@@ -0,0 +1,17 @@
+// Shared types for the map classes (src/map).
+
+import type { StorymapSlideLocation } from "../types";
+
+/** Options accepted by viewTo/_viewTo. */
+export interface ViewToOptions {
+    calculate_zoom?: boolean;
+    duration?: number;
+    zoom?: number;
+}
+
+/** A point of the connection line: either a slide or a raw lat/lon pair. */
+export interface LinePoint {
+    location?: StorymapSlideLocation;
+    lat?: number;
+    lon?: number;
+}

package/src/media/EmbedUtil.ts

@@ -0,0 +1,168 @@
+/*	EmbedUtil
+	Utilities for safely rendering user-pasted embed snippets.
+
+	The media "url" field is overloaded: for the iframe and blockquote
+	media types it holds raw HTML pasted by the user (that markup is
+	what routes the media to those types in MediaType.js). These helpers
+	parse that HTML inertly -- DOMParser never executes scripts or event
+	handlers -- and rebuild clean DOM from an allowlist, so markup stored
+	in a storymap's JSON can never execute code in a viewer's browser.
+================================================== */
+
+// Attributes copied from a pasted <iframe> onto the rebuilt element.
+// src is handled separately (validated); everything else is dropped.
+const IFRAME_ATTRIBUTES = [
+    "width",
+    "height",
+    "frameborder",
+    "allowfullscreen",
+    "allow",
+    "scrolling",
+    "title",
+];
+
+// Tags allowed to survive blockquote sanitization. Elements not listed
+// are unwrapped (their children are kept); DROP_TAGS are removed along
+// with their contents.
+const BLOCKQUOTE_TAGS = [
+    "BLOCKQUOTE",
+    "P",
+    "CITE",
+    "EM",
+    "STRONG",
+    "B",
+    "I",
+    "U",
+    "Q",
+    "A",
+    "BR",
+    "SPAN",
+    "SMALL",
+    "SUP",
+    "SUB",
+    "FOOTER",
+    "UL",
+    "OL",
+    "LI",
+];
+const DROP_TAGS = [
+    "SCRIPT",
+    "STYLE",
+    "TEMPLATE",
+    "IFRAME",
+    "FRAME",
+    "OBJECT",
+    "EMBED",
+    "APPLET",
+    "LINK",
+    "META",
+    "BASE",
+    "SVG",
+    "MATH",
+    "FORM",
+    "INPUT",
+    "BUTTON",
+    "TEXTAREA",
+    "SELECT",
+];
+
+function parseInert(html: string): Document {
+    return new DOMParser().parseFromString(html, "text/html");
+}
+
+/*	Return an absolute http(s) URL for url, or null if it is empty,
+	unparseable, or uses any other protocol (javascript:, data:, ...).
+	Relative and protocol-relative URLs resolve against the document.
+================================================== */
+export function validateWebURL(url: string | null): string | null {
+    if (!url) {
+        return null;
+    }
+    const a = document.createElement("a");
+    a.href = url;
+    if (a.protocol === "http:" || a.protocol === "https:") {
+        return a.href;
+    }
+    return null;
+}
+
+/*	Build a clean <iframe> element from a pasted embed snippet.
+	Only the validated src and allowlisted presentation attributes
+	survive; event handlers, extra tags and scripts are discarded.
+	Also accepts a bare URL for the src. Returns null if no safe
+	src can be extracted.
+================================================== */
+export function buildIframe(html: string): HTMLIFrameElement | null {
+    const pasted = parseInert(html).querySelector("iframe");
+    let src: string | null = null;
+
+    if (pasted) {
+        src = validateWebURL(pasted.getAttribute("src"));
+    } else if (/^https?:\/\/\S+$/i.test(html.trim())) {
+        // The field held a bare URL rather than an embed snippet
+        src = validateWebURL(html.trim());
+    }
+    if (!src) {
+        return null;
+    }
+
+    const iframe = document.createElement("iframe");
+    iframe.setAttribute("src", src);
+    if (pasted) {
+        for (let i = 0; i < IFRAME_ATTRIBUTES.length; i++) {
+            if (pasted.hasAttribute(IFRAME_ATTRIBUTES[i])) {
+                iframe.setAttribute(
+                    IFRAME_ATTRIBUTES[i],
+                    pasted.getAttribute(IFRAME_ATTRIBUTES[i]),
+                );
+            }
+        }
+    } else {
+        iframe.setAttribute("width", "100%");
+        iframe.setAttribute("height", "100%");
+        iframe.setAttribute("frameborder", "0");
+        iframe.setAttribute("allowfullscreen", "");
+    }
+    return iframe;
+}
+
+/*	Sanitize pasted blockquote markup into a DocumentFragment.
+	Allowlisted formatting tags are kept (with all attributes stripped,
+	except a validated href on links), unknown tags are unwrapped, and
+	executable/embedding tags are dropped with their contents.
+================================================== */
+export function sanitizeBlockquote(html: string): DocumentFragment {
+    const fragment = document.createDocumentFragment();
+    appendSanitized(parseInert(html).body, fragment);
+    return fragment;
+}
+
+function appendSanitized(node: Node, parent: Node): void {
+    for (let i = 0; i < node.childNodes.length; i++) {
+        const child = node.childNodes[i];
+        if (child.nodeType === 3) {
+            parent.appendChild(document.createTextNode(child.nodeValue));
+        } else if (child.nodeType === 1) {
+            const tag = child.nodeName.toUpperCase();
+            if (DROP_TAGS.includes(tag)) {
+                continue;
+            }
+            if (BLOCKQUOTE_TAGS.includes(tag)) {
+                const el = document.createElement(tag);
+                if (tag === "A") {
+                    const href = validateWebURL((child as Element).getAttribute("href"));
+                    if (href) {
+                        el.setAttribute("href", href);
+                        el.setAttribute("target", "_blank");
+                    }
+                }
+                appendSanitized(child, el);
+                parent.appendChild(el);
+            } else {
+                // Unknown tag: unwrap, keeping its children
+                appendSanitized(child, parent);
+            }
+        }
+        // Comments and other node types are dropped
+    }
+}