@everymatrix/casino-header-controller 1.12.0 → 1.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-header-controller",
-  "version": "1.12.0",
+  "version": "1.12.2",
   "main": "dist/casino-header-controller.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5ba32db088ec6ebf8eb6110b6172d8c9409b9f70"
+  "gitHead": "22bb69e504862fb909bc5d21d62ba4178aaefe3d"
 }

package/src/CasinoHeaderController.svelte

@@ -4,7 +4,7 @@
   import { onMount } from "svelte";
   import { isMobile, getDevice } from 'rvhelper';
   import { _, addNewMessages, setLocale, setupI18n } from './i18n';
-  import { CasinoHeaderController } from './translations';
+  import { TRANSLATIONS } from './translations';
 
   import '@everymatrix/casino-slider';
   import '@everymatrix/casino-hamburger-menu';
@@ -35,7 +35,8 @@
   export let clientstyling:string = '';
   export let clientstylingurl:string = '';
 
-  let activeIndex:string;
+  let primaryActiveIndex:string;
+  let secondaryActiveIndex:string;
   let identity:string = "HeaderMenu";
   let customStylingContainer:HTMLElement;
 
@@ -54,8 +55,8 @@
     });
   }
 
-  Object.keys(CasinoHeaderController).forEach((item:any) => {
-    addNewMessages(item, CasinoHeaderController[item]);
+  Object.keys(TRANSLATIONS).forEach((item:any) => {
+    addNewMessages(item, TRANSLATIONS[item]);
   });
 
   const genericIcon:string = `<svg version="1.1" fill="#fff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 30px; color: #fff;" x="0px" y="0px"
@@ -226,15 +227,20 @@
     })
   }
 
-  const setActiveIndex = ():void => {
-    activeIndex = mainMenuArray.find(item => {
+  const initializeMenu = ():void => {
+    primaryActiveIndex = setActiveIndex(activecategory, mainMenuArray);
+    secondaryActiveIndex = setActiveIndex(activecategory, secondaryMenuArray);
+  }
+
+  const setActiveIndex = (activecategory, menuList) => {
+    return menuList.find(item => {
       if ( activecategory.indexOf('/sport') > -1 ) {
-        return item.path.indexOf(activecategory) > -1
+        return item.path.indexOf(activecategory) > -1;
       } else {
         //Opted for this solution so that when you go back from casino categories slider it will change the active index when its required from header too
-        return item.path.indexOf(activecategory.split('/')[1]) > -1
+        return item.path.split('/').indexOf(activecategory.split('/')[1]) > -1;
       }      
-    })?.id;
+    })?.id || -1;
   }
 
   const sendSliderData = ():void => {
@@ -243,7 +249,6 @@
 
   const getHeaderMenusData = (url:any):Promise<any> => {
     isLoading = true;
-
     return new Promise((resolve, reject) => {
       fetch(url)
         .then((res: any) => res.json())
@@ -318,7 +323,7 @@
     }
   });
 
-  $: activecategory && !isLoading && setActiveIndex();
+  $: activecategory && !isLoading && initializeMenu();
   $: session && setSession();
   $: lang && setActiveLanguage();
   $: cmsendpoint && lang && languageslist && userroles && initialLoad();
@@ -360,7 +365,7 @@
         <div class="HeaderTopActions" part="HeaderTopActions">
           <div class="HeaderItemsMenu PrimaryMenu" part="HeaderItemsMenu PrimaryMenu">
             <player-account-balance-modal {session} {userid} {endpoint} {lang} {clientstyling} {clientstylingurl} {customlocaleidentifier} {gmversion} {displaybalanceoption}/>
-            <div class="Item ItemDeposit" part="Item ItemDeposit" on:click={() => menuAction('deposit')}>{$_('headerItem.deposit')}</div>
+            <div class="Item ItemDeposit" part="Item ItemDeposit" on:click={() => menuAction('deposit')}>{$_('deposit')}</div>
             <div class="Item ItemAccount" part="Item ItemAccount" on:click={() => menuAction('myaccount')}>
               <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.429" viewBox="0 0 15 16.429">
                 <defs>
@@ -400,7 +405,7 @@
              use:sendSliderData
              isprimarymenu=true
              {actionevent}
-             activeindex={activeIndex}
+             activeindex={primaryActiveIndex}
              {endpoint}
              {lang}
              location="headerMain"
@@ -413,7 +418,7 @@
         <div class="HeaderTopActions" part="HeaderItemsMenu">
           <div class="HeaderItemsMenu PrimaryMenu" part="HeaderItemsMenu PrimaryMenu">
             <player-account-balance-modal {session} {userid} {endpoint} {lang} {clientstyling} {clientstylingurl} {customlocaleidentifier} {gmversion} {displaybalanceoption}/>
-            <div class="Item ItemDeposit" part="Item ItemDeposit" on:click={() => menuAction('deposit')}>{$_('headerItem.deposit')}</div>
+            <div class="Item ItemDeposit" part="Item ItemDeposit" on:click={() => menuAction('deposit')}>{$_('deposit')}</div>
             <div class="Item ItemAccount" part="Item ItemAccount" on:click={() => menuAction('myaccount')}>
               <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.429" viewBox="0 0 15 16.429">
                 <defs>
@@ -440,7 +445,7 @@
       <nav class="HeaderSecondaryNav" part="HeaderSecondaryNav">
         <ul class="HeaderItemsMenuSecondary" part="HeaderItemsMenuSecondary">
           {#each secondaryMenuArray as secondaryItem}
-            <li class="ItemSecondary" part="ItemSecondary">
+            <li class="ItemSecondary {secondaryActiveIndex?.toString().indexOf('$') > -1 ? (secondaryActiveIndex?.split("$").pop() == secondaryItem.id.split("$").pop() ? 'active': '') : (secondaryActiveIndex == secondaryItem.id ? 'active': '')}" part="ItemSecondary">
               <button on:click={() => navigationTrigger(secondaryItem)}>{secondaryItem.label}</button>
             </li>
           {/each}
@@ -478,8 +483,8 @@
 
         <div class="HeaderTopActions" part="HeaderTopActions">
           <div class="HeaderItemsMenu" part="HeaderItemsMenu">
-            <div class="Item ItemLogin" part="Item ItemLogin" on:click={()=>menuAction('login')}>{$_('headerItem.login')}</div>
-            <div class="Item ItemRegister" part="Item ItemRegister" on:click={()=>menuAction('register')}>{$_('headerItem.register')}</div>
+            <div class="Item ItemLogin" part="Item ItemLogin" on:click={()=>menuAction('login')}>{$_('login')}</div>
+            <div class="Item ItemRegister" part="Item ItemRegister" on:click={()=>menuAction('register')}>{$_('register')}</div>
           </div>
         </div>
       </div>
@@ -504,7 +509,7 @@
              use:sendSliderData
              isprimarymenu=true
              {actionevent}
-             activeindex={activeIndex}
+             activeindex={primaryActiveIndex}
              location="headerMain"
              {endpoint}
              {lang}
@@ -515,8 +520,8 @@
         </nav>
         <div class="HeaderTopActions" part="HeaderTopActions">
           <div class="HeaderItemsMenu" part="HeaderItemsMenu">
-            <div class="Item ItemLogin" part="Item ItemLogin" tabindex="0" on:click={()=>menuAction('login')}>{$_('headerItem.login')}</div>
-            <div class="Item ItemRegister" part="Item ItemRegister" tabindex="0" on:click={()=>menuAction('register')}>{$_('headerItem.register')}</div>
+            <div class="Item ItemLogin" part="Item ItemLogin" tabindex="0" on:click={()=>menuAction('login')}>{$_('login')}</div>
+            <div class="Item ItemRegister" part="Item ItemRegister" tabindex="0" on:click={()=>menuAction('register')}>{$_('register')}</div>
             <select bind:value={selectedLanguage} class="Item ItemLanguage" part="Item ItemLanguage" on:change={()=>menuAction('language')}>
               {#each languagesArray as operatorLanguage}
                 <option value={operatorLanguage}>{operatorLanguage}</option>
@@ -528,7 +533,7 @@
       <nav class="HeaderSecondaryNav" part="HeaderSecondaryNav">
         <ul class="HeaderItemsMenuSecondary" part="HeaderItemsMenuSecondary">
           {#each secondaryMenuArray as secondaryItem}
-            <li class="ItemSecondary" part="ItemSecondary">
+            <li class="ItemSecondary {secondaryActiveIndex?.toString().indexOf('$') > -1 ? (secondaryActiveIndex?.split("$").pop() == secondaryItem.id.split("$").pop() ? 'active': '') : (secondaryActiveIndex == secondaryItem.id ? 'active': '')}" part="ItemSecondary">
               <button on:click={() => navigationTrigger(secondaryItem)}>{secondaryItem.label}</button>
             </li>
           {/each}
@@ -716,10 +721,13 @@
   }
 
   .HeaderItemsMenuSecondary .ItemSecondary {
+    width: auto;
+    height: 100%;
+    display: flex;
+    justify-content: center;
     padding: 0 15px;
     font-weight: 600;
     transition-duration: 0.15s;
-    cursor: pointer;
 
     button {
       color: var(--emfe-w-color-white, #FFFFFF);
@@ -730,7 +738,6 @@
       font-weight: 600;
       text-transform: uppercase;
       cursor: pointer;
-
       &:hover {
         color: var(--emfe-w-color-primary, #D0046C);
       }
@@ -748,6 +755,9 @@
         outline: none;
       }
     }
+    &.active {
+      background: var(--emfe-w-color-primary, #D0046C);
+    }
   }
 
   .HeaderSliderMobile {

package/src/translations.js

@@ -1,72 +1,44 @@
-export const CasinoHeaderController = {
-  en: {
-    headerItem: {
-      login: 'Login',
-      register: 'Register',
-      deposit: 'Deposit',
-    },
-    fallbackSecondaryMenu: {
-      promotions: 'Promotions',
-    }
+export const TRANSLATIONS = {
+  "en": {
+    "login": "Login",
+    "register": "Register",
+    "deposit": "Deposit",
+    "promotions": "Promotions"
   },
-  'zh-hk': {
-    headerItem: {
-      login: '登錄',
-      register: '登記',
-      deposit: '訂金',
-    },
-    fallbackSecondaryMenu: {
-      promotions: '促销活动',
-    }
+  "zh-hk": {
+    "login": "登錄",
+    "register": "登記",
+    "deposit": "訂金",
+    "promotions": "促销活动"
   },
-  fr: {
-    headerItem: {
-      login: 'Connexion',
-      register: 'Enregistrer',
-      deposit: 'Dépôt',
-    },
-    fallbackSecondaryMenu: {
-      promotions: 'Promotions',
-    }
+  "fr": {
+    "login": "Connexion",
+    "register": "Enregistrer",
+    "deposit": "Dépôt",
+    "promotions": "Promotions"
   },
-  tr: {
-    headerItem: {
-      login: 'Giriş yapmak',
-      register: 'Kayıt olmak',
-      deposit: 'Depozito',
-    },
-    fallbackSecondaryMenu: {
-      promotions: 'Promosyonlar',
-    }
+  "tr": {
+    "login": "Giriş yapmak",
+    "register": "Kayıt olmak",
+    "deposit": "Depozito",
+    "promotions": "Promosyonlar"
   },
-  ro: {
-    headerItem: {
-      login: 'Autentificare',
-      register: 'Inregistrare',
-      deposit: 'Depozit',
-    },
-    fallbackSecondaryMenu: {
-      promotions: 'Promotii',
-    }
+  "ro": {
+    "login": "Autentificare",
+    "register": "Inregistrare",
+    "deposit": "Depozit",
+    "promotions": "Promotii"
   },
-  es: {
-    headerItem: {
-      login: 'Iniciar sesión',
-      register: 'Regístrate',
-      deposit: 'Deposita',
-    },
-    fallbackSecondaryMenu: {
-      promotions: 'Promociones',
-    }
+  "es": {
+    "login": "Iniciar sesión",
+    "register": "Regístrate",
+    "deposit": "Deposita",
+    "promotions": "Promociones"
   },
-  pt: {
-    headerItem: {
-      login: 'Entrar',
-      register: 'Registro',
-      deposit: 'Depósito',
-    },
-    fallbackSecondaryMenu: {
-      promotions: 'Promoções',
-    }
-  },
-};
+  "pt": {
+    "login": "Entrar",
+    "register": "Registro",
+    "deposit": "Depósito",
+    "promotions": "Promoções"
+  }
+}