@everymatrix/casino-header-controller 0.0.223 → 0.0.228

package/index.html

@@ -33,6 +33,7 @@
       bannermatrix="https://bannermatrix-stage.everymatrix.com"
       operatorid="2095"
       pagetag="casino-page"
+      actionevent="HeaderMenuItemClicked"
       positiontag="center-main-slider">
     </casino-header-controller>
   </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-header-controller",
-  "version": "0.0.223",
+  "version": "0.0.228",
   "main": "dist/casino-header-controller.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -38,5 +38,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5372f53977f5b7ba141b1afe5dc2b85d2c0bc9e7"
+  "gitHead": "29054c0e1620b86e700d983b67e48278178a239d"
 }

package/src/CasinoHeaderController.svelte

@@ -19,51 +19,56 @@
   export let cmsenv:string = 'stage';
   export let lang:string = '';
   export let languageslist:string = 'en,ro';
-  export let identity:string = '';
+  export let activecategory:string = '';
 
   export let operatorid:string = '';
   export let pagetag:string = '';
   export let positiontag:string = '';
 
+  export let actionevent:string = '';
+
+  let activeIndex:number = 0;
+  let identity:string = "HeaderMenu";
+
   setupI18n({ withLocale: 'en', translations: {}});
 
   Object.keys(CasinoHeaderController).forEach((item:any) => {
     addNewMessages(item, CasinoHeaderController[item]);
   });
 
-  const genericIcon = `<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"
+  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"
     viewBox="0 0 384.971 384.971" style="enable-background:new 0 0 384.971 384.971;" xml:space="preserve">
-     <path style="color: #fff" d="M180.455,360.91H24.061V24.061h156.394c6.641,0,12.03-5.39,12.03-12.03s-5.39-12.03-12.03-12.03H12.03
+     <path style="color: var(--emfe-w-color-white, #FFFFFF)" d="M180.455,360.91H24.061V24.061h156.394c6.641,0,12.03-5.39,12.03-12.03s-5.39-12.03-12.03-12.03H12.03
        C5.39,0.001,0,5.39,0,12.031V372.94c0,6.641,5.39,12.03,12.03,12.03h168.424c6.641,0,12.03-5.39,12.03-12.03
        C192.485,366.299,187.095,360.91,180.455,360.91z"/>
-     <path style="color: #fff" d="M381.481,184.088l-83.009-84.2c-4.704-4.752-12.319-4.74-17.011,0c-4.704,4.74-4.704,12.439,0,17.179l62.558,63.46H96.279
+     <path style="color: var(--emfe-w-color-white, #FFFFFF)" d="M381.481,184.088l-83.009-84.2c-4.704-4.752-12.319-4.74-17.011,0c-4.704,4.74-4.704,12.439,0,17.179l62.558,63.46H96.279
        c-6.641,0-12.03,5.438-12.03,12.151c0,6.713,5.39,12.151,12.03,12.151h247.74l-62.558,63.46c-4.704,4.752-4.704,12.439,0,17.179
        c4.704,4.752,12.319,4.752,17.011,0l82.997-84.2C386.113,196.588,386.161,188.756,381.481,184.088z"/>
   </svg>`;
 
-  let mainMenuArray = [];
-  let secondaryMenuArray = [];
-  let selectedLanguage = '';
-  let hamburgerURL: any;
-  let headerURL: any;
-  let isLoading: boolean = true;
-
-  let mobileView: boolean = false;
-  let userAgent: string = window.navigator.userAgent;
-  let isLoggedIn: boolean = false;
-  let playerID: string = '';
-  let sessionID: string = '';
-  let loginActive: boolean = true;
-  let language: string = '';
-  let languagesArray: Array<string> = [];
+  let mainMenuArray:Array<any> = [];
+  let secondaryMenuArray:Array<any> = [];
+  let selectedLanguage:string = '';
+  let hamburgerURL:URL;
+  let headerURL:URL;
+  let isLoading:boolean = true;
+
+  let mobileView:boolean = false;
+  let userAgent:string = window.navigator.userAgent;
+  let isLoggedIn:boolean = false;
+  let playerID:string = '';
+  let sessionID:string = '';
+  let loginActive:boolean = true;
+  let language:string = '';
+  let languagesArray:Array<string> = [];
   // use for medium devices styling, if necessary
   // const mediaQuery = window.matchMedia('(min-width: 768px)');
-  let hamburgerMenuActive: boolean = false;
+  let hamburgerMenuActive:boolean = false;
 
-  let totalBalance: string = '';
-  let cashBalance: string = '';
-  let bonusBalance: string = '';
-  let currency: string = '';
+  let totalBalance:string = '';
+  let cashBalance:string = '';
+  let bonusBalance:string = '';
+  let currency:string = '';
 
   const menuAction = (data: any) => {
     switch (data) {
@@ -92,10 +97,6 @@
       case 'language':
         window.postMessage({type: 'LanguageChanged', selectedLanguage}, window.location.href);
         break;
-
-      default:
-        // do nothing
-        break;
     }
   }
 
@@ -107,7 +108,6 @@
   const messageHandler = (e: any) => {
     if (e.data) {
       switch (e.data.type) {
-
         case 'UserSessionID':
           playerID = e.data.userid;
           sessionID = e.data.session;
@@ -128,10 +128,6 @@
           createCMSUrls();
           getHeaderMenusData(headerURL);
           break;
-
-        default:
-          // do nothing
-          break;
       }
     }
   }
@@ -174,6 +170,14 @@
     getHeaderMenusData(headerURL);
   }
 
+  const setActiveIndex = ():void => {
+    activeIndex = mainMenuArray.map((item) => item.path).indexOf(activecategory);
+  }
+
+  const sendSliderData = (sliderData:any):void => {
+    window.postMessage({ type: 'SliderData', identity, data: mainMenuArray }, window.location.href);
+  }
+
   const getHeaderMenusData = (url:any):Promise<any> => {
     isLoading = true;
 
@@ -206,6 +210,7 @@
     }
   });
 
+  $: activecategory && !isLoading && setActiveIndex();
   $: session && setSession();
   $: lang && setActiveLanguage();
   $: cmsendpoint && lang && languageslist && initialLoad();
@@ -221,7 +226,7 @@
                  viewBox="0 0 22 16">
               <defs>
                 <style>.a {
-                  fill: #fff;
+                  fill: var(--emfe-w-color-white, #FFFFFF);
                 }
                 </style>
               </defs>
@@ -245,7 +250,7 @@
               <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.429" viewBox="0 0 15 16.429">
                 <defs>
                   <style>.a {
-                    fill: #fff;
+                    fill: var(--emfe-w-color-white, #FFFFFF);
                   }
                   </style>
                 </defs>
@@ -269,8 +274,7 @@
 
         <nav class="HeaderMainNav">
           {#if !isLoading}
-            <casino-slider class="HeaderItemsMenu" sliderdata={mainMenuArray} {identity} onclickeventname=""
-                           location="headerMain"/>
+            <casino-slider class="HeaderItemsMenu" {identity} use:sendSliderData {actionevent} activeindex={activeIndex} location="headerMain"/>
           {/if}
         </nav>
         <div class="HeaderTopActions">
@@ -281,7 +285,7 @@
               <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.429" viewBox="0 0 15 16.429">
                 <defs>
                   <style>.a {
-                    fill: #fff;
+                    fill: var(--emfe-w-color-white, #FFFFFF);
                   }
                   </style>
                 </defs>
@@ -318,7 +322,7 @@
                viewBox="0 0 22 16">
             <defs>
               <style>.a {
-                fill: #fff;
+                fill: var(--emfe-w-color-white, #FFFFFF);
               }
               </style>
             </defs>
@@ -350,8 +354,7 @@
 
         <nav class="HeaderMainNav">
           {#if !isLoading}
-            <casino-slider class="HeaderItemsMenu" sliderdata={mainMenuArray} {identity} onclickeventname=""
-                           location="headerMain"/>
+            <casino-slider class="HeaderItemsMenu" {identity} use:sendSliderData {actionevent} activeindex={activeIndex} location="headerMain"/>
           {/if}
         </nav>
         <div class="HeaderTopActions">
@@ -398,7 +401,7 @@
   }
 
   .HeaderWrapper {
-    background: #050518;
+    background: var(--emfe-w-color-header-bg, #050518);
   }
 
   .HeaderContainer {
@@ -427,8 +430,8 @@
   .HeaderSecondaryNav {
     flex-direction: row;
     width: 100%;
-    background: #050518;
-    border-top: 1px solid #58586B;
+    background: var(--emfe-w-color-header-bg, #050518);
+    border-top: 1px solid var(--emfe-w-color-gray-300, #58586B);
   }
 
   .HeaderItemsMenu {
@@ -436,7 +439,7 @@
     align-content: flex-start;
     list-style: none;
     text-transform: uppercase;
-    color: #FFF;
+    color: var(--emfe-w-color-white, #FFFFFF);
     font-size: ttp(1);
     align-items: center;
 
@@ -458,14 +461,14 @@
   }
 
   .Item a {
-    color: #FFF;
+    color: var(--emfe-w-color-white, #FFFFFF);
     text-decoration: none;
     border-top: 1px solid transparent;
   }
 
   .Item a:hover {
-    color: #D0046C;
-    border-top: 1px solid #D0046C;
+    color: var(--emfe-w-color-primary, #D0046C);
+    border-top: 1px solid var(--emfe-w-color-primary, #D0046C);
     padding-top: 5px;
   }
 
@@ -473,7 +476,7 @@
     border-radius: ttp(0.3125);
     background: transparent;
     font-size: ttp(0.875);
-    border: solid 1px #FFF;
+    border: solid 1px var(--emfe-w-color-white, #FFFFFF);
     height: ttp(2.75);
     text-align: center;
     line-height: ttp(2.75);
@@ -483,7 +486,7 @@
 
   .ItemRegister, .ItemDeposit {
     border-radius: ttp(0.3125);
-    background: #E32D2C;
+    background: var(--emfe-w-color-primary, #D0046C);
     font-size: ttp(0.875);
     height: ttp(2.75);
     text-align: center;
@@ -492,7 +495,7 @@
   }
 
   .ItemDeposit {
-    background: #D0046C;
+    background: var(--emfe-w-color-primary, #D0046C);
   }
 
   .ItemLanguage {
@@ -501,18 +504,18 @@
     text-align: center;
     line-height: 44px;
     background: transparent;
-    color: #fff;
+    color: var(--emfe-w-color-white, #FFFFFF);
     border: none;
     cursor: pointer;
 
     option {
-      color: #0a0c19;
+      color: var(--emfe-w-color-contrast, #07072A);
     }
   }
 
   .ItemBalance {
     background: transparent;
-    color: #fff;
+    color: var(--emfe-w-color-white, #FFFFFF);
     border: 0;
   }
 
@@ -533,7 +536,7 @@
     height: ttp(3.75);
     list-style: none;
     text-transform: uppercase;
-    color: #FFF;
+    color: var(--emfe-w-color-white, #FFFFFF);
     font-size: ttp(0.875);
     max-width: ttp(80);
     margin: 0 auto;
@@ -548,13 +551,13 @@
     transition-duration: 0.15s;
 
     a {
-      color: #fff;
+      color: var(--emfe-w-color-white, #FFFFFF);
       text-decoration: none;
     }
 
     &:hover {
       a {
-        color: #D0046C;
+        color: var(--emfe-w-color-primary, #D0046C);
       }
     }
   }