@everymatrix/general-stories 0.0.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const generalStories = require('./general-stories-34fcd4f4.js');
+require('./index-839683a3.js');
+
+
+
+exports.GeneralStories = generalStories.GeneralStories;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-839683a3.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["general-stories.cjs",[[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);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "components/general-stories/general-stories.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.20.0",
+    "typescriptVersion": "5.5.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/general-stories/general-stories.css

@@ -0,0 +1,124 @@
+.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;
+}

package/dist/collection/components/general-stories/general-stories.js

@@ -0,0 +1,379 @@
+import { h } from "@stencil/core";
+import { getDevicePlatform } from "../../utils/utils";
+import { translate, getTranslations } from "../../utils/locale.utils";
+export class GeneralStories {
+    constructor() {
+        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 is() { return "general-stories"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["general-stories.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["general-stories.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "cmsEndpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Endpoint URL for the source of data"
+                },
+                "attribute": "cms-endpoint",
+                "reflect": true
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language of the widget"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "cmsEnv": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CMS Endpoint stage"
+                },
+                "attribute": "cms-env",
+                "reflect": true,
+                "defaultValue": "'stage'"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via string"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Translations via URL"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "progressBarDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Duration of progress bar"
+                },
+                "attribute": "progress-bar-duration",
+                "reflect": true,
+                "defaultValue": "10"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentStory": {},
+            "currentStoryId": {},
+            "progress": {},
+            "touchPosStart": {},
+            "touchPosEnd": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleStylingUpdate"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleStylingUpdate"
+            }, {
+                "propName": "translationUrl",
+                "methodName": "handleNewTranslations"
+            }, {
+                "propName": "progress",
+                "methodName": "handleTimeEnds"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "touchstart",
+                "method": "onTouchStart",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchmove",
+                "method": "onTouchMove",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchend",
+                "method": "onTouchEnd",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

package/dist/collection/components/general-stories/general-stories.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/general-stories/index.js

@@ -0,0 +1 @@
+export { GeneralStories } from './general-stories';

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components/general-stories';

package/dist/collection/utils/locale.utils.js

@@ -0,0 +1,54 @@
+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',
+    }
+};
+export 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);
+        });
+    });
+};
+export const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,30 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+export 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';
+};
+export const getDevicePlatform = () => {
+    const device = getDevice();
+    if (device) {
+        if (device === 'PC') {
+            return 'dk';
+        }
+        else if (device === 'iPad' || device === 'iPhone') {
+            return 'mtWeb';
+        }
+        else {
+            return 'mtWeb';
+        }
+    }
+};

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };