@everymatrix/casino-slider 1.0.11 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-slider",
-  "version": "1.0.11",
+  "version": "1.0.14",
   "main": "dist/casino-slider.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a90b005fe3a45c7d5ba83769886d60c006b3968f"
+  "gitHead": "5da9a4e3b1b2d635a921ce3981f56157191f5aa7"
 }

package/src/CasinoSlider.svelte

@@ -16,6 +16,7 @@
   export let clientstyling:string = '';
   export let clientstylingurl:string = '';
   export let identity:string = '';
+  export let translationUrl:string = '';
   export let containermaxwidth:string = '';
   export let isprimarymenu:boolean = false;
   export let issecondarymenu:boolean = false;
@@ -25,6 +26,20 @@
 
   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(CasinoSlider).forEach((item:any) => {
     addNewMessages(item, CasinoSlider[item]);
   });
@@ -34,7 +49,9 @@
 
   let carousel:any;
   let activeIndex:number;
+  let activeSubIndex:number;
   let prevIndex:number;
+  let prevSubIndex:number;
   let customStylingContainer:HTMLElement;
   let sliderdata:Array<any> = [];
   let subGroupsData: any;
@@ -43,12 +60,23 @@
 
   // 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 => {
+  let handleClick = (item:any, index:number, subItem:any, subIndex:number, itemType:string):void => {
     scrollHandler();
     activeIndex = index;
     activeIndex = activeIndex;
     prevIndex = activeIndex;
-    getSubGroups(item, index, 'navigation');
+
+    if(itemType != 'secondary') {
+      getSubGroups(item, index, 'navigation');
+      activeSubIndex = null;
+      prevSubIndex = null;
+      return;
+    }
+    
+    activeSubIndex = subIndex;
+    activeSubIndex = activeSubIndex;
+    prevSubIndex = activeSubIndex;
+    getSubGroups(subItem, subIndex, 'navigation');
   };
 
   let scrollLeft = ():void => {
@@ -107,7 +135,6 @@
 
   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())
@@ -190,6 +217,7 @@
   })
 
   $: activeindex && setActiveIndex();
+  $: translationUrl && setTranslationUrl();
   $: clientstyling && customStylingContainer && setClientStyling();
   $: clientstylingurl && customStylingContainer && setClientStylingURL();
   $: lang && setActiveLanguage();
@@ -211,7 +239,7 @@
             <li class="CarouselItem {activeIndex == index || prevIndex == index ? 'active': ''} 
             {location == 'headerMain' ? '' : 'SecondaryMenu'}"
               part="CarouselItem"
-              on:click={e => { handleClick(category, index); e.preventDefault()}}>
+              on:click={e => { handleClick(category, index, null, null, 'main'); e.preventDefault()}}>
               {#if location === 'headerMain'}
                 <a href="#">{category.label}</a>
               {:else}
@@ -221,10 +249,10 @@
                 {#if subGroupsData?.count > 0}
                   {#if subGroupsData && showsubgroups == 'true'}
                     <ul class="DropDown">
-                      {#each subGroupsData?.items as subGroupsData}
+                      {#each subGroupsData?.items as subGroupsData, subindex (subGroupsData.id)}
                         {#if subGroupsData.games.count}
-                          <li on:click={e => { handleClick(subGroupsData, index); e.stopPropagation();}}>
-                            <a class="SubDropDown">{subGroupsData?.name}</a>
+                          <li on:click={e => { handleClick(category, index, subGroupsData, subindex, 'secondary'); e.stopPropagation();}}>
+                            <a class="SubDropDown {activeSubIndex == subindex || prevSubIndex == subindex ? 'active': ''}">{subGroupsData?.name}</a>
                           </li>
                         {/if}
                       {/each}
@@ -424,7 +452,9 @@
         top: 0;
         opacity: 0;
         transition: opacity 0.1s, left 0s 0.1s, top 0.1s;
-        background: var(--emfe-w-color-primary, #D0046C);
+        background: var(--emfe-w-color-secondary, #FD2839);  /* fallback for old browsers */
+        background: -webkit-linear-gradient(var(--emfe-w-color-secondary, #FD2839), var(--emfe-w-color-primary, #D0046C));  /* Chrome 10-25, Safari 5.1-6 */
+        background: linear-gradient(var(--emfe-w-color-secondary, #FD2839), var(--emfe-w-color-primary, #D0046C)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
       }
     }
 
@@ -447,12 +477,9 @@
       opacity:0;
     }
 
-    .SubDropDown {
-      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+ */
+    .SubDropDown:hover, .SubDropDown.active {
+      color: var(--emfe-w-color-black, #000);
+      background: var(--emfe-w-color-white, #FFF);
     }
   }