@everymatrix/casino-slider 1.44.0 → 1.45.2

package/src/CasinoSlider.svelte

@@ -1,614 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { getDevice } from 'rvhelper';
-
-  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
-  import { TRANSLATIONS } from './translations';
-
-  export let endpoint:string = '';
-  export let datasource:string = '';
-  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 translationurl:string = '';
-  export let isprimarymenu:boolean = false;
-  export let issecondarymenu:boolean = false;
-  export let lang:string = '';
-  export let activeindex:string = '0';
-  export let showsubgroups:string = 'false';
-  export let categoriesicon:string = 'false';
-  export let lobbyiconimage:string = '';
-  export let mygamesiconimage:string = '';
-
-  setupI18n({ withLocale: 'en', translations: {}});
-
-  const setTranslationUrl = ():void => {
-    let url:string = translationurl;
-
-    fetch(url).then((res:any) => res.json())
-    .then((res) => {
-      Object.keys(res).forEach((item:any):void => {
-        addNewMessages(item, res[item]);
-      });
-    }).catch((err:any) => {
-      console.log(err);
-    });
-  }
-
-
-  Object.keys(TRANSLATIONS).forEach((item:any) => {
-    addNewMessages(item, TRANSLATIONS[item]);
-  });
-
-  let userAgent:string = window.navigator.userAgent;
-  let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
-
-  let carousel:any;
-  let activeIndex:any;
-  let activeSubIndex:number;
-  let prevIndex:number;
-  let prevSubIndex:number;
-  let customStylingContainer:HTMLElement;
-  let sliderdata:Array<any> = [];
-  let subGroupsData: any[] = [];
-  let itemsActive:Array<boolean> = [];
-  let scroller:HTMLElement;
-
-  // 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, subItem:any, subIndex:number, itemType:string):void => {
-    // guard against triggering on main categories which have subcategories, as per business requirement
-    if (item.subGroups && subIndex === null) return;
-
-    scrollHandler();
-    activeIndex = index;
-    activeIndex = activeIndex;
-    prevIndex = activeIndex;
-
-    if(itemType != 'secondary') {
-      window.postMessage({ type: actionevent == 'CategoryChange' ? 'CategoryChange' : 'NavigateTo', buzz: '1', itemId: item.id, index, item, path: item.path, externalLink: item.externalLink || false, target: item.attrs?.target || null}, window.location.href);
-      activeSubIndex = null;
-      prevSubIndex = null;
-      return;
-    }
-
-    activeSubIndex = subIndex;
-    activeSubIndex = activeSubIndex;
-    prevSubIndex = activeSubIndex;
-    window.postMessage({ type: actionevent, itemId: subItem.id, subIndex, subItem }, window.location.href);
-  };
-
-  let scrollLeft = ():void => {
-    scroller.scrollBy({
-      left: -250,
-      behavior: 'smooth'
-    });
-  }
-
-  let scrollRight = ():void => {
-    scroller.scrollBy({
-      left: +250,
-      behavior: 'smooth'
-    });
-  }
-
-  const setActiveIndex = ():void => {
-    if (!prevIndex || (prevIndex != activeIndex && activeIndex != -1)) { 
-      prevIndex = activeIndex;
-    }
-  }
-
-  const messageHandler = (e:any):void => {
-    if (e.data.type == 'SliderData' && e.data.identity == identity) {
-      sliderdata = e.data.data;
-      itemsActive = new Array(sliderdata.length).fill(false);
-      if(showsubgroups == 'true') {
-        obtainSubcategories();
-      }
-    }
-
-    if (e.data.type == 'GoToHomepage') {
-      sliderdata.forEach((item, index) => {
-        if(item.path.endsWith('/casino')) {
-          activeIndex = index;
-          activeIndex = activeIndex;
-          prevIndex = activeIndex;
-        }
-      })
-    }}
-    
-
-  const setActiveLanguage = ():void => {
-    setLocale(lang);
-  }
-
-  const getSubGroups = (item:string, index?:number, trigger?:string):void => {
-    if(location == 'secondaryMenu' && endpoint && datasource && lang && item.id) {
-      let url:URL = new URL(`${endpoint}/v1/casino/groups/${datasource}/${item.id}/subGroups?language=${lang}`);
-      fetch(url.href)
-        .then((res:any) => res.json())
-        .then((data:any) => {
-          data.index = index;
-          subGroupsData = subGroupsData.concat(data);
-          
-          if(showsubgroups == 'false') {
-            window.postMessage({ type: actionevent, itemId: item.id, index, item }, window.location.href);
-          } else {
-            if(trigger == 'navigation' && subGroupsData.length <= 0) {
-              window.postMessage({ type: actionevent, itemId: item.id, index, item }, window.location.href);
-            }
-          }
-          
-          //Send list of subgroups ids
-          const subGroupsIds: any[] = [];
-          subGroupsData.map(subGroup => {
-            subGroup.items.forEach(item => { 
-              if(!subGroupsIds.find(id => item.id == id)){
-                subGroupsIds.push(item.id);
-              }
-            });
-            return subGroupsIds.flat();
-          });
-          window.postMessage({type: 'SubgroupsIds', subGroupsIds: subGroupsIds}, window.location.href);
-
-
-        }).then(() => {
-          if(carousel.querySelectorAll(".DropDown")) scrollHandler();
-        });
-    }
-
-    if(location == 'headerMain'){
-      window.postMessage({ type: actionevent, item }, window.location.href);
-    }
-  }
-
-  
-  /* Listen for scroll */
-  const scrollHandler = () => {
-    const dropDown = carousel.querySelectorAll(".DropDown");
-    (document.activeElement as HTMLElement).blur();
-
-    scroller.classList.add("isScrolling");
-    for (let i = 0; i < dropDown.length; i++) {
-      dropDown[i].style.transform = "translateX(-" + scroller.scrollLeft + "px)";
-    }
-    scroller.classList.remove("isScrolling");
-  }
-
-  const obtainSubcategories = () => {
-    sliderdata.forEach((category, index) => {
-      if(category?.subGroups?.count > 0) {
-        itemsActive[index] = true;
-        getSubGroups(category, index);
-      }
-    });
-  }
-
-  const setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = ():void => {
-    let cssFile = document.createElement('style');
-    let url:URL = new URL(clientstylingurl);
-
-    fetch(url.href)
-      .then((res:any) => res.text())
-      .then((data:any) => {
-        cssFile.innerHTML = data
-        
-        setTimeout(() => { customStylingContainer.appendChild(cssFile); }, 1);
-      });
-  }
-
-  const handleSrc = (category) => {
-    let icon = '';
-    if(category.id==='LOBBY') {
-      icon = lobbyiconimage;
-    } else if(category.id==='MYGAMES') {
-      icon = mygamesiconimage;
-    } 
-    return category.icon || icon;
-  }
-
-  onMount(() => {
-    if ("ontouchstart" in document.documentElement) {
-      document.documentElement.className += " touch-device";
-    }
-
-    window.addEventListener('message', messageHandler, false);
-
-    setTimeout(() => {
-      scroller.addEventListener('scroll', scrollHandler);
-    }, 500);
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-      carousel.removeEventListener('scroll', scrollHandler);
-    }
-  })
-
-  $: activeindex && setActiveIndex();
-  $: translationurl && setTranslationUrl();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-  $: lang && setActiveLanguage();
-</script>
-
-<div class="CarouselWrapper { (location === 'headerMain') ? 'CarouselWrapperHeaderMain' : '' }" bind:this={customStylingContainer}>
-  <div 
-    class={`CarouselContainer CarouselContainerMobile ${ location === 'headerMain' ? 'CarouselContainerHeaderMain' : '' }`}
-    style="{ (location === 'headerMain') ? 'max-width: auto' : undefined }"
-  >
-    <div class="CarouselLeftArrow" on:click="{() => scrollLeft()}">
-      <svg fill="none" stroke="var(--emfe-w-categories-arrows, var( --emfe-w-color-white, #FFFFFF));" 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>
-    
-    <div class="CarouselNavWrap" bind:this={scroller}>
-      <ul id="CarouselNav" class="CarouselItems" bind:this={carousel}>
-        <li class="TouchOnly"><a href="#CarouselNav">Close Subs</a></li>
-        {#if sliderdata.length > 0}
-
-          {#each sliderdata as category, index (category.id)}
-          <li class="CarouselItem {activeindex?.toString().indexOf('$') > -1 ? (activeindex?.split("$").pop() == category.id.split("$").pop() ? 'active': '') : (activeindex == category.id ? 'active': '')} 
-            {location == 'headerMain' ? '' : 'SecondaryMenu'}"
-              part="CarouselItem"
-              on:click={e => { handleClick(category, index, null, null, 'main'); e.preventDefault()}}>
-                <div class="CategoryIcon">
-                  <img class="CategoryIconImg {categoriesicon === 'true' ? '' : 'DisplayNone' }" src="{handleSrc(category)}">
-                </div>
-              {#if location === 'headerMain'}
-                <a href="{category.path}">{category.label}</a>
-              {:else}
-                <button class="CategoryButton">{category.name}</button>
-              {/if}
-              {#if itemsActive[index] == true}
-                {#if subGroupsData.length > 0 && showsubgroups == 'true'}
-                  <ul class="DropDown">
-                    {#each subGroupsData as subGroup}
-                        {#each subGroup.items as subGroupItem, subindex (subGroupItem.id)}
-                          {#if index == subGroup.index}
-                            <li on:click={e => { handleClick(category, index, subGroupItem, subindex, 'secondary'); e.stopPropagation();}}>
-                              <a class="SubDropDown {index == activeIndex && (activeSubIndex == subindex || prevSubIndex == subindex) ? 'active': ''}">{subGroupItem?.name}</a>
-                            </li>
-                          {/if}   
-                        {/each}
-                    {/each}
-                  </ul>
-                {/if}
-              {/if}
-            </li>
-          {/each}
-        {/if}
-      </ul>
-    </div>
-
-    <div class="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">
-
-
-
-  *, *::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-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));  /* Chrome 10-25, Safari 5.1-6 */
-    background: linear-gradient(to left, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, 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-categories-typography, var(--emfe-w-color-white, #FFFFFF));
-    margin: 0 auto;
-    max-width: 1300px;
-    &.CarouselContainerMobile {
-      padding: 0;
-    }
-
-    ul {
-      align-items: center;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-      li {
-        height: 100%;
-        align-items: center;
-        font-size: 15px;
-        font-weight: 500;
-        line-height: 26px;
-        white-space: nowrap;
-        display: inline-block;
-        text-align: left;
-        word-spacing: normal;
-         > a {
-          position: relative;
-        }
-        &.SecondaryMenu{
-          &:hover,
-          &.active,
-          &:focus,
-          &:focus-within {
-            background: var(--emfe-w-categories-contrast, var(--emfe-w-color-background, #07072A));
-            cursor: pointer;
-          }
-        }
-      }
-      li > a {
-        position: relative;
-      }
-    }
-
-    ul li:hover,
-    ul > li > a:hover,
-    ul li:focus,
-    ul > li > a:focus {
-      z-index: 105;
-    }
-
-    .CarouselItems li:hover > ul {
-      left: auto;
-      top: auto;
-      opacity: 1;
-      transition: opacity 0.5s linear;
-    }
-    .CarouselItems li:focus-within > ul {
-      left: auto;
-      top: auto;
-      opacity: 1;
-      transition: opacity 0.5s linear, top 0.5s;
-    }
-    .CarouselItems ul ul {
-      transition: opacity 0.4s, left 0s 0.4s, margin 0s 0.4s;
-      z-index: 103;
-    }
-    .CarouselItems li li:hover ul {
-      top: auto;
-      margin-left: 100%;
-      transform: translateY(-2.2rem);
-      opacity: 1;
-      transition: opacity 0.5s linear, margin 0.5s;
-    }
-    .CarouselItems li li:focus-within ul {
-      top: auto;
-      margin-left: 100%;
-      transform: translateY(-2.2rem);
-      opacity: 1;
-      transition: opacity 0.5s linear, margin 0.5s;
-    }
-
-    .CarouselLeftArrow,
-    .CarouselRightArrow {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 50%;
-      max-width: 64px;
-      background: var(--emfe-w-categories-arrows-bg, var(--emfe-w-color-gray-transparency-30, rgba(255, 255, 255, .3) ));
-
-      svg {
-        width: 100%;
-        max-width: 39px;
-        stroke: var(--emfe-w-categories-arrows, var( --emfe-w-color-white, #FFFFFF));
-      }
-    }
-
-    h1 {
-      text-align: center;
-    }
-    ul {
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
-    .CarouselNavWrap {
-      overflow-y: scroll;
-      white-space: nowrap;
-      list-style-type: none;
-      -ms-overflow-style: none;
-      scrollbar-width: none;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-
-    .CarouselItems {
-      display: table; /* White-space fix */
-      width: 100%;
-      text-align: center;
-      li {
-        display: inline-block;
-        text-align: left;
-        padding: 7px 10px;
-        & > a {
-          position: relative;
-        }
-
-        li {
-          display: block;
-        }
-      }
-      button {
-        background: none;
-        border: none;
-        color: var(--emfe-w-categories-typography, var(--emfe-w-color-white, #FFFFFF));
-        text-decoration: none;
-        white-space: nowrap;
-        position: relative;
-      }
-      a {
-        display: block;
-        color: var(--emfe-w-categories-typography, var(--emfe-w-color-white, #FFFFFF));
-        text-decoration: none;
-        white-space: nowrap;
-        position: relative;
-      }
-      &.SecondaryMenu {
-        li:hover > a,
-        a:hover,
-        li:focus > a,
-        a:focus {
-          background: var(--emfe-w-categories-contrast, var(--emfe-w-color-background, #07072A));
-        }
-      }
-      ul {
-        position: absolute;
-        z-index: 104;
-        left: -999em;
-        top: 0;
-        opacity: 0;
-        transition: opacity 0.1s, left 0s 0.1s, top 0.1s;
-        background: var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839));  /* fallback for old browsers */
-        background: -webkit-linear-gradient(var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));  /* Chrome 10-25, Safari 5.1-6 */
-        background: linear-gradient(var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C))); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-      }
-    }
-
-    /* Allow touch to play */
-    .CarouselItems .TouchOnly {
-      display: none;
-      left: -10px;
-    }
-    .touch-device .CarouselItems .TouchOnly {
-      display: inline-block;
-    }
-    .touch-device .CarouselItems .TouchOnly a {
-      background: var(--emfe-w-categories-contrast, var(--emfe-w-color-background, #07072A));
-      color: var(--emfe-w-categories-typography, var(--emfe-w-color-white, #FFFFFF));
-    }
-
-    /* Remove hover when scrolling  */
-    .isScrolling .CarouselItems ul.DropDown{ 
-      left: -999em;
-      opacity:0;
-    }
-
-    .SubDropDown:hover, .SubDropDown.active {
-      color: var(--emfe-w-categories-contrast, var(--emfe-w-color-contrast, #07072A));
-      background: var(--emfe-w-categories-typography, var(--emfe-w-color-white, #FFFFFF));
-    }
-  }
-
-  .CarouselContainerHeaderMain {
-    .CarouselItems .CarouselItem {
-      &:hover,
-      &.active,
-      &:focus,
-      &:focus-within {
-        a {
-          border-bottom: 1px solid var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
-          color: var(--emfe-w-header-color-primary, 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-header-typography, var(--emfe-w-color-white, #FFFFFF));
-      text-decoration: none;
-    }
-  }
-
-
-/* Arrows */
-.CarouselItems {
-  li a:first-child:not(:last-child) {
-    padding-right: 20px; /* make space for arrows*/
-  }
-  li a:first-child:not(:last-child):after {
-    content: "";
-    position: absolute;
-    right: 3px;
-    top: 50%;
-    margin-top: -6px;
-    width: 0;
-    height: 0;
-    border-top: 6px solid transparent;
-    border-bottom: 6px solid transparent;
-    border-left: 6px solid var(--emfe-w-color-white, #FFFFFF);
-  }
-  &> li > a:first-child:not(:last-child):after {
-    border-left: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-top: 6px solid var(--emfe-w-color-white, #FFFFFF);
-    border-bottom: none;
-    margin-top: -3px;
-  }
-  li:hover a:first-child:not(:last-child):after {
-    border-left-color: var(--emfe-w-color-white, #FFFFFF);
-  }
-  li:focus-within a:first-child:not(:last-child):after {
-    border-left-color: var(--emfe-w-color-white, #FFFFFF);
-  }
-  &> li:hover > a:first-child:not(:last-child):after {
-    border-left-color: transparent;
-    border-top-color: var(--emfe-w-color-white, #FFFFFF);
-  }
-  &> li:focus-within > a:first-child:not(:last-child):after {
-    border-left-color: transparent;
-    border-top-color: var(--emfe-w-color-white, #FFFFFF);
-  }
-}
-
-  @media only screen and (max-width: 1024px) {
-    .CarouselContainerHeaderMain {
-      .CarouselLeftArrow, .CarouselRightArrow {
-        display: flex;
-      }
-    }
-  }
-
-  .CategoryIconImg {
-    height: 20px;
-    margin: 0 auto;
-    display: block;
-  }
-
-  .DisplayNone {
-    display: none;
-  }
-
-</style>

package/src/i18n.js

@@ -1,27 +0,0 @@
-import {
-  dictionary,
-  locale,
-  addMessages,
-  _
-} from 'svelte-i18n';
-
-function setupI18n({ withLocale: _locale, translations }) {
-  locale.subscribe((data) => {
-    if (data == null) {
-      dictionary.set(translations);
-      locale.set(_locale);
-    }
-  }); // maybe we will need this to make sure that the i18n is set up only once
-  /*dictionary.set(translations);
-  locale.set(_locale);*/
-}
-
-function addNewMessages(lang, dict) {
-  addMessages(lang, dict);
-}
-
-function setLocale(_locale) {
-  locale.set(_locale);
-}
-
-export { _, setupI18n, addNewMessages, setLocale };

package/src/index.ts

@@ -1,4 +0,0 @@
-import CasinoSlider from './CasinoSlider.svelte';
-
-!customElements.get('casino-slider') && customElements.define('casino-slider', CasinoSlider);
-export default CasinoSlider;

package/src/translations.js

@@ -1,52 +0,0 @@
-export const TRANSLATIONS = {
-  "en": {
-    "login": "Login",
-    "register": "Register",
-    "deposit": "Deposit"
-  },
-  "zh-hk": {
-    "login": "登錄",
-    "register": "登記",
-    "deposit": "訂金"
-  },
-  "fr": {
-    "login": "Connexion",
-    "register": "Registre",
-    "deposit": "Dépôt"
-  },
-  "tr": {
-    "login": "Giriş",
-    "register": "Kayıt",
-    "deposit": "Para Yatır"
-  },
-  "ro": {
-    "login": "Autentificare",
-    "register": "Inregistrare",
-    "deposit": "Depozit"
-  },
-  "es": {
-    "login": "Iniciar sesión",
-    "register": "Regístrate",
-    "deposit": "Deposita"
-  },
-  "pt": {
-    "login": "Entrar",
-    "register": "Registro",
-    "deposit": "Depósito"
-  },
-  "hr": {
-    "login": "Prijava",
-    "register": "Registracija",
-    "deposit": "Uplata"
-  },
-  "pt-br": {
-    "login": "Entrem",
-    "register": "Registro",
-    "deposit": "Depósito"
-  },
-  "es-mx": {
-    "login": "Entrar",
-    "register": "Registro",
-    "deposit": "Depósito"
-  }
-}