@everymatrix/casino-header-controller 1.37.1 → 1.37.3

package/index.html

@@ -29,14 +29,23 @@
 
   <div class="webcomponent">
     <casino-header-controller
-      session="df7edc00-c01a-4a98-b215-a0d207d58010" userid="3856617"
+      session="31124550-3b07-4687-a92d-55919f1caa41" userid="3856617"
       userroles="everyone,loggedIn,TestDemoCosmin" cmsendpoint="https://wt1-stage.everymatrix.com/apijson" env="stage"
       lang="en" languageslist="es,en,ro,pl,bg,hk"
-      shortcashierenabled="true"
+      shortcashierenabled="false"
       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>
+      actionevent="HeaderMenuItemClicked"
+      activecategory="/en/casino"
+      clientstyling=""
+      currencyseparator="."
+      currencydecimal=","
+      currencyprecision="2"
+      gmversion="gmcore"
+      countryflagheader="true"
+      shortcashierenabled='true'
+      countryflaghamburger='true'
+      customlocaleidentifier="">
+    </casino-header-controller>
 
   </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-header-controller",
-  "version": "1.37.1",
+  "version": "1.37.3",
   "main": "dist/casino-header-controller.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -42,5 +42,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b66537a86537df76760b0975a3104240112ad072"
+  "gitHead": "df31cbe8e6b206c5aed27f8036ab50826359872e"
 }

package/src/CasinoHeaderController.svelte

@@ -58,6 +58,9 @@
 
   let activeIndex: number;
   let customStylingContainer: HTMLElement;
+  let balanceContainer: HTMLElement;
+  let depositContainer: HTMLElement;
+  let backgroundContainer: HTMLElement;
 
   setupI18n({ withLocale: 'en', translations: {}});
 
@@ -97,6 +100,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 +112,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 +152,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 +185,9 @@
           break;
 
         case 'LanguageChanged':
+          if (e.data.selectedLanguage.toLowerCase() != lang) {
+            primaryMenuLoading = true;
+          }
           createCMSUrls();
           getHeaderMenusData(headerURL);
           break;
@@ -192,10 +203,35 @@
         case 'RequestHeaderHeight':
           window.postMessage({ type: 'HeaderHeight', headerHeight: customStylingContainer.clientHeight }, window.location.href);
           break;
+
+        case 'BalanceModalStatus':
+          isBalanceOpened = e.data.status == 'open';
+          adaptDepositBackground(isBalanceOpened);
+          break;
+
+        case 'BalancedFetched':
+          setInitialStateForDepositBackground();
+          break;
       }
     }
   }
 
+  const setInitialStateForDepositBackground = (): void => {
+    let width = depositContainer.getBoundingClientRect().width;
+    backgroundContainer.style.width = `${width}px`;
+    backgroundContainer.style.left = `${balanceContainer.getBoundingClientRect().width}px`;
+  }
+
+  const adaptDepositBackground = (isBalanceOpened): void => {
+    if (isBalanceOpened) {
+      let width = balanceContainer.getBoundingClientRect().width;
+      backgroundContainer.style.width = `${width}px`;
+      backgroundContainer.style.left = `0px`;
+    } else {
+      setInitialStateForDepositBackground();
+    }
+  }
+
   const setSession = (): void => {
     isLoggedIn = true;
     sessionID = session;
@@ -374,7 +410,6 @@
     window.addEventListener('message', messageHandler, false);
 
     mobileView = isMobile(userAgent);
-    console.log('mobileView', mobileView)
 
     return () => {
       window.removeEventListener('message', messageHandler);
@@ -383,7 +418,7 @@
 
   $: activecategory && !isLoading && initializeMenu();
   $: session && setSession();
-  $: isShortCashierEnabled = shortcashierenabled.toLocaleLowerCase() === 'true';
+  $: isShortCashierEnabled = shortcashierenabled.toLocaleLowerCase() == 'true';
   $: lang && setActiveLanguage();
   $: cmsendpoint && lang && languageslist && userroles && initialLoad();
   $: translationurl && setTranslationUrl();
@@ -421,7 +456,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 +467,13 @@
     </nav>
     {#if isLoggedIn}
       <div class="BalanceDepositWrapper">
-        <div class="Balance">
+        <div class="Balance  {isBalanceOpened ? 'Open' : ''}" bind:this={balanceContainer}>
           <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' : ''}" bind:this={depositContainer}>
+          <!-- 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 -->
@@ -446,8 +483,8 @@
               <div class="ShortCashierContainerMobile">
                 <div class="ClosePopUpButtonShortCashier" on:click={(event) => closeShortCashier(event)}>
                   <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
-                    <line x1="2" y1="2" x2="18" y2="18" stroke="black" stroke-width="2"/>
-                    <line x1="18" y1="2" x2="2" y2="18" stroke="black" stroke-width="2"/>
+                    <line x1="2" y1="2" x2="18" y2="18" stroke-width="2"/>
+                    <line x1="18" y1="2" x2="2" y2="18" stroke-width="2"/>
                   </svg>
                 </div>
                 {#if gmversion === 'gmcore'}
@@ -486,6 +523,7 @@
             </div>
           {/if}
         </div>
+        <div class="Background {isBalanceOpened ? 'Open' : ''}" bind:this={backgroundContainer}></div>
       </div>
       <div class="Profile">
         <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -502,20 +540,19 @@
     {:else}
       <div class="AuthButtons">
         <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div class="Item ItemLogin" on:click={()=>menuAction('login')}>
+        <div class="Item ItemLogin" on:click={() => menuAction('login')}>
           <p>{$_('login')}</p>
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z"/></svg>
         </div>
         <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div class="Item ItemRegister" on:click={()=>menuAction('register')}>
+        <div class="Item ItemRegister" on:click={() => menuAction('register')}>
           <p>{$_('register')}</p>
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
         </div>
       </div>
     {/if}
     <div class="Slot1">
-      <slot name="slot1">
-      </slot>
+      <slot name="slot1"></slot>
     </div>
     <div class="Slot2">
       <slot name="slot2"></slot>
@@ -526,36 +563,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 +937,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 +998,6 @@
       top: 18px;
     }
 
-    &.Open {
-      // animation: growWidth 1s forwards;
-    }
-
     &.Open span:nth-child(1) {
       top: 9px;
       width: 100%;
@@ -990,18 +1021,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 +1066,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;
@@ -1065,26 +1116,33 @@
         height: 34px;
         background-color: white;
         display: flex;
+        position: relative;
         justify-content: center;
         align-items: center;
         border-radius: 30px;
-        padding: 0 0 0 10px;
+
+        .Background {
+          height: 34px;
+          position: absolute;
+          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 0.3s ease;
+        }
 
         .Deposit {
           display: flex;
           align-items: center;
           cursor: pointer;
           justify-content: center;
+          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;
+            padding: 0 10px;
             transition: all .5s linear;
             display: flex;
             justify-content: center;
@@ -1092,21 +1150,40 @@
             p {
               text-transform: uppercase;
               color: white;
-            }
+              transition: all .3s ease;
 
-            &: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;
+              &:hover {
+                text-shadow: 0px 1px 5px rgba(0, 0, 0, .2);
+              }
+
+              &:active {
+                color: black;
+              }
             }
+          }
 
-            &: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;
+          &.Open {
+            .DepositButton {
+              p {
+                transition: all .5s linear;
+                color: black;
+                opacity: .5;
+              }
             }
+
           }
         }
 
         .Balance {
+          display: flex;
+          z-index: 4;
+          height: 100%;
+          padding-left: 10px;
+          align-items: center;
+
+          &.Open {
+            color: white;
+          }
         }
       }
 
@@ -1114,6 +1191,7 @@
         display: flex;
         justify-content: center;
         flex-direction: column;
+        cursor: pointer;
 
         .ProfileWrapper {
           width: 30px;
@@ -1123,11 +1201,22 @@
           display: flex;
           justify-content: center;
           align-items: center;
+          transition: all .3s ease;
 
           svg {
             width: 15px;
             height: 16px;
             fill: var(--emw-color-white, #FFFFFF)
+
+          }
+          &:hover {
+            box-shadow: 0px 0px 4px white;
+          }
+
+          &:active {
+            svg {
+              fill: var(--emw-color-black, #000000)
+            }
           }
         }
       }
@@ -1268,6 +1357,7 @@
         height: 100%;
         cursor: pointer;
         transform: all .3s linear;
+        color: white;
 
         .SelectedOption {
           display: flex;
@@ -1276,7 +1366,6 @@
 
           .TriangleActive, .TriangleInactive {
             display: block;
-            color: currentColor;
             margin: 0 0 0 10px;
             transition: all .2s;
             &:hover {
@@ -1323,7 +1412,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 +1431,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;
             }
           }
         }