@everymatrix/casino-slider 0.0.392 → 0.0.394

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-slider",
-  "version": "0.0.392",
+  "version": "0.0.394",
   "main": "dist/casino-slider.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "218aa76aa4ef72b20457a0113b4b3e3f58b2194e"
+  "gitHead": "74359bffcfcd357bb93adb3f4cbcd7badbc96fae"
 }

package/src/CasinoSlider.svelte

@@ -7,8 +7,6 @@
   import { _, addNewMessages, setLocale, setupI18n } from './i18n';
   import { CasinoSlider } from './translations';
 
-  import '@everymatrix/casino-slider-dropdown';
-
   export let endpoint:string = '';
   export let datasource:string = '';
 
@@ -24,7 +22,7 @@
   export let issecondarymenu:boolean = false;
   export let lang:string = '';
   export let activeindex:string = '0';
-  export let showsubgroups:string = '';
+  export let showsubgroups:string = 'false';
 
   setupI18n({ withLocale: 'en', translations: {}});
 
@@ -40,29 +38,38 @@
   let prevIndex: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):void => {
+    scrollHandler();
     activeIndex = index;
     activeIndex = activeIndex;
     prevIndex = activeIndex;
-
-    window.postMessage({ type: actionevent, itemId: item.id, index, item }, window.location.href);
+    getSubGroups(item, index, 'navigation');
   };
 
   let scrollLeft = ():void => {
-    carousel.scrollBy({
+    scroller.scrollBy({
       left: -250,
       behavior: 'smooth'
     });
+    if(showsubgroups == 'true') {
+      obtainSubcategories();
+    }
   }
 
   let scrollRight = ():void => {
-    carousel.scrollBy({
+    scroller.scrollBy({
       left: +250,
       behavior: 'smooth'
     });
+    if(showsubgroups == 'true') {
+      obtainSubcategories();
+    }
   }
 
   const setActiveIndex = ():void => {
@@ -70,6 +77,9 @@
     if (!prevIndex) {
       prevIndex = activeIndex;
     }
+    if(showsubgroups == 'true') {
+      obtainSubcategories();
+    }
   }
 
   const setClientStyling = ():void => {
@@ -87,7 +97,6 @@
         .then((res:any) => res.text())
         .then((data:any) => {
           cssFile.innerHTML = data
-
           setTimeout(() => { customStylingContainer.appendChild(cssFile); }, 1);
         });
     }
@@ -96,6 +105,10 @@
   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();
+      }
     }
   }
 
@@ -103,11 +116,63 @@
     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}/casino/groups/${datasource}/${item.id}/subGroups?language=${lang}`);
+      fetch(url.href)
+        .then((res:any) => res.json())
+        .then((data:any) => {
+          subGroupsData = data;
+          if(showsubgroups == 'false') {
+            window.postMessage({ type: actionevent, itemId: item.id, index, item }, window.location.href);
+          } else {
+            if(trigger == 'navigation' && subGroupsData.count <= 0) {
+              window.postMessage({ type: actionevent, itemId: item.id, index, item }, window.location.href);
+            }
+          }
+
+        }).then(() => {
+          if(carousel.querySelectorAll(".DropDown")) scrollHandler();
+        });
+    }
+  }
+
+  /* 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);
+      }
+    });
+  }
+
   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);
     }
   })
 
@@ -118,38 +183,48 @@
 </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="CarouselContainer 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>
+    
+    <div class="CarouselNavWrap" bind:this={scroller}>
+      <ul id="CarouselNav" class="CarouselItems" part="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 == index || prevIndex == index ? 'active': ''}"
+              part="CarouselItem"
+              on:click={e => { handleClick(category, index); e.preventDefault()}}>
+              {#if location === 'headerMain'}
+                <a href="#">{category.label}</a>
+              {:else}
+                <a href="#">{category.name} {category.id === "FAVORITES" ? "(" + favoritesnumber + ")" : ''}</a>
+              {/if}
+              {#if itemsActive[index] == true}
+                {#if subGroupsData?.count > 0}
+                  {#if subGroupsData && showsubgroups == 'true'}
+                    <ul class="DropDown">
+                      {#each subGroupsData?.items as subGroupsData}
+                        {#if subGroupsData.games.count}
+                          <li on:click={e => { handleClick(subGroupsData, index); e.stopPropagation();}}>
+                            <a href="#">{subGroupsData?.name}</a>
+                          </li>
+                        {/if}
+                      {/each}
+                    </ul>
+                  {/if}
+                {/if}
+              {/if}
+
+            </li>
+          {/each}
+        {/if}
+      </ul>
+    </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}
-            <casino-slider-dropdown
-              {favoritesnumber}
-              categoryid={category.id}
-              {showsubgroups}
-              {location}
-              {endpoint}
-              {lang}
-              {datasource}
-            >
-            </casino-slider-dropdown>
-          </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>
@@ -158,8 +233,6 @@
   </div>
 </div>
 
-
-
 <style lang="scss">
 
   :host {
@@ -193,72 +266,74 @@
       padding: 0;
     }
 
-    .CarouselItems {
-      position: relative;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: nowrap;
+    ul {
       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;
+      li {
         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;
-
+        display: inline-block;
+        text-align: left;
+        word-spacing: normal;
+         > a {
+          position: relative;
+        }
         &:hover,
-        &.active {
+        &.active,
+        &:focus,
+        &:focus-within {
           background: var(--emfe-w-color-contrast, #07072A);
           cursor: pointer;
-          casino-slider-dropdown {
-            display: block;
-          }
         }
-
-
+      }
+      li > a {
+        position: relative;
       }
     }
 
-    casino-slider-dropdown {
-      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;
-      }
+    ul li:hover,
+    ul > li > a:hover,
+    ul li:focus,
+    ul > li > a:focus {
+      z-index: 105;
     }
 
-    .CarouselItem {
-      &:hover {
-        casino-slider-dropdown {
-          display: block;
-        }
-      }
+    .CarouselItems li:hover > ul {
+      left: auto;
+      top: auto;
+      opacity: 1;
+      transition: opacity 0.5s linear, top 0.5s;
+    }
+    .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,
@@ -274,17 +349,94 @@
         width: 100%;
         max-width: 39px;
       }
+    }
 
-      &:hover {
-        cursor: pointer;
+    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;
+        & > a {
+          position: relative;
+        }
+
+        li {
+          display: block;
+        }
+      }
+      a {
+        display: block;
+        padding: 7px 10px;
+        color: var(--emfe-w-color-white, #FFFFFF);
+        text-decoration: none;
+        white-space: nowrap;
+        position: relative;
+      }
+      li:hover > a,
+      a:hover,
+      li:focus > a,
+      a:focus {
+        background: var(--emfe-w-color-contrast, #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-color-primary, #D0046C);
+      }
+    }
+
+    /* 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-color-contrast, #07072A);
+      color: var(--emfe-w-color-white, #FFFFFF);
+    }
+
+    /* Remove hover when scrolling  */
+    .isScrolling .CarouselItems ul.DropDown{ 
+      left: -999em;
+      opacity:0;
+    }
   }
 
   .CarouselContainerHeaderMain {
     .CarouselItems .CarouselItem {
-      &:hover, &.active {
-        background: transparent;
+      &:hover,
+      &.active,
+      &:focus,
+      &:focus-within {
+        background: var(--emfe-w-color-primary, #D0046C);;
         a {
           border-bottom: 1px solid var(--emfe-w-color-primary, #D0046C);
           line-height: 84px;
@@ -314,6 +466,47 @@
     }
   }
 
+
+/* 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 {
@@ -321,4 +514,5 @@
       }
     }
   }
+
 </style>