@everymatrix/general-slider-navigation 1.16.1

package/dist/collection/components/general-slider-navigation/general-slider-navigation.js

@@ -0,0 +1,586 @@
+import { Component, Element, Prop, State, Watch, h } from '@stencil/core';
+import { translate } from '../../utils/locale.utils';
+import { isMobile, checkDeviceType, getDevicePlatform } from '../../utils/utils';
+export class GeneralSliderNavigation {
+  constructor() {
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * CMS Endpoint stage
+     */
+    this.cmsEnv = 'stage';
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    /**
+     * User roles
+     */
+    this.userRoles = 'everyone';
+    /**
+     * Show slider navigate arrows
+     */
+    this.showSliderArrows = true;
+    /**
+     * Show slider navigate arrows on mobile
+     */
+    this.showSliderArrowsMobile = true;
+    /**
+    * You will see a fixed grid without a slider when using a mobile device.
+    */
+    this.showMobileGrid = false;
+    /**
+    * Set if you want to have a slider on mobile device.
+    */
+    this.showNavigationSliderMobile = true;
+    /**
+    * Set if you want to have a slider on desktop.
+    */
+    this.showNavigationSliderDesktop = true;
+    /**
+     * Specify the number of items you would like to be displayed on desktop.
+     */
+    this.itemsPerPageDesktop = 3;
+    /**
+     * Specify the number of items you would like to be displayed on mobile devices.
+     */
+    this.itemsPerPageMobile = 2;
+    this.isLoading = true;
+    this.limitStylingAppends = false;
+    this.hasErrors = false;
+    this.device = '';
+    this.activeIndex = 0;
+    this.sliderMenuElementWidth = 0;
+    this.userAgent = window.navigator.userAgent;
+    this.isMobile = isMobile(this.userAgent);
+    this.allElementsWidth = 0;
+    this.xDown = null;
+    this.yDown = null;
+    this.resizeHandler = () => {
+      this.calculateSliderWidth();
+    };
+    this.orientationChangeHandler = () => {
+      setTimeout(() => {
+        this.calculateSliderWidth();
+      }, 10);
+    };
+    this.navigationTo = (url, type, isExternal) => {
+      if (isExternal) { // if link is external, inform FE
+        window.postMessage({ type: 'ExternalLinkNavigation', externalUrl: url, target: isExternal, linkType: type }, window.location.href);
+      }
+      else { // if link is internal, inform FE
+        window.postMessage({ type: 'LinkNavigation', navUrl: url, target: isExternal }, window.location.href);
+      }
+    };
+    this.setImage = (image) => {
+      let source = '';
+      this.device = checkDeviceType();
+      switch (this.device) {
+        case 'mobile':
+          source = image.srcMobile;
+          break;
+        case 'tablet':
+          source = image.srcTablet;
+          break;
+        case 'desktop':
+          source = image.srcDesktop;
+          break;
+      }
+      return source;
+    };
+    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);
+      });
+    };
+  }
+  watchEndpoint(newValue, oldValue) {
+    if (newValue && newValue != oldValue && this.cmsEndpoint) {
+      this.getGeneralSliderNavigation().then((GeneralSliderNavigation) => {
+        this.sliderData = GeneralSliderNavigation;
+      });
+    }
+  }
+  connectedCallback() {
+    window.screen.orientation.addEventListener('change', this.orientationChangeHandler);
+  }
+  componentWillLoad() {
+    if (this.cmsEndpoint && this.language) {
+      return this.getGeneralSliderNavigation().then((GeneralSliderNavigation) => {
+        this.sliderData = GeneralSliderNavigation;
+      });
+    }
+  }
+  componentDidLoad() {
+    window.addEventListener('resize', this.resizeHandler);
+  }
+  componentDidRender() {
+    this.el.addEventListener('touchstart', this.handleTouchStart.bind(this), { passive: true });
+    this.el.addEventListener('touchmove', this.handleTouchMove.bind(this), { passive: true });
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  componentDidUpdate() {
+    this.calculateSliderWidth();
+  }
+  disconnectedCallback() {
+    this.el.removeEventListener('touchstart', this.handleTouchStart);
+    this.el.removeEventListener('touchmove', this.handleTouchMove);
+    window.screen.orientation.removeEventListener('change', this.orientationChangeHandler);
+    window.removeEventListener('resize', this.resizeHandler);
+  }
+  getGeneralSliderNavigation() {
+    let url = new URL(`${this.cmsEndpoint}/${this.language}/homepage`);
+    url.searchParams.append('env', this.cmsEnv);
+    url.searchParams.append('userRoles', this.userRoles);
+    url.searchParams.append('device', getDevicePlatform());
+    return new Promise((resolve, reject) => {
+      this.isLoading = true;
+      fetch(url.href)
+        .then((res) => res.json())
+        .then((menuSliderData) => {
+        resolve(menuSliderData.banners);
+      })
+        .catch((err) => {
+        console.error(err);
+        this.hasErrors = true;
+        reject(err);
+      }).finally(() => {
+        this.isLoading = false;
+      });
+    });
+  }
+  handleTouchStart(evt) {
+    const firstTouch = this.getTouches(evt)[0];
+    this.xDown = firstTouch.clientX;
+    this.yDown = firstTouch.clientY;
+  }
+  handleTouchMove(evt) {
+    if (!this.xDown || !this.yDown)
+      return;
+    let xUp = evt.touches[0].clientX;
+    let yUp = evt.touches[0].clientY;
+    let xDiff = this.xDown - xUp;
+    let yDiff = this.yDown - yUp;
+    if (Math.abs(xDiff) > Math.abs(yDiff)) {
+      if (xDiff > 0) {
+        this.move(1);
+      }
+      else {
+        this.move(-1);
+      }
+    }
+    this.xDown = null;
+    this.yDown = null;
+  }
+  ;
+  calculateSliderWidth() {
+    if (!this.sliderMenuElement)
+      return;
+    this.sliderMenuElementWidth = this.sliderMenuElement.clientWidth;
+  }
+  ;
+  getTouches(evt) {
+    return evt.touches || evt.originalEvent.touches;
+  }
+  setActive(index) {
+    const maxLength = Math.ceil(this.sliderData.length / (!this.isMobile ? this.itemsPerPageDesktop : this.itemsPerPageMobile));
+    if (index >= 0) {
+      if (index >= maxLength - 1) {
+        this.activeIndex = maxLength - 1;
+      }
+      else {
+        this.activeIndex = index;
+      }
+    }
+    else {
+      this.activeIndex = 0;
+    }
+  }
+  move(direction) {
+    this.setActive(this.activeIndex + direction);
+  }
+  ;
+  goTo(index) {
+    let diff = this.activeIndex - index;
+    if (diff > 0) {
+      for (let i = 0; i < diff; i++) {
+        this.move(-1);
+      }
+    }
+    else {
+      for (let i = 0; i > diff; i--) {
+        this.move(1);
+      }
+    }
+  }
+  render() {
+    const styles = {
+      transform: `translate(${(+this.sliderMenuElementWidth * this.activeIndex) * -1}px, 0px)`
+    };
+    const itemStyleDesktop = {
+      width: `${this.sliderMenuElementWidth / Math.ceil(this.itemsPerPageDesktop)}px`
+    };
+    const itemStyleMobile = {
+      width: `${this.sliderMenuElementWidth / this.itemsPerPageMobile}px`
+    };
+    if (this.hasErrors) {
+      return (h("div", { class: "PageError" },
+        h("div", { class: "TitleError" }, translate('error', this.language))));
+    }
+    if (!this.isLoading) {
+      return (h("div", { ref: el => this.stylingContainer = el },
+        h("div", { class: "SliderWrapper" },
+          h("div", { class: "SliderWrapperContent", ref: (el) => this.slider = el },
+            ((this.showSliderArrows && !this.isMobile) || (this.showSliderArrowsMobile && this.isMobile)) &&
+              h("div", { class: this.activeIndex === 0 ? 'SliderNavButton DisabledArrow' : 'SliderNavButton', onClick: () => this.move(-1) },
+                h("svg", { fill: "none", stroke: "var(--emfe-w-color-secondary, #FD2839)", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+                  h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" }))),
+            this.showNavigationSliderMobile && this.isMobile ? (h("main", null,
+              h("div", { style: styles, ref: (el) => this.sliderMenuElement = el, class: "SliderItems" }, this.sliderData.map((data) => h("div", { class: "SliderItem", style: itemStyleMobile },
+                h("div", { class: "GridContainer", onClick: () => data.externalLink ? this.navigationTo(data.url, data.targetType, data.externalLink) : this.navigationTo(data.url, data.targetType, false) },
+                  h("div", { class: "SliderImage" },
+                    h("img", { src: this.setImage(data.image), alt: data.title })),
+                  h("div", { class: "SliderContent" },
+                    h("div", { class: "DividerElement" }),
+                    h("div", { class: "Title" }, data.title)))))))) : (this.showNavigationSliderDesktop && !this.isMobile &&
+              h("main", null,
+                h("div", { class: "SliderItems", style: styles, ref: (el) => this.sliderMenuElement = el },
+                  h("div", { class: "SliderItemsWrapper" }, this.sliderData.map((data) => h("div", { class: "SliderItem", style: itemStyleDesktop },
+                    h("div", { class: "GridContainer", onClick: () => data.externalLink ? this.navigationTo(data.url, data.targetType, data.externalLink) : this.navigationTo(data.url, data.targetType, false) },
+                      h("div", { class: "SliderImage" },
+                        h("img", { src: this.setImage(data.image), alt: data.title })),
+                      h("div", { class: "SliderContent" },
+                        h("div", { class: "DividerElement" }),
+                        h("div", { class: "Title" }, data.title))))))))),
+            ((this.showSliderArrows && !this.isMobile) || (this.showSliderArrowsMobile && this.isMobile)) &&
+              h("div", { class: this.activeIndex === Math.ceil(this.sliderData.length / (!this.isMobile ? this.itemsPerPageDesktop : this.itemsPerPageMobile)) - 1 ? ' SliderNavButton DisabledArrow disabled' : 'SliderNavButton', onClick: () => this.move(1) },
+                h("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+                  h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))))),
+        (this.showMobileGrid && this.isMobile) &&
+          h("main", { class: "GridItems GridMobile" }, this.sliderData.map((dataMobile) => h("div", { class: "GridContainerMobile", onClick: () => dataMobile.externalLink ? this.navigationTo(dataMobile.url, dataMobile.targetType, dataMobile.externalLink) : this.navigationTo(dataMobile.url, dataMobile.targetType, false) },
+            h("div", { class: "SliderImage" },
+              h("img", { src: this.setImage(dataMobile.image), alt: dataMobile.title })),
+            h("div", { class: "SliderContent" },
+              h("div", { class: "DividerElement" }),
+              h("div", { class: "Title" }, dataMobile.title)))))));
+    }
+  }
+  static get is() { return "general-slider-navigation"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["general-slider-navigation.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["general-slider-navigation.css"]
+  }; }
+  static get properties() { return {
+    "clientStyling": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via inline style"
+      },
+      "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": "''"
+    },
+    "cmsEndpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Endpoint URL for the source of data"
+      },
+      "attribute": "cms-endpoint",
+      "reflect": true
+    },
+    "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'"
+    },
+    "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'"
+    },
+    "userRoles": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "User roles"
+      },
+      "attribute": "user-roles",
+      "reflect": true,
+      "defaultValue": "'everyone'"
+    },
+    "showSliderArrows": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Show slider navigate arrows"
+      },
+      "attribute": "show-slider-arrows",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "showSliderArrowsMobile": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Show slider navigate arrows on mobile"
+      },
+      "attribute": "show-slider-arrows-mobile",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "showMobileGrid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "You will see a fixed grid without a slider when using a mobile device."
+      },
+      "attribute": "show-mobile-grid",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "showNavigationSliderMobile": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set if you want to have a slider on mobile device."
+      },
+      "attribute": "show-navigation-slider-mobile",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "showNavigationSliderDesktop": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set if you want to have a slider on desktop."
+      },
+      "attribute": "show-navigation-slider-desktop",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "itemsPerPageDesktop": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specify the number of items you would like to be displayed on desktop."
+      },
+      "attribute": "items-per-page-desktop",
+      "reflect": true,
+      "defaultValue": "3"
+    },
+    "itemsPerPageMobile": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specify the number of items you would like to be displayed on mobile devices."
+      },
+      "attribute": "items-per-page-mobile",
+      "reflect": true,
+      "defaultValue": "2"
+    },
+    "externalLinkActive": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Customize external link active"
+      },
+      "attribute": "external-link-active",
+      "reflect": true
+    },
+    "internalLinkActive": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Customize internal link active"
+      },
+      "attribute": "internal-link-active",
+      "reflect": true
+    }
+  }; }
+  static get states() { return {
+    "isLoading": {},
+    "limitStylingAppends": {},
+    "hasErrors": {},
+    "device": {},
+    "activeIndex": {},
+    "sliderMenuElementWidth": {}
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "cmsEndpoint",
+      "methodName": "watchEndpoint"
+    }, {
+      "propName": "language",
+      "methodName": "watchEndpoint"
+    }]; }
+}

package/dist/collection/index.js

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

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

@@ -0,0 +1,28 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hu'];
+const TRANSLATIONS = {
+  en: {
+    error: 'Error',
+    noResults: 'Loading, please wait ...',
+  },
+  hu: {
+    error: 'Error',
+    noResults: 'Loading, please wait ...',
+  },
+  ro: {
+    error: 'Eroare',
+    noResults: 'Loading, please wait ...',
+  },
+  fr: {
+    error: 'Error',
+    noResults: 'Loading, please wait ...',
+  },
+  ar: {
+    error: 'خطأ',
+    noResults: 'Loading, please wait ...',
+  }
+};
+export const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,56 @@
+/**
+ * @name isMobile
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {Boolean} true or false
+ */
+export const isMobile = (userAgent) => {
+  return !!(userAgent.toLowerCase().match(/android/i) ||
+    userAgent.toLowerCase().match(/blackberry|bb/i) ||
+    userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+    userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};
+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 'ios';
+    }
+    else {
+      return 'mtWeb';
+    }
+  }
+};
+export function checkDeviceType() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  const width = screen.availWidth;
+  const height = screen.availHeight;
+  if (userAgent.includes('iphone')) {
+    return 'mobile';
+  }
+  if (userAgent.includes('android')) {
+    if (height > width && width < 800) {
+      return 'mobile';
+    }
+    if (width > height && height < 800) {
+      return 'tablet';
+    }
+  }
+  return 'desktop';
+}

package/dist/components/general-slider-navigation.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GeneralSliderNavigation extends Components.GeneralSliderNavigation, HTMLElement {}
+export const GeneralSliderNavigation: {
+  prototype: GeneralSliderNavigation;
+  new (): GeneralSliderNavigation;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;