@projektemacher/storymapjs 0.10.5 → 0.10.7

package/src/media/types/DailyMotion.ts

@@ -0,0 +1,58 @@
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+import { Language } from "../../language/Language";
+import { ratio } from "../../core/Util";
+
+/*	Media.DailyMotion
+================================================== */
+
+export default class DailyMotion extends Media {
+    declare "media_id": string;
+
+    /*	Load the media
+	================================================== */
+    _loadMedia() {
+        // Loading Message
+        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
+
+        // Create Dom element
+        this._el.content_item = Dom.create(
+            "div",
+            "vco-media-item vco-media-iframe vco-media-dailymotion",
+            this._el.content,
+        );
+
+        // Get Media ID
+        const id = this.data.url.match("video")
+            ? this.data.url.split("video/")[1]
+            : this.data.url.split("embed/")[1];
+        if (!id) {
+            throw new Error("Invalid DailyMotion URL");
+        }
+        this.media_id = id.split(/[?&]/)[0];
+
+        // API URL
+        const api_url =
+            "https://www.dailymotion.com/embed/video/" + this.media_id + "?api=postMessage";
+
+        // API Call
+        this._el.content_item.innerHTML =
+            "<iframe autostart='false' frameborder='0' width='100%' height='100%' src='" +
+            api_url +
+            "'></iframe>";
+
+        // After Loaded
+        this.onLoaded();
+    }
+
+    // Update Media Display
+    _updateMediaDisplay() {
+        this._el.content_item.style.height =
+            ratio.r16_9({ w: this._el.content_item.offsetWidth }) + "px";
+    }
+
+    _stopMedia() {
+        const iframe = this._el.content_item?.querySelector("iframe") as HTMLIFrameElement | null;
+        iframe?.contentWindow?.postMessage('{"command":"pause","parameters":[]}', "*");
+    }
+}

package/src/media/types/DocumentCloud.ts

@@ -0,0 +1,41 @@
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+import { Language } from "../../language/Language";
+import { validateWebURL } from "../EmbedUtil";
+
+/*	Media.DocumentCloud
+	Embeds a DocumentCloud document viewer (issue #437)
+================================================= */
+
+export default class DocumentCloud extends Media {
+    /*	Load the media
+	================================================== */
+    _loadMedia() {
+        // Loading Message
+        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
+
+        // Create Dom element
+        this._el.content_item = Dom.create(
+            "div",
+            "vco-media-item vco-media-iframe vco-media-documentcloud",
+            this._el.content,
+        );
+
+        // the canonical document URL renders the standalone viewer; rebuilt
+        // from a validated src to keep stored XSS out of the storymap JSON
+        const src = validateWebURL(this.data.url);
+        if (!src) {
+            this.loadErrorDisplay("Invalid URL.");
+            return;
+        }
+        const iframe = document.createElement("iframe");
+        iframe.setAttribute("src", src);
+        this._el.content_item.appendChild(iframe);
+        this.onLoaded();
+    }
+
+    // Update Media Display
+    _updateMediaDisplay() {
+        this._el.content_item.style.height = this.options.height + "px";
+    }
+}

package/src/media/types/Facebook.ts

@@ -0,0 +1,41 @@
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+import { Language } from "../../language/Language";
+
+/*	Media.Facebook
+	Embeds a Facebook post, video or reel via the plugins endpoint
+	(issue #272)
+================================================== */
+
+export default class Facebook extends Media {
+    /*	Load the media
+	================================================== */
+    _loadMedia() {
+        // Loading Message
+        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
+
+        // Create Dom element
+        this._el.content_item = Dom.create(
+            "div",
+            "vco-media-item vco-media-iframe vco-media-facebook",
+            this._el.content,
+        );
+
+        const url = this.data.url;
+        const href = encodeURIComponent(url);
+        const embed =
+            /\/videos?\//.test(url) || /\/watch/.test(url) || /\/reel\//.test(url)
+                ? `https://www.facebook.com/plugins/video.php?href=${href}&show_text=true`
+                : `https://www.facebook.com/plugins/post.php?href=${href}&show_text=true`;
+        this._el.content_item.innerHTML =
+            `<iframe src="${embed}" scrolling="no" frameborder="0" ` +
+            `allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; ` +
+            `picture-in-picture; web-share"></iframe>`;
+        this.onLoaded();
+    }
+
+    // Update Media Display
+    _updateMediaDisplay() {
+        this._el.content_item.style.height = this.options.height + "px";
+    }
+}

package/src/media/types/Flickr.ts

@@ -0,0 +1,115 @@
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+import { Language } from "../../language/Language";
+
+/*	Media.Flickr
+
+================================================== */
+
+export default class Flickr extends Media {
+    declare "media_id": string;
+
+    /*	Load the media
+	================================================== */
+    _loadMedia() {
+        // Loading Message
+        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
+
+        // Create Dom element
+        this._el.content_item = Dom.create(
+            "img",
+            "vco-media-item vco-media-image vco-media-flickr vco-media-shadow",
+            this._el.content,
+        );
+
+        // Media Loaded Event
+        this._el.content_item.addEventListener("load", (e) => {
+            this.onMediaLoaded();
+        });
+
+        // Get Media ID
+        this.establishMediaID();
+
+        const api_url =
+            "https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key=" +
+            this.options.api_key_flickr +
+            "&photo_id=" +
+            this.media_id +
+            "&format=json&nojsoncallback=1";
+
+        void this._fetchSizes(api_url);
+    }
+
+    async _fetchSizes(api_url: string) {
+        try {
+            const response = await fetch(api_url);
+            const d = (await response.json()) as { stat: string };
+            if (d.stat === "ok") {
+                this.createMedia(d);
+            } else {
+                this.loadErrorDisplay("Photo not found or private.");
+            }
+        } catch {
+            this.loadErrorDisplay("Photo not found or private.");
+        }
+    }
+
+    establishMediaID() {
+        const marker = "flickr.com/photos/";
+        const idx = this.data.url.indexOf(marker);
+        if (idx === -1) {
+            throw "Invalid Flickr URL";
+        }
+        const pos = idx + marker.length;
+        this.media_id = this.data.url.slice(pos).split("/")[1];
+    }
+
+    createMedia(d: unknown) {
+        const data = d as { sizes: { size: { label: string; source: string }[] } };
+        const best_size = this.sizes(this.options.height);
+        const sizes = data?.sizes?.size;
+        if (!sizes || !sizes.length) {
+            this.loadErrorDisplay("Photo not found or private.");
+            return;
+        }
+        let size = sizes[Math.max(0, sizes.length - 2)].source;
+
+        for (let i = 0; i < sizes.length; i++) {
+            if (sizes[i].label === best_size) {
+                size = sizes[i].source;
+            }
+        }
+
+        // Set Image Source
+        (this._el.content_item as HTMLImageElement).src = size;
+
+        // After Loaded
+        this.onLoaded();
+    }
+
+    sizes(s: number): string {
+        let _size;
+
+        if (s <= 75) {
+            if (s <= 0) {
+                _size = "Large";
+            } else {
+                _size = "Thumbnail";
+            }
+        } else if (s <= 180) {
+            _size = "Small";
+        } else if (s <= 240) {
+            _size = "Small 320";
+        } else if (s <= 375) {
+            _size = "Medium";
+        } else if (s <= 480) {
+            _size = "Medium 640";
+        } else if (s <= 600) {
+            _size = "Large";
+        } else {
+            _size = "Large";
+        }
+
+        return _size;
+    }
+}

package/src/media/types/GoogleDoc.ts

@@ -0,0 +1,59 @@
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+import { Language } from "../../language/Language";
+import { validateWebURL } from "../EmbedUtil";
+
+/*	Media.GoogleDoc
+
+================================================= */
+
+export default class GoogleDoc extends Media {
+    declare "media_id": string;
+
+    /*	Load the media
+	================================================== */
+    _loadMedia() {
+        // Loading Message
+        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
+
+        // Create Dom element
+        this._el.content_item = Dom.create(
+            "div",
+            "vco-media-item vco-media-iframe",
+            this._el.content,
+        );
+
+        // Get Media ID
+        this.media_id = this.data.url;
+
+        // Rebuild a clean iframe from a validated src: injecting the raw
+        // URL into markup would allow stored XSS via the storymap JSON
+        const src = validateWebURL(this.media_id);
+        if (!src) {
+            this.loadErrorDisplay("Invalid URL.");
+            return;
+        }
+        const iframe = document.createElement("iframe");
+        iframe.className = "doc";
+        iframe.setAttribute("frameborder", "0");
+        iframe.setAttribute("width", "100%");
+        iframe.setAttribute("height", "100%");
+        if (this.media_id.match(/docs.google.com/i)) {
+            iframe.setAttribute("src", src + "&embedded=true");
+        } else {
+            iframe.setAttribute(
+                "src",
+                "http://docs.google.com/viewer?url=" + encodeURIComponent(src) + "&embedded=true",
+            );
+        }
+        this._el.content_item.appendChild(iframe);
+
+        // After Loaded
+        this.onLoaded();
+    }
+
+    // Update Media Display
+    _updateMediaDisplay() {
+        this._el.content_item.style.height = this.options.height + "px";
+    }
+}

package/src/media/types/IFrame.ts

@@ -0,0 +1,51 @@
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+import { Language } from "../../language/Language";
+import { buildIframe } from "../EmbedUtil";
+
+/*	Media.IFrame
+================================================== */
+
+export default class IFrame extends Media {
+    declare "media_id": string;
+
+    /*	Load the media
+	================================================== */
+    _loadMedia() {
+        // Loading Message
+        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
+
+        // Create Dom element
+        this._el.content_item = Dom.create(
+            "div",
+            "vco-media-item vco-media-iframe",
+            this._el.content,
+        );
+
+        // Get Media ID
+        this.media_id = this.data.url;
+
+        // The url field holds a user-pasted embed snippet. Rebuild a
+        // clean iframe from its src instead of injecting the raw markup,
+        // which would allow stored XSS via the storymap JSON.
+        const iframe = buildIframe(this.media_id);
+
+        if (!iframe) {
+            this.loadErrorDisplay(
+                "Invalid embed code. Paste an iframe embed code with an http(s) source URL.",
+            );
+            return;
+        }
+
+        // API Call
+        this._el.content_item.appendChild(iframe);
+
+        // After Loaded
+        this.onLoaded();
+    }
+
+    // Update Media Display
+    _updateMediaDisplay() {
+        this._el.content_item.style.height = this.options.height + "px";
+    }
+}

package/src/media/types/Image.ts

@@ -0,0 +1,49 @@
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+import { Language } from "../../language/Language";
+
+/*	Media.Image
+	Produces image assets.
+	Takes a data object and populates a dom object
+================================================== */
+
+export default class Image extends Media {
+    /*	Load the media
+	================================================== */
+    _loadMedia() {
+        // Loading Message
+        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
+
+        // Link
+        if (this.data.link) {
+            this._el.content_link = Dom.create("a", "", this._el.content);
+            const content_link = this._el.content_link as HTMLAnchorElement;
+            content_link.href = this.data.link;
+            content_link.target = "_blank";
+            this._el.content_item = Dom.create(
+                "img",
+                "vco-media-item vco-media-image vco-media-shadow",
+                this._el.content_link,
+            );
+        } else {
+            this._el.content_item = Dom.create(
+                "img",
+                "vco-media-item vco-media-image vco-media-shadow",
+                this._el.content,
+            );
+        }
+
+        // Media Loaded Event
+        this._el.content_item.addEventListener("load", (e) => {
+            this.onMediaLoaded();
+        });
+
+        (this._el.content_item as HTMLImageElement).src = this.data.url;
+
+        this.onLoaded();
+    }
+
+    _updateMediaDisplay(layout?: string) {
+        // modern browsers size media correctly without engine-specific fixes
+    }
+}

package/src/media/types/Juxtapose.ts

@@ -0,0 +1,32 @@
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+import { Language } from "../../language/Language";
+
+/*	Media.Juxtapose
+	Embeds a JuxtaposeJS before/after slider (issue #360)
+================================================== */
+
+export default class Juxtapose extends Media {
+    /*	Load the media
+	================================================== */
+    _loadMedia() {
+        // Loading Message
+        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
+
+        // Create Dom element
+        this._el.content_item = Dom.create(
+            "div",
+            "vco-media-item vco-media-iframe vco-media-juxtapose",
+            this._el.content,
+        );
+
+        // published Juxtapose URLs are iframe-ready embeds
+        this._el.content_item.innerHTML = `<iframe src="${this.data.url}" />`;
+        this.onLoaded();
+    }
+
+    // Update Media Display
+    _updateMediaDisplay() {
+        this._el.content_item.style.height = this.options.height + "px";
+    }
+}

package/src/media/types/SoundCloud.ts

@@ -0,0 +1,77 @@
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+import { Language } from "../../language/Language";
+
+/*	Media.SoundCloud
+================================================== */
+
+/*	Minimal surface of the SoundCloud widget API used here. */
+interface SoundCloudWidget {
+    pause: () => void;
+}
+
+export default class SoundCloud extends Media {
+    declare "media_id": string;
+    declare "soundCloudCreated": boolean;
+    declare "widget": SoundCloudWidget;
+
+    /*	Load the media
+	================================================== */
+    async _loadMedia() {
+        // Loading Message
+        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
+
+        // Create Dom element
+        this._el.content_item = Dom.create(
+            "div",
+            "vco-media-item vco-media-iframe vco-media-soundcloud vco-media-shadow",
+            this._el.content,
+        );
+
+        // Get Media ID
+        this.media_id = this.data.url;
+
+        // API URL
+        const api_url = "https://soundcloud.com/oembed?url=" + this.media_id + "&format=json";
+
+        // API Call
+        try {
+            const r = await fetch(api_url);
+            const d = await r.json();
+            await this.loadScript("https://w.soundcloud.com/player/api.js");
+            //load soundcloud api for pausing.
+            this.createMedia(d);
+        } catch (err) {
+            // aborted loads stay silent (the visitor navigated away);
+            // real failures show the media error display
+            if ((err as DOMException)?.name !== "AbortError") {
+                this.loadErrorDisplay("Unable to load this track.");
+            }
+        }
+    }
+
+    createMedia(d: unknown) {
+        const data = d as { html: string };
+        if (!data?.html) {
+            this.loadErrorDisplay("Unable to load this track.");
+            return;
+        }
+        this._el.content_item.innerHTML = data.html;
+
+        this.soundCloudCreated = true;
+
+        const sc = SC as { Widget: (iframe: Element | null) => SoundCloudWidget };
+        // per-instance widget: a global would be overwritten by every
+        // SoundCloud slide and _stopMedia would pause the wrong one
+        this.widget = sc.Widget(this._el.content_item.querySelector("iframe"));
+
+        // After Loaded
+        this.onLoaded();
+    }
+
+    _stopMedia() {
+        if (this.soundCloudCreated) {
+            this.widget?.pause();
+        }
+    }
+}