@everymatrix/casino-header-controller 0.0.221 → 0.0.225

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.221",
+  "version": "0.0.225",
   "main": "dist/casino-header-controller.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -38,5 +38,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "015e13b1638624ecac8f0cc2a0f210cbbac4910e"
+  "gitHead": "f58cef61f569c3d9b496becafc3ab9e93cb5eca7"
 }

package/src/CasinoHeaderController.svelte

@@ -19,19 +19,24 @@
   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
        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
@@ -41,29 +46,29 @@
        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;
       }
     }
   }
@@ -156,9 +152,11 @@
     hamburgerURL.searchParams.append('platform', 'dk');
   }
 
-  const initialLoad = () => {
+  const setActiveLanguage = ():void => {
     setLocale(lang);
+  }
 
+  const initialLoad = ():void => {
     // split operator provided languages string into string array
     languagesArray = languageslist.split(',');
     languagesArray.forEach((languageItem:string, index:number) => {
@@ -172,7 +170,15 @@
     getHeaderMenusData(headerURL);
   }
 
-  const getHeaderMenusData = (url: any) => {
+  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;
 
     return new Promise((resolve, reject) => {
@@ -204,8 +210,10 @@
     }
   });
 
+  $: activecategory && !isLoading && setActiveIndex();
   $: session && setSession();
-  $: cmsendpoint && lang && initialLoad();
+  $: lang && setActiveLanguage();
+  $: cmsendpoint && lang && languageslist && initialLoad();
 </script>
 
 {#if isLoggedIn}
@@ -266,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">
@@ -347,14 +354,13 @@
 
         <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">
           <div class="HeaderItemsMenu">
-            <div class="Item ItemLogin" on:click={()=>menuAction('login')}>{$_('headerItem.login')}</div>
-            <div class="Item ItemRegister" on:click={()=>menuAction('register')}>{$_('headerItem.register')}</div>
+            <div class="Item ItemLogin" tabindex="0" on:click={()=>menuAction('login')}>{$_('headerItem.login')}</div>
+            <div class="Item ItemRegister" tabindex="0" on:click={()=>menuAction('register')}>{$_('headerItem.register')}</div>
             <select bind:value={selectedLanguage} class="Item ItemLanguage" on:change={()=>menuAction('language')}>
               {#each languagesArray as operatorLanguage}
                 <option value={operatorLanguage}>{operatorLanguage}</option>