@mapcreator/sdk 0.0.8 → 0.0.9

package/dist/{utils → esm/utils}/template.d.ts

@@ -1,5 +1,5 @@
-import { Mode } from '../types';
-import { JobObjectDataBindings, PopupMedia } from '../types/jobObject';
+import type { Mode } from '@/types';
+import type { JobObjectDataBindings, PopupMedia } from '@/types/jobObject';
 export declare function buildTemplate(template: string | undefined, popupMedia: PopupMedia | undefined, bindings: JobObjectDataBindings, mode: Mode): string;
 export declare const closeButtonHtml: string;
 export declare const cycleButtonsHtml: string;

package/dist/esm/utils/template.js

@@ -0,0 +1,120 @@
+import prevButtonIcon from '@/images/popup-previous.svg?raw';
+import closeButtonIcon from '@/images/popup-close.svg?raw';
+import nextButtonIcon from '@/images/popup-next.svg?raw';
+import alertIcon from '@/images/alert-triangle.svg?raw';
+import { t } from '@/i18n';
+import { getEmbedUrlFromYoutubeUrl } from '@/utils/youtube';
+import { bindingToString, getYoutubeVideoId, resolveBinding } from '@/utils/helpers';
+export function buildTemplate(template, popupMedia, bindings, mode) {
+    let mediaHtml;
+    if (popupMedia?.type === 'video') {
+        mediaHtml =
+            mode === 'preview'
+                ? getYoutubePlaceholder(popupMedia.src, bindings)
+                : `
+        <div class="youtube-container">
+          <iframe
+            src="${getEmbedUrlFromYoutubeUrl(popupMedia, bindings)}"
+            width="100%" height="300" style="border: none" allowfullscreen>
+          </iframe>
+        </div>
+      `;
+    }
+    else if (popupMedia?.type === 'image') {
+        const src = resolveBinding(popupMedia.src, bindings);
+        const alt = resolveBinding(popupMedia.alt, bindings);
+        const fillClass = popupMedia.fill ? 'fill' : '';
+        mediaHtml = `
+      <div class="image-container ${fillClass}">
+        <img src="${src}" alt="${alt}" />
+      </div>
+    `;
+    }
+    mediaHtml = mediaHtml ? `<div class="media-content">${mediaHtml}</div>` : '';
+    const textHtml = template
+        ? `<div class="text-content">${parseTemplate(template, bindings)}</div>`
+        : '';
+    return `
+    <div class="popup-scroll-wrapper">
+      <div class="mc-popup">
+        ${mediaHtml}
+        ${textHtml}
+      </div>
+    </div>
+  `;
+}
+export const closeButtonHtml = `
+  <button class="mc-popup-button close">
+    ${closeButtonIcon}
+  </button>
+`;
+export const cycleButtonsHtml = `
+  <div class="cycle-buttons">
+    <button class="mc-popup-button prev">
+      ${prevButtonIcon}
+    </button>
+    <button class="mc-popup-button next">
+      ${nextButtonIcon}
+    </button>
+  </div>
+`;
+/**
+ * @todo Use DOM
+ */
+function parseTemplate(template, bindings) {
+    // Copied from https://gitlab.com/mapcreator/mapcreator/-/blob/master/src/utils/template.ts#L11
+    if (!template) {
+        return '';
+    }
+    const reAnchors = />\$(.+?)</gi;
+    const reMentionSpan = /<span\s+class="mention"\s+data-mention-id="[^"]*">(.*?)<\/span>/gim;
+    const reAttributes = /(\S+?)\s*=\s*"\$([^"]+?)"/g;
+    const reMentionYoutube = /youtube\.com\/embed\/\$([^"'<>\\]+)/gi;
+    // Remove image placeholder
+    template = template.replace(/placeholder="[^"]+"/, '');
+    template = template.replace(/onerror="[^"]+"/, '');
+    // Replace youtube mention
+    template = template.replace(reMentionYoutube, (match, name) => {
+        const string = bindingToString(bindings[name]);
+        return string ? `youtube.com/embed/${getYoutubeVideoId(string)}?` : '';
+    });
+    // Replace all generically bound attributes
+    template = template.replace(reAttributes, (match, attr, name) => {
+        const string = bindingToString(bindings[name]);
+        if (['src', 'href'].includes(attr) && !string) {
+            return '';
+        }
+        if (['src', 'href'].includes(attr)) {
+            // Skip normalization for known protocols
+            if (/^(mailto:|tel:|ftp:|data:|http:\/\/|https:\/\/)/i.test(string)) {
+                return ` ${attr}="${string}"`;
+            }
+            return ` ${attr}="${normalizeUrl(string)}"`;
+        }
+        return ` ${attr}="${string}"`;
+    });
+    // Replace $foo with the correct value
+    template = template.replace(reAnchors, (match, name) => `>${bindingToString(bindings[name])}<`);
+    // Remove mention anchors <span class=\"mention\" data-mention-id=\"mc-type\">$mc-type</span>
+    template = template.replace(reMentionSpan, (_, name) => name);
+    return template;
+}
+function normalizeUrl(url) {
+    if (!/^https?:\/\//i.test(url)) {
+        return `https://${url}`;
+    }
+    return url;
+}
+function getYoutubePlaceholder(url, bindings) {
+    const id = getYoutubeVideoId(resolveBinding(url, bindings));
+    const thumbnailUrl = `https://img.youtube.com/vi/${id}/hqdefault.jpg`;
+    return `
+    <div class="youtube-placeholder">
+      <img src="${thumbnailUrl}" />
+      <div class="popup-alert">
+        <div class="alert-icon">${alertIcon}</div>
+        <div>${t('videoAlert')}</div>
+      </div>
+    </div>
+  `;
+}

package/dist/{utils → esm/utils}/youtube.d.ts

@@ -1,4 +1,4 @@
-import { PopupMedia, JobObjectDataBindings } from '../types/jobObject';
+import type { PopupMedia, JobObjectDataBindings } from '@/types/jobObject';
 export declare function getEmbedUrlFromYoutubeUrl(popupmedia: Extract<PopupMedia, {
     type: 'video';
 }>, bindings: JobObjectDataBindings): string;

package/dist/esm/utils/youtube.js

@@ -0,0 +1,64 @@
+import { resolveBinding } from '@/utils/helpers';
+export function getEmbedUrlFromYoutubeUrl(popupmedia, bindings) {
+    const { allowFullscreen, loop } = popupmedia;
+    const src = resolveBinding(popupmedia.src, bindings);
+    let embedUrl;
+    const idMatch = src.match(/(?:youtube\.com\/(?:watch\?.*v=|embed\/|v\/)|youtu\.be\/)([-\w]{11})/);
+    const id = idMatch?.[1];
+    if (id) {
+        embedUrl = `https://www.youtube.com/embed/${id}`;
+    }
+    else {
+        embedUrl = src;
+    }
+    const params = [];
+    if (!allowFullscreen) {
+        params.push('fs=0');
+    }
+    if (loop && id) {
+        params.push(`loop=1&playlist=${id}`);
+    }
+    embedUrl = convertYouTubeTimeParam(embedUrl);
+    embedUrl = stripSiParam(embedUrl);
+    if (params.length) {
+        const separator = embedUrl.includes('?') ? '&' : '?';
+        embedUrl += `${separator}${params.join('&')}`;
+    }
+    return embedUrl;
+}
+function stripSiParam(url) {
+    return url.replace(/([?&])si=[^&]+(&)?/, (_, sep, tail) => {
+        if (sep === '?' && !tail) {
+            return '';
+        }
+        if (sep === '?' && tail) {
+            return '?';
+        }
+        return tail ? '&' : '';
+    });
+}
+function convertYouTubeTimeParam(url) {
+    const urlObj = new URL(url);
+    const t = urlObj.searchParams.get('t');
+    if (!t) {
+        return url;
+    }
+    let seconds = 0;
+    const timeRegex = /^((\d+)m)?((\d+)s)?$/;
+    if (/^\d+$/.test(t)) {
+        seconds = parseInt(t, 10);
+    }
+    else {
+        const match = t.match(timeRegex);
+        if (match) {
+            const minutes = parseInt(match[2] || '0', 10);
+            const secs = parseInt(match[4] || '0', 10);
+            seconds = minutes * 60 + secs;
+        }
+    }
+    if (seconds > 0) {
+        urlObj.searchParams.delete('t');
+        urlObj.searchParams.set('start', String(seconds));
+    }
+    return urlObj.toString();
+}