@mapcreator/sdk 0.0.9 → 0.0.11

package/dist/esm/utils/template.js

@@ -1,120 +0,0 @@
-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/esm/utils/youtube.js

@@ -1,64 +0,0 @@
-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();
-}