@projektemacher/storymapjs 0.10.5 → 0.10.7

package/src/media/types/Text.ts

@@ -0,0 +1,172 @@
+import { mergeData, setData, htmlify, convertUnixTime } from "../../core/Util";
+import { Evented, type EventedInstance } from "../../core/mixins";
+import Dom from "../../dom/Dom";
+
+interface TextData {
+    uniqueid?: string | null;
+    headline?: string;
+    text?: string;
+    text_align?: string;
+    date?: { created_time?: string; [key: string]: unknown } | null;
+}
+
+interface TextOptions {
+    title?: boolean;
+    text_align?: string;
+}
+
+class TextBase {
+    declare "_el": Record<string, HTMLElement>;
+    declare "data": TextData;
+    declare "options": TextOptions;
+    declare "fire": EventedInstance["fire"];
+
+    /*	Constructor
+	================================================== */
+    constructor(data: TextData, options?: TextOptions, add_to_container?: HTMLElement) {
+        // DOM ELEMENTS
+        this._el = {
+            container: {} as HTMLElement,
+            content_container: {} as HTMLElement,
+            content: {} as HTMLElement,
+            headline: {} as HTMLElement,
+            date: {} as HTMLElement,
+            start_btn: {} as HTMLElement,
+        };
+
+        // Data
+        this.data = {
+            uniqueid: "",
+            headline: "headline",
+            text: "text",
+        };
+
+        // Options
+        this.options = {
+            title: false,
+        };
+
+        setData(this, data);
+
+        // Merge Options
+        mergeData(this.options, options);
+
+        this._el.container = Dom.create("div", "vco-text");
+        this._el.container.id = this.data.uniqueid;
+
+        this._initLayout();
+
+        if (add_to_container) {
+            add_to_container.appendChild(this._el.container);
+        }
+    }
+
+    /*	Adding, Hiding, Showing etc
+	================================================== */
+    show() {}
+
+    hide() {}
+
+    addTo(container: HTMLElement) {
+        container.appendChild(this._el.container);
+        //this.onAdd();
+    }
+
+    removeFrom(container: HTMLElement) {
+        container.removeChild(this._el.container);
+    }
+
+    headlineHeight() {
+        return this._el.headline.offsetHeight + 40;
+    }
+
+    addDateText(str: string) {
+        if (this._el.date) {
+            this._el.date.innerHTML = str;
+        }
+    }
+
+    /*	Events
+	================================================== */
+    onLoaded() {
+        this.fire("loaded", this.data);
+    }
+
+    onAdd() {
+        this.fire("added", this.data);
+    }
+
+    onRemove() {
+        this.fire("removed", this.data);
+    }
+
+    /*	Private Methods
+	================================================== */
+    _initLayout() {
+        // Create Layout
+        this._el.content_container = Dom.create(
+            "div",
+            "vco-text-content-container",
+            this._el.container,
+        );
+
+        // Text alignment: per-slide override wins, then the storymap option
+        // (issue #244)
+        const align =
+            (this.data.text_align as string | undefined) ??
+            (this.options.text_align as string | undefined) ??
+            "left";
+        if (align === "center" || align === "right") {
+            this._el.content_container.classList.add("vco-text-align-" + align);
+        }
+
+        // Date (only rendered when the slide has one; issue #286)
+        if (this.data.date && this.data.date.created_time && this.data.date.created_time !== "") {
+            this._el.date = Dom.create("h3", "vco-headline-date", this._el.content_container);
+            this.addDateText(convertUnixTime(this.data.date.created_time));
+        }
+
+        // Headline
+        if (this.data.headline !== "") {
+            let headline_class = "vco-headline";
+            if (this.options.title) {
+                headline_class = "vco-headline vco-headline-title";
+            }
+            this._el.headline = Dom.create("h2", headline_class, this._el.content_container);
+            this._el.headline.innerHTML = this.data.headline;
+        }
+
+        // Text
+        if (this.data.text !== "") {
+            let text_content = "";
+
+            text_content += htmlify(this.data.text);
+
+            // Date
+            if (
+                this.data.date &&
+                this.data.date.created_time &&
+                this.data.date.created_time !== ""
+            ) {
+                if (this.data.date.created_time.length > 10) {
+                    text_content +=
+                        "<div class='vco-text-date'>" +
+                        convertUnixTime(this.data.date.created_time) +
+                        "</div>";
+                }
+            }
+
+            this._el.content = Dom.create("div", "vco-text-content", this._el.content_container);
+            this._el.content.innerHTML = text_content;
+        }
+
+        // Fire event that the slide is loaded
+        this.onLoaded();
+    }
+}
+
+export default class Text extends Evented(TextBase) {
+    constructor(...args: ConstructorParameters<typeof TextBase>) {
+        super(...args);
+    }
+}

package/src/media/types/Twitter.ts

@@ -0,0 +1,96 @@
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+import { Language } from "../../language/Language";
+import { loadJSONP, uniqueGlobalName } from "../../core/Load";
+
+/*	Media.Twitter
+	Produces Twitter Display
+================================================== */
+
+export default class Twitter extends Media {
+    declare "user_id": string;
+    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-twitter", this._el.content);
+
+        // Get Media ID
+
+        const r = /(?:twitter\.com|x\.com)\/(.+?)\/status\/(\d+)/;
+        const match = r.exec(this.data.url);
+        if (match) {
+            this.user_id = match[1];
+            this.media_id = match[2];
+        }
+        const callbackName = uniqueGlobalName(`twitterCallback_${this.media_id}`);
+        const api_url = `https://api.twitter.com/1/statuses/oembed.json?id=${this.media_id}&include_entities=true&callback=${callbackName}`;
+        void this._fetchEmbed(api_url, callbackName);
+    }
+
+    async _fetchEmbed(api_url: string, callbackName: string) {
+        try {
+            this.createMedia(await loadJSONP<unknown>(api_url, callbackName));
+        } catch {
+            this.loadErrorDisplay("Unable to load this tweet.");
+        }
+    }
+
+    createMedia(d: unknown) {
+        const data = d as { html: string; author_url: string; author_name: string };
+        let tweet = "",
+            tweet_text;
+
+        //	TWEET CONTENT
+        tweet_text = data.html.split("</p>&mdash;")[0] + "</p></blockquote>";
+        // the oembed endpoint returns x.com URLs since the rebrand — parse both
+        const tweetuser = data.author_url.split(/twitter\.com|x\.com\//)[1];
+        const tweet_status_temp = data.html.split("</p>&mdash;")[1].split('<a href="')[1];
+        const tweet_status_url = tweet_status_temp.split('">')[0];
+        const tweet_status_date = tweet_status_temp.split('">')[1].split("</a>")[0];
+
+        // Open links in new window
+        tweet_text = tweet_text.replace(/<a href/gi, '<a target="_blank" href');
+
+        // 	TWEET CONTENT
+        tweet += tweet_text;
+
+        //	TWEET AUTHOR
+        tweet += "<div class='vcard'>";
+        tweet +=
+            "<a href='" +
+            tweet_status_url +
+            "' class='twitter-date' target='_blank'>" +
+            tweet_status_date +
+            "</a>";
+        tweet += "<div class='author'>";
+        tweet += "<a class='screen-name url' href='" + data.author_url + "' target='_blank'>";
+        tweet += "<span class='avatar'></span>";
+        tweet +=
+            "<span class='fn'>" +
+            data.author_name +
+            " <span class='vco-icon-twitter'></span></span>";
+        tweet +=
+            "<span class='nickname'>@" +
+            tweetuser +
+            "<span class='thumbnail-inline'></span></span>";
+        tweet += "</a>";
+        tweet += "</div>";
+        tweet += "</div>";
+
+        // Add to DOM
+        this._el.content_item.innerHTML = tweet;
+
+        // After Loaded
+        this.onLoaded();
+    }
+
+    updateMediaDisplay() {}
+
+    _updateMediaDisplay() {}
+}

package/src/media/types/Video.ts

@@ -0,0 +1,84 @@
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+import { Language } from "../../language/Language";
+
+/*	Media.Vimeo
+================================================== */
+
+export default class Video extends Media {
+    declare "player_element": HTMLMediaElement;
+
+    /*	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(
+            "video",
+            "vco-media-item vco-media-video vco-media-shadow",
+            this._el.content,
+        );
+        const media_item = this._el.content_item as HTMLMediaElement;
+        media_item.controls = true;
+        this._el.source_item = Dom.create("source", "", this._el.content_item);
+        const source_item = this._el.source_item as HTMLSourceElement;
+
+        // Media Loaded Event
+        media_item.addEventListener("canplay", () => {
+            this.onLoaded();
+        });
+
+        // Load Error Event (the source element fires it, not the media element)
+        source_item.addEventListener("error", () => {
+            this.loadErrorDisplay(Language.messages.error + " " + this.options.media_name);
+        });
+
+        source_item.src = this.data.url;
+        const media_type = this._getType(this.data.url, this.data.mediatype.match_str);
+        if (media_type) {
+            source_item.type = media_type;
+        }
+        // append as a text node: re-serializing innerHTML would replace the
+        // source element and drop its error listener, leaving the loading
+        // message on screen forever
+        media_item.appendChild(
+            document.createTextNode(
+                "Your browser doesn't support HTML5 video with " + source_item.type,
+            ),
+        );
+        this.player_element = media_item;
+    }
+
+    // Update Media Display
+    _updateMediaDisplay() {
+        // video height is CSS-driven; nothing to compute here
+    }
+
+    _stopMedia() {
+        if (this.player_element) {
+            this.player_element.pause();
+        }
+    }
+
+    _getType(url: string, reg: string | RegExp) {
+        const ext = url.match(reg);
+        let type = "video/";
+        if (!ext) {
+            return type;
+        }
+        switch (ext[1]) {
+            case "mp4":
+                type += "mp4";
+                break;
+            case "webm":
+                type += "webm";
+                break;
+            default:
+                type = "";
+                break;
+        }
+        return type;
+    }
+}

package/src/media/types/Vimeo.ts

@@ -0,0 +1,65 @@
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+import { Language } from "../../language/Language";
+import { ratio } from "../../core/Util";
+
+/*	Media.Vimeo
+================================================== */
+
+export default class Vimeo extends Media {
+    declare "media_id": string;
+    declare "player": HTMLIFrameElement;
+
+    /*	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-vimeo vco-media-shadow",
+            this._el.content,
+        );
+
+        // Get Media ID
+        const parts = this.data.url.split(/video\/|\/\/vimeo\.com\//);
+        if (!parts[1]) {
+            throw new Error("Invalid Vimeo URL");
+        }
+        this.media_id = parts[1].split(/[?&]/)[0];
+
+        // API URL
+        const api_url =
+            "https://player.vimeo.com/video/" +
+            this.media_id +
+            "?api=1&title=0&byline=0&portrait=0&color=ffffff";
+
+        this.player = Dom.create("iframe", "", this._el.content_item) as HTMLIFrameElement;
+        this.player.width = "100%";
+        this.player.height = "100%";
+        this.player.frameBorder = "0";
+        this.player.src = api_url;
+
+        // 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() {
+        try {
+            this.player?.contentWindow?.postMessage(
+                JSON.stringify({ method: "pause" }),
+                "https://player.vimeo.com",
+            );
+        } catch (err) {
+            console.log(err);
+        }
+    }
+}

package/src/media/types/Website.ts

@@ -0,0 +1,36 @@
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+import { Language } from "../../language/Language";
+import { validateWebURL } from "../EmbedUtil";
+
+/*	Media.Website
+================================================= */
+
+export default class Website extends Media {
+    declare "media_id": string;
+
+    _loadMedia() {
+        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
+        this._el.content_item = Dom.create(
+            "div",
+            "vco-media-item vco-media-iframe",
+            this._el.content,
+        );
+        this.media_id = this.data.url;
+        // rebuild a clean iframe from a validated src: injecting the raw
+        // URL as 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.setAttribute("src", src);
+        this._el.content_item.appendChild(iframe);
+        this.onLoaded();
+    }
+
+    _updateMediaDisplay() {
+        this._el.content_item.style.height = this.options.height + "px";
+    }
+}

package/src/media/types/Wikipedia.ts

@@ -0,0 +1,124 @@
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+import { Language } from "../../language/Language";
+import { getObjectAttributeByIndex } from "../../core/Util";
+import { loadJSONP, uniqueGlobalName } from "../../core/Load";
+
+/*	Media.Wikipedia
+================================================== */
+
+const CALLBACK_PREFIX = "wikipediaCallback_";
+const MAX_ID_LENGTH = 512 - CALLBACK_PREFIX.length;
+
+/**
+ * Split a Wikipedia article URL into its decoded title and language subdomain.
+ * Underscores and percent-encoding both decode to spaces; hash fragments are
+ * stripped. Falls back to the raw path segment when decoding fails.
+ */
+export function parseWikipediaUrl(pageUrl: string): { title: string; language: string } {
+    const raw = pageUrl.split("wiki/")[1].split("#")[0];
+    const underscored = raw.replace(/_/g, " ");
+    let title: string;
+    try {
+        title = decodeURIComponent(underscored);
+    } catch {
+        title = underscored;
+    }
+    const language = pageUrl.split("//")[1].split(".wikipedia")[0];
+    return { title, language };
+}
+
+/** The deterministic part of the JSONP callback name for an article title. */
+export function wikipediaCallbackBase(title: string): string {
+    return CALLBACK_PREFIX + title.replace(/[^0-9a-z]/gi, "").slice(0, MAX_ID_LENGTH);
+}
+
+/** The MediaWiki extracts API URL for a title, wrapping its answer in `callbackName`. */
+export function wikipediaApiUrl(language: string, title: string, callbackName: string): string {
+    return `https://${language}.wikipedia.org/w/api.php?action=query&prop=extracts&redirects=&titles=${encodeURIComponent(title)}&exintro=1&format=json&callback=${callbackName}`;
+}
+
+export default class Wikipedia 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-wikipedia",
+            this._el.content,
+        );
+
+        // Get Media ID
+        const { title, language } = parseWikipediaUrl(this.data.url);
+        this.media_id = title;
+        // Claim a unique global slot: same-article concurrent loads must not
+        // share one (the loser's script would call a deleted global).
+        const callbackName = uniqueGlobalName(wikipediaCallbackBase(title));
+        const api_url = wikipediaApiUrl(language, title, callbackName);
+        void this._fetchExtract(api_url, callbackName);
+    }
+
+    async _fetchExtract(api_url: string, callbackName: string) {
+        try {
+            this.createMedia(await loadJSONP<unknown>(api_url, callbackName));
+        } catch {
+            this.loadErrorDisplay("Unable to load this article.");
+        }
+    }
+
+    createMedia(d: unknown) {
+        const data = d as { query?: unknown };
+        if (data.query) {
+            let content;
+            const wiki = {
+                entry: {} as Record<string, string>,
+                title: "",
+                text: "",
+                extract: "",
+                paragraphs: 1,
+                text_array: [] as string[],
+            };
+
+            const pages = data.query as { pages: Record<string, unknown> };
+            wiki.entry = getObjectAttributeByIndex(pages.pages, 0) as Record<string, string>;
+            wiki.extract = wiki.entry.extract;
+            wiki.title = wiki.entry.title;
+
+            if (wiki.extract.match("<p>")) {
+                wiki.text_array = wiki.extract.split("<p>");
+            } else {
+                wiki.text_array.push(wiki.extract);
+            }
+
+            for (let i = 0; i < wiki.text_array.length; i++) {
+                if (i + 1 <= wiki.paragraphs && i + 1 < wiki.text_array.length) {
+                    wiki.text += "<p>" + wiki.text_array[i + 1];
+                }
+            }
+
+            content =
+                "<h4><a href='" + this.data.url + "' target='_blank'>" + wiki.title + "</a></h4>";
+            content += "<span class='wiki-source'>" + Language.messages.wikipedia + "</span>";
+            content += wiki.text;
+
+            if (wiki.extract.match("REDIRECT")) {
+                // redirect page: leave content empty
+            } else {
+                // Add to DOM
+                this._el.content_item.innerHTML = content;
+                // After Loaded
+                this.onLoaded();
+            }
+        }
+    }
+
+    updateMediaDisplay() {}
+
+    _updateMediaDisplay() {}
+}