@everymatrix/casino-header-controller 1.14.7 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-header-controller",
-  "version": "1.14.7",
+  "version": "1.15.0",
   "main": "dist/casino-header-controller.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e0c4908ae0358ad455046427736d3bbb675e6fb6"
+  "gitHead": "15ce8765c213b2c036dd5fbc5007d6ea5a666dc1"
 }

package/src/CasinoHeaderController.svelte

@@ -22,11 +22,9 @@
   export let translationurl:string = '';
   export let customlocaleidentifier:string = '';
   export let gmversion:string = '';
+  export let countryflagheader:string = 'false';
   export let displaybalanceoption:string = '';
-
-  export let operatorid:string = '';
-  export let pagetag:string = '';
-  export let positiontag:string = '';
+  export let countryflaghamburger:string = 'false';
 
   export let actionevent:string = '';
 
@@ -83,6 +81,7 @@
   let isLoading:boolean = true;
   let logoFromCms:boolean = false;
 
+  let isOptionsListVisible:boolean = false;
   let mobileView:boolean = false;
   let userAgent:string = window.navigator.userAgent;
   let isLoggedIn:boolean = false;
@@ -329,6 +328,15 @@
       });
   }
 
+  function selectLanguage(operatorLanguage:string) {
+    selectedLanguage = operatorLanguage;
+    menuAction('language');
+  }
+
+  function toggleLanguageDropdown() {
+    isOptionsListVisible = !isOptionsListVisible;
+  }
+
   onMount(async () => {
     window.addEventListener('message', messageHandler, false);
 
@@ -344,7 +352,7 @@
   $: activecategory && !isLoading && initializeMenu();
   $: session && setSession();
   $: lang && setActiveLanguage();
-  $: cmsendpoint && lang && languageslist && userroles && initialLoad();
+  $: cmsendpoint && lang && languageslist && userroles && countryflagheader && initialLoad();
   $: translationurl && setTranslationUrl();
   $: clientstyling && customStylingContainer && setClientStyling();
   $: clientstylingurl && customStylingContainer && setClientStylingURL();
@@ -453,11 +461,34 @@
               </svg>
             </div>
             {#if (languagesArray.length > 1) }
-              <select bind:value={selectedLanguage} class="Item ItemLanguage" on:change={()=>menuAction('language')}>
-                {#each languagesArray as operatorLanguage}
-                  <option value={operatorLanguage} selected>{operatorLanguage}</option>
-                {/each}
-              </select>
+              {#if countryflagheader !== 'true'}
+                <select bind:value={selectedLanguage} class="Item ItemLanguage" on:change={()=>menuAction('language')}>
+                  {#each languagesArray as operatorLanguage}
+                    <option value={operatorLanguage} selected>{operatorLanguage}</option>
+                  {/each}
+                </select>
+              {:else}
+                <div class="LanguageDropdown">
+                  <div class="SelectedOption Item ItemLanguage" on:click={() => toggleLanguageDropdown()}>
+                    <span class="FlagIcon">
+                      <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${selectedLanguage.toUpperCase() == 'EN' ? 'US' : selectedLanguage.toUpperCase()}.svg`}/>
+                    </span>
+                    <span class="LanguageName">{selectedLanguage}</span>
+                  </div>
+                  {#if isOptionsListVisible}
+                    <div class="OptionList">
+                      {#each languagesArray as operatorLanguage}
+                        <div class="LanguageOption" on:click={() => selectLanguage(operatorLanguage)}>
+                          <span class="FlagIcon">
+                            <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${selectedLanguage.toUpperCase() == 'EN' ? 'US' : operatorLanguage.toUpperCase()}.svg`}/>
+                          </span>
+                          <span class="LanguageName">{operatorLanguage}</span>
+                        </div>
+                      {/each}
+                    </div>
+                  {/if}
+                </div>
+              {/if}
             {/if}
           </div>
         </div>
@@ -541,13 +572,36 @@
         <div class="HeaderTopActions">
           <div class="HeaderItemsMenu">
             <div class="Item ItemLogin" tabindex="0" on:click={()=>menuAction('login')}>{$_('login')}</div>
-            <div class="Item ItemRegister" tabindex="0" on:click={()=>menuAction('register')}>{$_('register')}</div>
-            {#if (languagesArray.length > 1) }
-            <select bind:value={selectedLanguage} class="Item ItemLanguage" on:change={()=>menuAction('language')}>
-              {#each languagesArray as operatorLanguage}
-                <option value={operatorLanguage}>{operatorLanguage}</option>
-              {/each}
-            </select>
+            <div class="Item ItemRegister" tabindex="0" on:click={()=>menuAction('register')}>{$_('register')}</div>   
+            {#if (languagesArray.length > 1) }      
+              {#if countryflagheader !== 'true'}
+                <select bind:value={selectedLanguage} class="Item ItemLanguage" on:change={()=>menuAction('language')}>
+                  {#each languagesArray as operatorLanguage}
+                    <option value={operatorLanguage}>{operatorLanguage}</option>
+                  {/each}
+                </select>
+              {:else}
+                <div class="LanguageDropdown">
+                  <div class="SelectedOption Item ItemLanguage" on:click={() => toggleLanguageDropdown()}>
+                    <span class="FlagIcon">
+                      <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${selectedLanguage.toUpperCase() == 'EN' ? 'US' : selectedLanguage.toUpperCase()}.svg`}/>
+                    </span>
+                    <span class="LanguageName">{selectedLanguage}</span>
+                  </div>
+                  {#if isOptionsListVisible}
+                    <div class="OptionList">
+                      {#each languagesArray as operatorLanguage}
+                        <div class="LanguageOption" on:click={() => selectLanguage(operatorLanguage)}>
+                          <span class="FlagIcon">
+                            <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${operatorLanguage.toUpperCase() == 'EN' ? 'US' : operatorLanguage.toUpperCase()}.svg`}/>
+                          </span>
+                          <span class="LanguageName">{operatorLanguage}</span>
+                        </div>
+                      {/each}
+                    </div>
+                  {/if}
+                </div>
+              {/if}
             {/if}
           </div>
         </div>
@@ -565,7 +619,7 @@
   {/if}
 {/if}
 
-<casino-hamburger-menu menuitemsurl={hamburgerURL} {activecategory} {lang} {languageslist} {clientstyling} {clientstylingurl}></casino-hamburger-menu>
+<casino-hamburger-menu menuitemsurl={hamburgerURL} {activecategory} {lang} {countryflaghamburger} {languageslist} {clientstyling} {clientstylingurl}></casino-hamburger-menu>
 
 <style lang="scss">
 
@@ -589,6 +643,51 @@
     height: 400px;
   }
 
+  .LanguageDropdown {
+    margin-right: 16px;
+    position: relative;
+    display: inline-block;
+  }
+
+  .SelectedOption,
+  .OptionList {
+    border: 1px solid var(--emfe-w-header-color-primary);
+    padding: 8px;
+    cursor: pointer;
+    width: 200px;
+    border-radius: 2px;
+  }
+
+  .SelectedOption {
+    display: flex;
+    align-items: center;
+  }
+
+  .FlagIcon img {
+    width: 20px;
+    height: 14px;
+    margin-right: 8px;
+    border-radius: 2px;
+  }
+
+  .OptionList {
+    position: absolute;
+    z-index: 1;
+    color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
+    background: var(--emfe-w-header-color-secondary-menu-bg, var(--emfe-w-color-darkest-blue, #050518));
+    max-height: 150px;
+    overflow-y: auto;
+  }
+
+  .LanguageOption {
+    display: flex;
+    align-items: center;
+    padding: 4px;
+  }
+  .LanguageOption:hover {
+    background-color: var(--emfe-w-header-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+    border-radius: 2px;
+  }
   .HeaderWrapper {
     background: var(--emfe-w-header-color-menu-bg, var(--emfe-w-color-darkest-blue, #050518));
   }
@@ -636,6 +735,7 @@
   }
 
   .HeaderItemsMenu {
+    gap: 10px;
     display: flex;
     align-content: flex-start;
     list-style: none;
@@ -651,6 +751,7 @@
     }
 
     .Item {
+      gap: 2px;
       padding: 0 12px;
       display: flex;
       align-items: center;
@@ -702,7 +803,7 @@
 
   .ItemLanguage {
     height: 44px;
-    width: 90px;
+    width: 74px;
     text-align: center;
     line-height: 44px;
     background: transparent;