@everymatrix/casino-header-controller 1.37.0 → 1.37.2

package/index.html

@@ -36,7 +36,7 @@
       endpoint="https://demo-api.stage.norway.everymatrix.com"
       actionevent="HeaderMenuItemClicked" activecategory="/en/casino" clientstyling="
   " currencyseparator="." currencydecimal="," currencyprecision="2" gmversion="gmcore"
-  countryflagheader="true" countryflaghamburger='true'customlocaleidentifier=""></casino-header-controller>
+  countryflagheader="false" countryflaghamburger='true'customlocaleidentifier=""></casino-header-controller>
 
   </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-header-controller",
-  "version": "1.37.0",
+  "version": "1.37.2",
   "main": "dist/casino-header-controller.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -42,5 +42,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "23b14632ab842e43bf71843de47000e6dd141751"
+  "gitHead": "0a314fe46510038a31ea77b611f22f5429a56d49"
 }

package/src/CasinoHeaderController.svelte

@@ -97,6 +97,7 @@
   let hamburgerMenuActive: boolean = false;
   let logoPath: string = '';
   let shortCashierActivated: boolean = false;
+  let isBalanceOpened: boolean = false;
 
   const gtagCall = (eventName: string): void => {
     // @ts-ignore
@@ -108,8 +109,8 @@
     }
   }
 
-  const menuAction = (data: any): void => {
-    switch (data) {
+  const menuAction = (type: string, data?: any): void => {
+    switch (type) {
       case 'login':
         window.postMessage({ type: 'OpenLoginRegisterModal', transition: 'Login' }, window.location.href);
 
@@ -148,6 +149,10 @@
       case 'language':
         window.postMessage({ type: 'LanguageChanged', selectedLanguage }, window.location.href);
         break;
+
+      case 'page':
+        window.postMessage({ type: 'NavigateTo', item: data, path: data.path });
+        break;
     }
   }
 
@@ -177,6 +182,9 @@
           break;
 
         case 'LanguageChanged':
+          if (e.data.selectedLanguage.toLowerCase() != lang) {
+            primaryMenuLoading = true;
+          }
           createCMSUrls();
           getHeaderMenusData(headerURL);
           break;
@@ -192,6 +200,10 @@
         case 'RequestHeaderHeight':
           window.postMessage({ type: 'HeaderHeight', headerHeight: customStylingContainer.clientHeight }, window.location.href);
           break;
+
+        case 'BalanceModalStatus':
+          isBalanceOpened = e.data.status == 'open';
+          break;
       }
     }
   }
@@ -421,7 +433,8 @@
           {/each}
         {:else}
           {#each mainMenuArray as menuItem}
-            <div class="ItemMenu {menuItem.id == activeIndex ? 'Active' : ''}">
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <div class="ItemMenu {menuItem.id == activeIndex ? 'Active' : ''}" on:click={() => menuAction('page', menuItem)}>
               <p>{menuItem.label}</p>
               <div class="MenuHover"></div>
             </div>
@@ -431,12 +444,14 @@
     </nav>
     {#if isLoggedIn}
       <div class="BalanceDepositWrapper">
-        <div class="Balance">
+        <div class="Background {isBalanceOpened ? 'Open' : ''}"></div>
+        <div class="Balance  {isBalanceOpened ? 'Open' : ''}">
           <player-account-balance-modal {session} {userid} {endpoint} {lang} {clientstyling} {clientstylingurl} {customlocaleidentifier} {gmversion} {displaybalanceoption} {currencyseparator} {currencydecimal} {currencyprecision} />
         </div>
-        <div class="Deposit">
-          <div class="DepositButton">
-            <p>Deposit</p>
+        <div class="Deposit {isBalanceOpened ? 'Open' : ''}">
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <div class="DepositButton" on:click={() => menuAction('deposit')}>
+            <p>{$_('deposit')}</p>
           </div>
           {#if shortCashierActivated}
             <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -526,36 +541,34 @@
     {#if !mobileView}
       <div class="LanguageSelector">
         {#if (languagesArray.length > 1) }
-          {#if countryflagheader !== 'true'}
-            <select bind:value={selectedLanguage} class="Item ItemLanguage NoFlag" on:change={()=>menuAction('language')}>
-              {#each languagesArray as operatorLanguage}
-                <option value={operatorLanguage} selected>{operatorLanguage.slice(-2)}</option>
-              {/each}
-            </select>
-          {:else}
-            <div class="LanguageDropdown">
-              <!-- svelte-ignore a11y-click-events-have-key-events -->
-              <div class="SelectedOption" on:click={() => toggleLanguageDropdown()}>
+          <div class="LanguageDropdown">
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <div class="SelectedOption" on:click={() => toggleLanguageDropdown()}>
+              {#if countryflagheader == 'true' }
                 <span class="LanguageName">{@html countryFlags[determineFlag()]}</span>
-                <span class=" {isOptionsListVisible ? 'TriangleActive' : 'TriangleInactive'}">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="6.835" viewBox="0 0 14 6.835">
-                    <path id="arrow" d="M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z" transform="translate(-274.511 -441.088)" fill="#d1d1d1"/>
-                  </svg>
-                </span>
-              </div>
+              {:else}
+                <span class="LanguageName">{determineFlag()}</span>
+              {/if}
+              <span class=" {isOptionsListVisible ? 'TriangleActive' : 'TriangleInactive'}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="6.835" viewBox="0 0 14 6.835">
+                  <path id="arrow" d="M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z" transform="translate(-274.511 -441.088)" fill="#d1d1d1"/>
+                </svg>
+              </span>
             </div>
-            <div class="OptionList {isOptionsListVisible ? 'Active' : ''}">
-              {#each languagesArray as operatorLanguage}
-                <!-- svelte-ignore a11y-click-events-have-key-events -->
-                <div class="LanguageOption" on:click={() => selectLanguage(operatorLanguage)}>
+          </div>
+          <div class="OptionList {isOptionsListVisible ? 'Active' : ''}">
+            {#each languagesArray as operatorLanguage}
+              <!-- svelte-ignore a11y-click-events-have-key-events -->
+              <div class="LanguageOption" on:click={() => selectLanguage(operatorLanguage)}>
+                {#if countryflagheader == 'true' }
                   <span class="FlagIcon">
                     {@html countryFlags[determineFlag(operatorLanguage)]}
                   </span>
-                  <span class="LanguageName">{operatorLanguage.slice(-2)}</span>
-                </div>
-              {/each}
-            </div>
-          {/if}
+                {/if}
+                <span class="LanguageName">{operatorLanguage.slice(-2)}</span>
+              </div>
+            {/each}
+          </div>
         {/if}
       </div>
     {/if}
@@ -902,7 +915,7 @@
 {/if}
   -->
 
-<casino-hamburger-menu menuitemsurl={hamburgerURL} {activecategory} {lang} {countryflaghamburger} {customlocaleidentifier} {languageslist} {clientstyling} {clientstylingurl}></casino-hamburger-menu>
+<casino-hamburger-menu {cmsendpoint} {cmsenv} {userroles} {activecategory} {lang} {countryflaghamburger} {customlocaleidentifier} {languageslist} {clientstyling} {clientstylingurl}></casino-hamburger-menu>
 
 <style lang="scss">
   *,
@@ -963,10 +976,6 @@
       top: 18px;
     }
 
-    &.Open {
-      // animation: growWidth 1s forwards;
-    }
-
     &.Open span:nth-child(1) {
       top: 9px;
       width: 100%;
@@ -990,18 +999,37 @@
     }
   }
 
-
-
   .Skeleton {
-    animation: skeleton-loading 1s linear infinite alternate;
+    animation: skeleton-loading .6s linear infinite alternate;
   }
 
   @keyframes skeleton-loading {
     0% {
-      background-color: hsl(192, 2%, 45%);
+      background: linear-gradient(90deg, rgba(35, 178, 78, .2) 0%, rgba(0, 61, 93, .2) 100%);
+    }
+    12% {
+      background: linear-gradient(90deg, rgba(35, 178, 78, .225) 0%, rgba(0, 61, 93, .225) 100%);
+    }
+    25% {
+      background: linear-gradient(90deg, rgba(35, 178, 78, .25) 0%, rgba(0, 61, 93, .25) 100%);
+    }
+    33% {
+      background: linear-gradient(90deg, rgba(35, 178, 78, .275) 0%, rgba(0, 61, 93, .275) 100%);
+    }
+    50% {
+      background: linear-gradient(90deg, rgba(35, 178, 78, .3) 0%, rgba(0, 61, 93, .3) 100%);
+    }
+    63% {
+      background: linear-gradient(90deg, rgba(35, 178, 78, .325) 0%, rgba(0, 61, 93, .325) 100%);
+    }
+    75% {
+      background: linear-gradient(90deg, rgba(35, 178, 78, .35) 0%, rgba(0, 61, 93, .35) 100%);
+    }
+    88% {
+      background: linear-gradient(90deg, rgba(35, 178, 78, .375) 0%, rgba(0, 61, 93, .375) 100%);
     }
     100% {
-      background-color: hsl(200, 20%, 95%);
+      background: linear-gradient(90deg, rgba(35, 178, 78, .4) 0%, rgba(0, 61, 93, .4) 100%);
     }
   }
 
@@ -1016,6 +1044,7 @@
   .HeaderContainer {
     position: fixed;
     width: 100%;
+    z-index: 999;
     background-color: var(--emw-header-color-background, var(--emw-color-background, #000000));
     display: flex;
     flex-direction: column;
@@ -1070,18 +1099,32 @@
         border-radius: 30px;
         padding: 0 0 0 10px;
 
+        .Background {
+          height: 34px;
+          width: 80px;
+          position: absolute;
+          transform: translateX(36%);
+          background: linear-gradient(0deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
+                      linear-gradient(180deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
+          border-radius: 30px;
+          z-index: 3;
+          transition: all .3s ease-out;
+
+          &.Open {
+            width: 75px;
+            transform: translateX(-56%);
+          }
+        }
+
         .Deposit {
           display: flex;
           align-items: center;
           cursor: pointer;
           justify-content: center;
+          margin: 0 10px;
+          z-index: 4;
 
           .DepositButton {
-            border-radius: 30px;
-            height: 34px;
-            width: 100px;
-            background: linear-gradient(0deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
-                        linear-gradient(180deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
             font-size: 14px;
             text-align: center;
             cursor: pointer;
@@ -1093,20 +1136,26 @@
               text-transform: uppercase;
               color: white;
             }
+          }
 
-            &:hover {
-              background: linear-gradient(180deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
-                          linear-gradient(0deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
+          &.Open {
+            .DepositButton {
+              p {
+                transition: all .5s linear;
+                color: black;
+                opacity: .5;
+              }
             }
 
-            &:active {
-              background: linear-gradient(0deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
-                          linear-gradient(180deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
-            }
           }
         }
 
         .Balance {
+          z-index: 4;
+
+          &.Open {
+            color: white;
+          }
         }
       }
 
@@ -1268,6 +1317,7 @@
         height: 100%;
         cursor: pointer;
         transform: all .3s linear;
+        color: white;
 
         .SelectedOption {
           display: flex;
@@ -1276,7 +1326,6 @@
 
           .TriangleActive, .TriangleInactive {
             display: block;
-            color: currentColor;
             margin: 0 0 0 10px;
             transition: all .2s;
             &:hover {
@@ -1323,7 +1372,7 @@
           z-index: 6;
           right: 5px;
           color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
-          background: var(--emw-header-color-secondary-menu-bg, var(--emw-color-background-secondary, #050518));
+          background: linear-gradient(90deg, rgba(42,79,55,1) 0%, rgba(0,61,92,1) 100%);
 
           &.Active {
             opacity: 1;
@@ -1342,14 +1391,15 @@
             align-items: center;
             transform: scale(1.1);
             gap: 3px;
-            background: black;
             padding: 7px;
 
             &:hover {
-              transition: all .5s;
-              color: black;
-              background-color: var(--emw-header-color-primary, var(--emw-color-primary, #22B04F));
+              transition: all 0.2s;
+              color: var(--emw-color-primary);
+              background: var(--emw-color-primary) transparent;
+              box-shadow: inset 0px 0px 0px 2px var(--emw-color-primary);
               border-radius: 20px;
+              box-sizing: border-box;
             }
           }
         }