@everymatrix/casino-slider 0.0.363 → 0.0.367

package/src/CasinoSlider.svelte

@@ -1,310 +1,310 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { getDevice } from 'rvhelper';
-
-  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
-  import { CasinoSlider } from './translations';
-
-  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 isprimarymenu:boolean = false;
-  export let issecondarymenu:boolean = false;
-  export let lang:string = '';
-  export let activeindex:string;
-
-  setupI18n({ withLocale: 'en', translations: {}});
-
-  Object.keys(CasinoSlider).forEach((item:any) => {
-    addNewMessages(item, CasinoSlider[item]);
-  });
-
-  let userAgent:string = window.navigator.userAgent;
-  let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
-
-  let carousel:any;
-  let activeIndex:number;
-  let prevIndex:number;
-  let customStylingContainer:HTMLElement;
-  let sliderdata:Array<any> = [];
-
-  // Clicking on the slider item will trigger this method and send a postmessage on window
-  // @TODO itemId type fix
-  let handleClick = (item:any, index:number):void => {
-    activeIndex = index;
-    activeIndex = activeIndex;
-    prevIndex = activeIndex;
-
-    window.postMessage({ type: actionevent, itemId: item.id, index, item }, window.location.href);
-  };
-
-  let scrollLeft = ():void => {
-    carousel.scrollBy({
-      left: -250,
-      behavior: 'smooth'
-    });
-  }
-
-  let scrollRight = ():void => {
-    carousel.scrollBy({
-      left: +250,
-      behavior: 'smooth'
-    });
-  }
-
-  const setActiveIndex = ():void => {
-    activeIndex = parseInt(activeindex, 10);
-    if(!prevIndex){
-      prevIndex = activeIndex;
-    }
-  }
-
-  const setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    setTimeout(() => { customStylingContainer.appendChild(sheet); });
-  }
-
-  const setClientStylingURL = ():void => {
-    let cssFile = document.createElement('style');
-    let url:URL = new URL(clientstylingurl);
-
-    if (clientstylingurl) {
-      fetch(url.href)
-        .then((res:any) => res.text())
-        .then((data:any) => {
-          cssFile.innerHTML = data
-
-          setTimeout(() => { customStylingContainer.appendChild(cssFile); }, 1);
-        });
-    }
-  }
-
-  const messageHandler = (e:any):void => {
-    if (e.data.type == 'SliderData' && e.data.identity == identity) {
-      sliderdata = e.data.data;
-    }
-  }
-
-  const setActiveLanguage = ():void => {
-    setLocale(lang);
-  }
-
-  onMount(() => {
-    window.addEventListener('message', messageHandler, false);
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
-  })
-
-  $: activeindex && setActiveIndex();
-  $: clientstyling && setClientStyling();
-  $: clientstylingurl && setClientStylingURL();
-  $: lang && setActiveLanguage();
-</script>
-
-<div class="CarouselWrapper { (location === 'headerMain') ? 'CarouselWrapperHeaderMain' : '' }" part="CarouselWrapper { (location === 'headerMain') ? 'CarouselWrapperHeaderMain' : '' }" bind:this={customStylingContainer}>
-  <div class="CarouselContainer {isMobile ? 'CarouselContainerMobile' : ''} { (location === 'headerMain') ? 'CarouselContainerHeaderMain' : '' }" part="CarouselContainer {isMobile ? 'CarouselContainerMobile' : ''} { (location === 'headerMain') ? 'CarouselContainerHeaderMain' : '' }" style="{ (location === 'headerMain') ? 'max-width: auto' : `max-width: ${containermaxwidth}px` }">
-    <div class="CarouselLeftArrow" part="CarouselLeftArrow" on:click="{() => scrollLeft()}">
-      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-      </svg>
-    </div>
-
-    <ul class="CarouselItems" part="CarouselItems" bind:this={carousel}>
-      {#if sliderdata.length > 0}
-        {#each sliderdata as category, index (category.id)}
-          <li class="CarouselItem {activeIndex == index || prevIndex == index ? 'active': ''}" part="CarouselItem" on:click={e => handleClick(category, index)}
-          >
-            {#if location === 'headerMain'}
-              <a>{category.label}</a>
-            {:else}
-              {category.name} {category.id === "FAVORITES" ? "(" + favoritesnumber + ")" : ''}
-            {/if}
-
-            {#if category?.subGroups}
-              <div class="dropdown-content">
-                {#each category?.subGroups?.items as subCategory}
-                  <a>{subCategory?.name}</a>
-                {/each}
-              </div>
-            {/if}
-          </li>
-        {/each}
-      {/if}
-    </ul>
-
-    <div class="CarouselRightArrow" part="CarouselRightArrow" on:click="{() => scrollRight()}">
-      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-      </svg>
-    </div>
-  </div>
-</div>
-
-<style lang="scss">
-
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
-  *, *::before, *::after {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-
-  .CarouselWrapper {
-    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;
-    }
-  }
-
-  .CarouselContainer {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    width: 100%;
-    color: var(--emfe-w-color-white, #FFFFFF);
-    margin: 0 auto;
-    &.CarouselContainerMobile {
-      padding: 0;
-    }
-
-    .CarouselItems {
-      position: relative;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: nowrap;
-      align-items: center;
-      //overflow-y: scroll;
-      list-style-type: none;
-      -ms-overflow-style: none;
-      scrollbar-width: none;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
-      .CarouselItem {
-        position: relative;
-        display: flex;
-        height: 100%;
-        align-items: center;
-        padding: 13px 11px;
-        font-size: 15px;
-        font-weight: 500;
-        text-align: center;
-        line-height: 26px;
-        transition: all 150ms ease-in-out;
-        white-space: nowrap;
-
-        &:hover,
-        &.active {
-          background: var(--emfe-w-color-contrast, #07072A);
-          cursor: pointer;
-        }
-      }
-    }
-
-    .dropdown-content {
-      transition: all 1s ease-in;
-      display: none;
-      position: absolute;
-      min-width: 100px;
-      height: auto;
-      top: 52px;
-      left: 0;
-      padding: 10px 11px;
-      background: var(--emfe-w-color-contrast, #07072A);  /* fallback for old browsers */
-      background: -webkit-linear-gradient(var(--emfe-w-color-contrast, #07072A), var(--emfe-w-color-primary, #D0046C));  /* Chrome 10-25, Safari 5.1-6 */
-      background: linear-gradient(var(--emfe-w-color-contrast, #07072A), var(--emfe-w-color-primary, #D0046C)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-
-      & a {
-        display: block;
-        font-weight: 400;
-        line-height: 30px;
-      }
-    }
-
-
-    .dropdown:hover .dropdown-content {
-      transition: all 1s ease-in;
-      display: block;
-      opacity: 1;
-      z-index: 999;
-    }
-
-    .CarouselLeftArrow,
-    .CarouselRightArrow {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 50%;
-      max-width: 64px;
-      background: rgba(255,255,255,.3);
-
-      svg {
-        width: 100%;
-        max-width: 39px;
-      }
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-
-  .CarouselContainerHeaderMain {
-    .CarouselItems .CarouselItem {
-      &:hover, &.active {
-        background: transparent;
-        a {
-          border-bottom: 1px solid var(--emfe-w-color-primary, #D0046C);
-          line-height: 84px;
-          color: var(--emfe-w-color-primary, #D0046C);
-        }
-      }
-      span {
-        border-top: 1px solid transparent;
-        padding-top: 5px;
-        transition-duration: 0.3s;
-      }
-    }
-  }
-
-  .CarouselContainerHeaderMain {
-    background: transparent;
-    margin: 0;
-    padding: 0;
-    .CarouselLeftArrow, .CarouselRightArrow {
-      background: transparent;
-      width: unset;
-      display: none;
-    }
-    .CarouselItem a {
-      color: var(--emfe-w-color-white, #FFFFFF);
-      text-decoration: none;
-    }
-  }
-
-  @media only screen and (max-width: 1024px) {
-    .CarouselContainerHeaderMain {
-      .CarouselLeftArrow, .CarouselRightArrow {
-        display: flex;
-      }
-    }
-  }
-</style>
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { getDevice } from 'rvhelper';
+
+  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
+  import { CasinoSlider } from './translations';
+
+  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 isprimarymenu:boolean = false;
+  export let issecondarymenu:boolean = false;
+  export let lang:string = '';
+  export let activeindex:string = '0';
+  export let showsubgroups:string = '';
+
+  setupI18n({ withLocale: 'en', translations: {}});
+
+  Object.keys(CasinoSlider).forEach((item:any) => {
+    addNewMessages(item, CasinoSlider[item]);
+  });
+
+  let userAgent:string = window.navigator.userAgent;
+  let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
+
+  let carousel:any;
+  let activeIndex:number;
+  let prevIndex:number;
+  let customStylingContainer:HTMLElement;
+  let sliderdata:Array<any> = [];
+
+  // Clicking on the slider item will trigger this method and send a postmessage on window
+  // @TODO itemId type fix
+  let handleClick = (item:any, index:number):void => {
+    activeIndex = index;
+    activeIndex = activeIndex;
+    prevIndex = activeIndex;
+
+    window.postMessage({ type: actionevent, itemId: item.id, index, item }, window.location.href);
+  };
+
+  let scrollLeft = ():void => {
+    carousel.scrollBy({
+      left: -250,
+      behavior: 'smooth'
+    });
+  }
+
+  let scrollRight = ():void => {
+    carousel.scrollBy({
+      left: +250,
+      behavior: 'smooth'
+    });
+  }
+
+  const setActiveIndex = ():void => {
+    activeIndex = parseInt(activeindex, 10);
+    if (!prevIndex) {
+      prevIndex = activeIndex;
+    }
+  }
+
+  const setClientStyling = ():void => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    setTimeout(() => { customStylingContainer.appendChild(sheet); });
+  }
+
+  const setClientStylingURL = ():void => {
+    let cssFile = document.createElement('style');
+    let url:URL = new URL(clientstylingurl);
+
+    if (clientstylingurl) {
+      fetch(url.href)
+        .then((res:any) => res.text())
+        .then((data:any) => {
+          cssFile.innerHTML = data
+
+          setTimeout(() => { customStylingContainer.appendChild(cssFile); }, 1);
+        });
+    }
+  }
+
+  const messageHandler = (e:any):void => {
+    if (e.data.type == 'SliderData' && e.data.identity == identity) {
+      sliderdata = e.data.data;
+    }
+  }
+
+  const setActiveLanguage = ():void => {
+    setLocale(lang);
+  }
+
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  })
+
+  $: activeindex && setActiveIndex();
+  $: clientstyling && setClientStyling();
+  $: clientstylingurl && setClientStylingURL();
+  $: lang && setActiveLanguage();
+</script>
+
+<div class="CarouselWrapper { (location === 'headerMain') ? 'CarouselWrapperHeaderMain' : '' }" part="CarouselWrapper { (location === 'headerMain') ? 'CarouselWrapperHeaderMain' : '' }" bind:this={customStylingContainer}>
+  <div class="CarouselContainer {isMobile ? 'CarouselContainerMobile' : ''} { (location === 'headerMain') ? 'CarouselContainerHeaderMain' : '' }" part="CarouselContainer {isMobile ? 'CarouselContainerMobile' : ''} { (location === 'headerMain') ? 'CarouselContainerHeaderMain' : '' }" style="{ (location === 'headerMain') ? 'max-width: auto' : `max-width: ${containermaxwidth}px` }">
+    <div class="CarouselLeftArrow" part="CarouselLeftArrow" on:click="{() => scrollLeft()}">
+      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+      </svg>
+    </div>
+
+    <ul class="CarouselItems" part="CarouselItems" bind:this={carousel}>
+      {#if sliderdata.length > 0}
+        {#each sliderdata as category, index (category.id)}
+          <li class="CarouselItem {activeIndex == index || prevIndex == index ? 'active': ''}" part="CarouselItem" on:click={e => handleClick(category, index)}
+          >
+            {#if location === 'headerMain'}
+              <a>{category.label}</a>
+            {:else}
+              {category.name} {category.id === "FAVORITES" ? "(" + favoritesnumber + ")" : ''}
+            {/if}
+
+            {#if category?.subGroups && showsubgroups == 'true'}
+              <div class="DropdownContent">
+                {#each category?.subGroups?.items as subCategory}
+                  <a>{subCategory?.name}</a>
+                {/each}
+              </div>
+            {/if}
+          </li>
+        {/each}
+      {/if}
+    </ul>
+
+    <div class="CarouselRightArrow" part="CarouselRightArrow" on:click="{() => scrollRight()}">
+      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+      </svg>
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
+  *, *::before, *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  .CarouselWrapper {
+    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;
+    }
+  }
+
+  .CarouselContainer {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    width: 100%;
+    color: var(--emfe-w-color-white, #FFFFFF);
+    margin: 0 auto;
+    &.CarouselContainerMobile {
+      padding: 0;
+    }
+
+    .CarouselItems {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: center;
+      overflow-y: scroll;
+      list-style-type: none;
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      .CarouselItem {
+        position: relative;
+        display: flex;
+        height: 100%;
+        align-items: center;
+        padding: 13px 11px;
+        font-size: 15px;
+        font-weight: 500;
+        text-align: center;
+        line-height: 26px;
+        transition: all 150ms ease-in-out;
+        white-space: nowrap;
+
+        &:hover,
+        &.active {
+          background: var(--emfe-w-color-contrast, #07072A);
+          cursor: pointer;
+        }
+      }
+    }
+
+    .DropdownContent {
+      position: absolute;
+      transition: all 1s ease-in;
+      display: none;
+      min-width: 100px;
+      top: 52px;
+      left: 0;
+      padding: 10px 11px;
+      background: var(--emfe-w-color-contrast, #07072A);  /* fallback for old browsers */
+      background: -webkit-linear-gradient(var(--emfe-w-color-contrast, #07072A), var(--emfe-w-color-primary, #D0046C));  /* Chrome 10-25, Safari 5.1-6 */
+      background: linear-gradient(var(--emfe-w-color-contrast, #07072A), var(--emfe-w-color-primary, #D0046C)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+      & a {
+        display: block;
+        font-weight: 400;
+        line-height: 30px;
+        text-align: left;
+      }
+    }
+
+    .CarouselItem {
+      &:hover {
+        .DropdownContent {
+          display: block;
+        }
+      }
+    }
+
+    .CarouselLeftArrow,
+    .CarouselRightArrow {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 50%;
+      max-width: 64px;
+      background: rgba(255,255,255,.3);
+
+      svg {
+        width: 100%;
+        max-width: 39px;
+      }
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .CarouselContainerHeaderMain {
+    .CarouselItems .CarouselItem {
+      &:hover, &.active {
+        background: transparent;
+        a {
+          border-bottom: 1px solid var(--emfe-w-color-primary, #D0046C);
+          line-height: 84px;
+          color: var(--emfe-w-color-primary, #D0046C);
+        }
+      }
+      span {
+        border-top: 1px solid transparent;
+        padding-top: 5px;
+        transition-duration: 0.3s;
+      }
+    }
+  }
+
+  .CarouselContainerHeaderMain {
+    background: transparent;
+    margin: 0;
+    padding: 0;
+    .CarouselLeftArrow, .CarouselRightArrow {
+      background: transparent;
+      width: unset;
+      display: none;
+    }
+    .CarouselItem a {
+      color: var(--emfe-w-color-white, #FFFFFF);
+      text-decoration: none;
+    }
+  }
+
+  @media only screen and (max-width: 1024px) {
+    .CarouselContainerHeaderMain {
+      .CarouselLeftArrow, .CarouselRightArrow {
+        display: flex;
+      }
+    }
+  }
+</style>