@everymatrix/casino-slider 0.0.224 → 0.0.229

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-slider",
-  "version": "0.0.224",
+  "version": "0.0.229",
   "main": "dist/casino-slider.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "56c929409f6926e8a96fcfbe5070643a08ae19cd"
+  "gitHead": "efee0743817693e5186a61a1477e081208d48fec"
 }

package/src/CasinoSlider.svelte

@@ -4,65 +4,61 @@
   import { onMount } from 'svelte';
   import { getDevice } from 'rvhelper';
 
-  export let sliderdata:Array<any> = [];
-  export let onclickeventname:string = 'defaultEvent';
+  export let actionevent:string = 'defaultEvent';
   export let favoritesnumber:string = '0';
   export let location:string = '';
   export let clientstyling:string = '';
   export let clientstylingurl:string = '';
   export let identity:string = '';
   export let containermaxwidth:string = '';
+  export let activeindex:string = '';
 
-  let userAgent:String = window.navigator.userAgent;
-  let isMobile = (getDevice(userAgent) === 'PC') ? false : true;
+  let userAgent:string = window.navigator.userAgent;
+  let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
+  let sliderdata:string = '';
 
   let carousel:any;
-  let active:number;
+  let activeIndex:number;
   let customStylingContainer:HTMLElement;
 
   // Clicking on the slider item will trigger this method and send a postmessage on window
   // @TODO itemId type fix
-  let handleClick = (itemId:any, index:number) => {
-    active = index;
+  let handleClick = (item:any, index:number):void => {
+    activeIndex = index;
 
-    window.postMessage({ type: onclickeventname, itemId, index }, window.location.href);
+    window.postMessage({ type: actionevent, itemId: item.id, index, item }, window.location.href);
   };
 
-  const messageHandler = (e:any) => {
-    if (e.data && e.data.type == "SetSliderIndex") {
-      active = e.data.categoryData ? sliderdata.map((e) => { return e.id; }).indexOf(e.data.categoryData.id) : 0;
-    }
-
-    if (e.data && e.data.type == `SetSliderIndex_${identity}`) {
-      active = e.data.index;
-    }
-  }
-
-  let scrollLeft = () => {
+  let scrollLeft = ():void => {
     carousel.scrollBy({
-      left: -300,
+      left: -250,
       behavior: 'smooth'
     });
   }
 
-  let scrollRight = () => {
+  let scrollRight = ():void => {
     carousel.scrollBy({
-      left: +300,
+      left: +250,
       behavior: 'smooth'
     });
   }
 
-  const setClientStyling = () => {
+  const setActiveIndex = ():void => {
+    activeIndex = parseInt(activeindex, 10);
+  }
+
+  const setClientStyling = ():void => {
     let sheet = document.createElement('style');
     sheet.innerHTML = clientstyling;
     setTimeout(() => { customStylingContainer.appendChild(sheet); });
   }
 
-  const setClientStylingURL = () => {
+  const setClientStylingURL = ():void => {
     let cssFile = document.createElement('style');
+    let url:URL = new URL(clientstylingurl);
 
     if (clientstylingurl) {
-      fetch(new URL(clientstylingurl))
+      fetch(url.href)
         .then((res:any) => res.text())
         .then((data:any) => {
           cssFile.innerHTML = data
@@ -72,14 +68,21 @@
     }
   }
 
+  const messageHandler = (e:any) => {
+    if (e.data.type == 'SliderData' && e.data.identity == identity) {
+      sliderdata = e.data.data;
+    }
+  }
+
   onMount(() => {
     window.addEventListener('message', messageHandler, false);
 
     return () => {
       window.removeEventListener('message', messageHandler);
     }
-  });
+  })
 
+  $: (activeindex || activeindex == 0) && setActiveIndex();
   $: clientstyling && setClientStyling();
   $: clientstylingurl && setClientStylingURL();
 </script>
@@ -95,9 +98,9 @@
     <ul class="CarouselItems" bind:this={carousel}>
       {#if sliderdata.length > 0}
         {#each sliderdata as item, index (item.id)}
-          <li class="CarouselItem" class:active={active == index} on:click={e => handleClick(item.id, index)}>
+          <li class="CarouselItem" class:active={activeIndex == index} on:click={e => handleClick(item, index)}>
             {#if location === 'headerMain'}
-              <a href={item.path}>{item.label}</a>
+              <a>{item.label}</a>
             {:else}
               {item.name} {item.id === "FAVORITES" ? "(" + favoritesnumber + ")" : ''}
             {/if}
@@ -134,9 +137,9 @@
   }
 
   .CarouselWrapper {
-    background: #D0046C;  /* fallback for old browsers */
-    background: -webkit-linear-gradient(to left, #FD2839, #D0046C);  /* Chrome 10-25, Safari 5.1-6 */
-    background: linear-gradient(to left, #FD2839, #D0046C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    background: var(--emfe-w-color-primary, #D0046C);  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to left, var(--emfe-w-color-secondary, #FD2839), var(--emfe-w-color-primary, #D0046C));  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to left, var(--emfe-w-color-secondary, #FD2839), var(--emfe-w-color-primary, #D0046C)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
     &.CarouselWrapperHeaderMain {
       background: transparent;
     }
@@ -148,7 +151,7 @@
     flex-wrap: nowrap;
     justify-content: center;
     width: 100%;
-    color: #ffffff;
+    color: var(--emfe-w-color-white, #FFFFFF);
     margin: 0 auto;
     padding: 0 10px;
     &.CarouselContainerMobile {
@@ -182,7 +185,7 @@
 
         &:hover,
         &.active {
-          background: #07072a;
+          background: var(--emfe-w-color-contrast, #07072A);
           cursor: pointer;
         }
       }
@@ -212,8 +215,8 @@
       &:hover, &.active {
         background: transparent;
         a {
-          border-top: 1px solid #D0046C;
-          color: #D0046C;
+          border-top: 1px solid var(--emfe-w-color-primary, #D0046C);
+          color: var(--emfe-w-color-primary, #D0046C);
         }
       }
       span {
@@ -234,7 +237,7 @@
       display: none;
     }
     .CarouselItem a {
-      color: #fff;
+      color: var(--emfe-w-color-white, #FFFFFF);
       text-decoration: none;
     }
   }