@everymatrix/general-stories 0.0.1

package/dist/esm/general-stories-0e155a93.js

@@ -0,0 +1,288 @@
+import { r as registerInstance, h } from './index-1b3a1a31.js';
+
+const getDevice = () => {
+    let userAgent = window.navigator.userAgent;
+    if (userAgent.toLowerCase().match(/android/i)) {
+        return 'Android';
+    }
+    if (userAgent.toLowerCase().match(/iphone/i)) {
+        return 'iPhone';
+    }
+    if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
+        return 'iPad';
+    }
+    return 'PC';
+};
+const getDevicePlatform = () => {
+    const device = getDevice();
+    if (device) {
+        if (device === 'PC') {
+            return 'dk';
+        }
+        else if (device === 'iPad' || device === 'iPhone') {
+            return 'mtWeb';
+        }
+        else {
+            return 'mtWeb';
+        }
+    }
+};
+
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+    en: {
+        error: 'Error',
+        generalStoriesLoading: 'Loading, please wait ...',
+        loadMore: 'Load More',
+    },
+    hu: {
+        error: 'Hiba',
+        generalStoriesLoading: 'Betöltés, kérjük várjon ...',
+        loadMore: 'Továbbiak betöltése',
+    },
+    ro: {
+        error: 'Eroare',
+        generalStoriesLoading: 'Se încarcă, vă rugăm așteptați ...',
+        loadMore: 'Încarcă mai multe',
+    },
+    fr: {
+        error: 'Erreur',
+        generalStoriesLoading: 'Chargement, veuillez patienter ...',
+        loadMore: 'Charger plus',
+    },
+    ar: {
+        error: 'خطأ',
+        generalStoriesLoading: 'جار التحميل، يرجى الانتظار ...',
+        loadMore: 'تحميل المزيد',
+    },
+    hr: {
+        error: 'Greška',
+        generalStoriesLoading: 'Učitavanje, molimo pričekajte ...',
+        loadMore: 'Učitaj više',
+    }
+};
+const getTranslations = (url) => {
+    return new Promise((resolve) => {
+        fetch(url)
+            .then((res) => res.json())
+            .then((data) => {
+            Object.keys(data).forEach((lang) => {
+                if (!TRANSLATIONS[lang]) {
+                    TRANSLATIONS[lang] = {};
+                }
+                for (let key in data[lang]) {
+                    TRANSLATIONS[lang][key] = data[lang][key];
+                }
+            });
+            resolve(true);
+        });
+    });
+};
+const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const generalStoriesCss = ".ImageContainer{display:flex;flex-direction:row;background-color:var(--emw--color-background, #0E1511);overflow:auto}.StoryThumbnailContainer{margin:5px;position:relative;display:inline-block;border-radius:50%}.StoryThumbnailContainer.Highlighted::before{content:\"\";position:absolute;border-radius:50%;background:linear-gradient(to bottom, var(--emw--color-primary, #22B04E), var(--emw--color-secondary, #E1A749));top:-3px;left:-3px;width:111%;height:103%}.StoryThumbnailContainer.Viewed::before{content:\"\";position:absolute;border-radius:50%;height:50px;width:50px;background:var(--emw--color-grey-150, #828282);top:-3px;left:-3px;width:111%;height:103%}.StoryThumbnailImage{height:50px;width:50px;border-radius:50%;position:relative;z-index:1}.StoryThumbnailImage.Highlighted,.StoryThumbnailImage.Viewed{border:2px solid var(--emw--color-white, #ffffff)}.FullScreenHeader{position:fixed;background:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));top:0px;width:100%;display:flex;flex-direction:column;padding:10px 0;z-index:5;height:30px}.FullScreenHeader .CloseStoryButton{position:absolute;right:0;width:20px;margin-right:20px;margin-top:8px;z-index:50}.FullScreenHeader .ProgressBarContainer{width:90%;height:2px;position:relative;top:0;background-color:var(--emw--color-grey-150, #828282);border-radius:10px;overflow:hidden;margin:0 auto}.FullScreenHeader .ProgressBarContainer .ProgressBar{height:100%;background:var(--emw--color-white, #ffffff);width:0%;transition:width 0.1s linear}.FullScreenStory{position:fixed;width:100vw;height:100vh;background-color:var(--emw--color-grey-400, #24211f);display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:300}.FullScreenStory video{height:100vh;width:100vw}.FullScreenStory img{width:100%;height:100%;object-fit:contain}.FullScreenStory .LoadMoreButtonBackground{width:100vw;height:15%;background:linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));position:absolute;bottom:0;display:flex;justify-content:center}.FullScreenStory .LoadMoreButtonBackground .LoadMoreButton{width:auto;font-size:var(--emw--font-size-small, 14px);font-family:inherit;background-color:var(--emw--color-grey-50, #F9F8F8);box-shadow:0px 0px 7px 1px var(--emw--color-grey-400, #24211f);color:var(--emw--color-black, #000000);border-radius:50px;position:absolute;bottom:15px;padding:10px 20px}";
+const GeneralStoriesStyle0 = generalStoriesCss;
+
+const GeneralStories = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hasErrors = false;
+        this.isLoading = true;
+        this.isSwipe = false;
+        this.getStories = () => {
+            let url = new URL(`${this.cmsEndpoint}/${this.language}/stories`);
+            url.searchParams.append('env', this.cmsEnv);
+            url.searchParams.append('device', getDevicePlatform());
+            url.searchParams.append('language', this.language);
+            return new Promise((resolve, reject) => {
+                this.isLoading = true;
+                fetch(url.href)
+                    .then((res) => res.json())
+                    .then((data) => {
+                    this.stories = data;
+                    this.stories.forEach((story) => {
+                        story.viewed = false;
+                    });
+                    this.isLoading = false;
+                    resolve(true);
+                }).catch((err) => {
+                    console.log(err);
+                    this.isLoading = false;
+                    this.hasErrors = true;
+                    reject(err);
+                });
+            });
+        };
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let url = new URL(this.clientStylingUrl);
+            let cssFile = document.createElement('style');
+            fetch(url.href)
+                .then((res) => res.text())
+                .then((data) => {
+                cssFile.innerHTML = data;
+                setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+            })
+                .catch((err) => {
+                console.log('error ', err);
+            });
+        };
+        this.navigateToExternalStoryLink = () => {
+            window.postMessage({ type: 'OpenStoryLink', url: this.currentStory.storyUrl }, window.location.href);
+        };
+        this.openFullScreenStory = (id) => {
+            this.currentStoryId = id;
+            this.currentStory = this.stories.find((story) => story.id === id);
+            this.markStoryAsViewed(id);
+            this.startProgress();
+        };
+        this.closeFullScreenView = () => {
+            this.markStoryAsViewed(this.currentStoryId.toString());
+            this.currentStoryId = null;
+            this.progress = 0;
+            clearInterval(this.intervalId);
+        };
+        this.markStoryAsViewed = (storyId) => {
+            const storyIndex = this.stories.findIndex(story => story.id === storyId);
+            if (storyIndex > -1) {
+                const [viewedStory] = this.stories.splice(storyIndex, 1);
+                viewedStory.viewed = true;
+                this.stories = [...this.stories, viewedStory];
+            }
+        };
+        this.changeStory = (story, direction) => {
+            const newStoryIndex = direction === 'next' ? Number(story.index) + 1 : Number(story.index) - 1;
+            if (newStoryIndex > this.stories.length - 1 || newStoryIndex < 0) {
+                this.markStoryAsViewed(story.index);
+                this.closeFullScreenView();
+            }
+            else {
+                const newStory = this.stories.find((story) => story.index === newStoryIndex);
+                this.currentStory = newStory;
+                this.currentStoryId = newStory.id;
+                this.progress = 0;
+                this.markStoryAsViewed(newStory.id);
+            }
+        };
+        this.startProgress = () => {
+            const interval = 100;
+            const step = (100 / (this.progressBarDuration * 1000)) * interval;
+            this.intervalId = setInterval(() => {
+                if (this.progress >= 100) {
+                    clearInterval(this.intervalId);
+                }
+                else {
+                    this.progress += step;
+                }
+            }, interval);
+        };
+        this.Thumbnail = ({ props }) => {
+            const open = () => this.openFullScreenStory(props.id);
+            return (h("div", { class: `StoryThumbnailContainer ${props.viewed ? 'Viewed' : 'Highlighted'}`, onTouchStart: open }, h("img", { class: `StoryThumbnailImage ${props.viewed ? 'Viewed' : 'Highlighted'}`, src: props.icon, alt: "story-icon" })));
+        };
+        this.cmsEndpoint = undefined;
+        this.language = 'en';
+        this.cmsEnv = 'stage';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.progressBarDuration = 10;
+        this.currentStory = undefined;
+        this.currentStoryId = null;
+        this.progress = 0;
+        this.touchPosStart = undefined;
+        this.touchPosEnd = undefined;
+    }
+    handleStylingUpdate() {
+        if (this.clientStyling)
+            this.setClientStyling();
+        if (this.clientStylingUrl)
+            this.setClientStylingURL();
+    }
+    handleNewTranslations() {
+        this.isLoading = true;
+        getTranslations(this.translationUrl).then(() => {
+            this.isLoading = false;
+        });
+    }
+    handleTimeEnds(newValue) {
+        if (newValue >= 100) {
+            this.changeStory(this.currentStory, 'next');
+        }
+    }
+    async componentWillLoad() {
+        if (this.cmsEndpoint && this.language) {
+            await this.getStories();
+        }
+        if (this.translationUrl.length > 2) {
+            await getTranslations(this.translationUrl);
+        }
+    }
+    onTouchStart(e) {
+        this.touchPosStart = { clientX: e.touches[0].clientX, clientY: e.touches[0].clientY };
+    }
+    onTouchMove(e) {
+        this.touchPosEnd = { clientX: e.touches[0].clientX, clientY: e.touches[0].clientY };
+        const diffX = this.touchPosEnd.clientX - this.touchPosStart.clientX;
+        if (Math.abs(diffX) > 50) {
+            this.isSwipe = true;
+        }
+    }
+    onTouchEnd(e) {
+        if (this.isSwipe) {
+            this.touchPosEnd = { clientX: e.changedTouches[0].clientX, clientY: e.changedTouches[0].clientY };
+            const diffX = this.touchPosEnd.clientX - this.touchPosStart.clientX;
+            if (diffX > 0) {
+                this.changeStory(this.currentStory, 'previous');
+            }
+            else {
+                this.changeStory(this.currentStory, 'next');
+            }
+        }
+        else {
+            const screen = window.innerWidth;
+            if (e.changedTouches[0].clientX > screen / 2) {
+                this.changeStory(this.currentStory, 'next');
+            }
+            else {
+                this.changeStory(this.currentStory, 'previous');
+            }
+        }
+    }
+    render() {
+        if (this.hasErrors) {
+            return (h("div", { class: "GeneralStoriesError" }, h("div", { class: "Title" }, translate('error', this.language))));
+        }
+        if (this.isLoading) {
+            return (h("div", { class: "GeneralStoriesLoading" }, h("div", { class: "Title" }, translate('generalStoriesLoading', this.language))));
+        }
+        if (!this.isLoading) {
+            return (h("div", { ref: el => this.stylingContainer = el }, this.currentStoryId ?
+                h("div", { class: "FullScreenStory" }, h("div", { class: "FullScreenHeader" }, h("div", { class: "ProgressBarContainer" }, h("div", { class: "ProgressBar", style: { width: `${this.progress}%` } })), h("div", { id: "close", class: "CloseStoryButton", onTouchStart: this.closeFullScreenView }, h("svg", { fill: "none", stroke: "#ffffff", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M6 18L18 6M6 6l12 12" })))), this.currentStory.type === 'video' ?
+                    h("video", { autoPlay: true }, h("source", { src: this.currentStory.url, type: "video/mp4" }))
+                    :
+                        h("img", { src: this.currentStory.url, alt: "story-image" }), this.currentStory.storyUrl &&
+                    h("div", { class: "LoadMoreButtonBackground" }, h("button", { onTouchStart: this.navigateToExternalStoryLink, class: "LoadMoreButton" }, translate('loadMore', this.language))))
+                :
+                    h("div", { class: "ImageContainer" }, this.stories.map((story) => {
+                        return h(this.Thumbnail, { props: story });
+                    }))));
+        }
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleStylingUpdate"],
+        "clientStylingUrl": ["handleStylingUpdate"],
+        "translationUrl": ["handleNewTranslations"],
+        "progress": ["handleTimeEnds"]
+    }; }
+};
+GeneralStories.style = GeneralStoriesStyle0;
+
+export { GeneralStories as G };

package/dist/esm/general-stories.entry.js

@@ -0,0 +1,2 @@
+export { G as general_stories } from './general-stories-0e155a93.js';
+import './index-1b3a1a31.js';

package/dist/esm/general-stories.js

@@ -0,0 +1,20 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-1b3a1a31.js';
+export { s as setNonce } from './index-1b3a1a31.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
+
+/*
+ Stencil Client Patch Browser v4.20.0 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["general-stories",[[1,"general-stories",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"progressBarDuration":[514,"progress-bar-duration"],"currentStory":[32],"currentStoryId":[32],"progress":[32],"touchPosStart":[32],"touchPosEnd":[32]},[[1,"touchstart","onTouchStart"],[1,"touchmove","onTouchMove"],[1,"touchend","onTouchEnd"]],{"clientStyling":["handleStylingUpdate"],"clientStylingUrl":["handleStylingUpdate"],"translationUrl":["handleNewTranslations"],"progress":["handleTimeEnds"]}]]]], options);
+});