@everymatrix/casino-slider 0.0.221 → 0.0.225

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-slider",
-  "version": "0.0.221",
+  "version": "0.0.225",
   "main": "dist/casino-slider.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "015e13b1638624ecac8f0cc2a0f210cbbac4910e"
+  "gitHead": "f58cef61f569c3d9b496becafc3ab9e93cb5eca7"
 }

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}