@everymatrix/casino-header-controller 1.14.8 → 1.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@everymatrix/casino-header-controller",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.15.0",
|
|
4
4
|
"main": "dist/casino-header-controller.js",
|
|
5
5
|
"svelte": "src/index.ts",
|
|
6
6
|
"scripts": {
|
|
@@ -37,5 +37,5 @@
|
|
|
37
37
|
"publishConfig": {
|
|
38
38
|
"access": "public"
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "15ce8765c213b2c036dd5fbc5007d6ea5a666dc1"
|
|
41
41
|
}
|
|
@@ -22,7 +22,9 @@
|
|
|
22
22
|
export let translationurl:string = '';
|
|
23
23
|
export let customlocaleidentifier:string = '';
|
|
24
24
|
export let gmversion:string = '';
|
|
25
|
+
export let countryflagheader:string = 'false';
|
|
25
26
|
export let displaybalanceoption:string = '';
|
|
27
|
+
export let countryflaghamburger:string = 'false';
|
|
26
28
|
|
|
27
29
|
export let actionevent:string = '';
|
|
28
30
|
|
|
@@ -79,6 +81,7 @@
|
|
|
79
81
|
let isLoading:boolean = true;
|
|
80
82
|
let logoFromCms:boolean = false;
|
|
81
83
|
|
|
84
|
+
let isOptionsListVisible:boolean = false;
|
|
82
85
|
let mobileView:boolean = false;
|
|
83
86
|
let userAgent:string = window.navigator.userAgent;
|
|
84
87
|
let isLoggedIn:boolean = false;
|
|
@@ -325,6 +328,15 @@
|
|
|
325
328
|
});
|
|
326
329
|
}
|
|
327
330
|
|
|
331
|
+
function selectLanguage(operatorLanguage:string) {
|
|
332
|
+
selectedLanguage = operatorLanguage;
|
|
333
|
+
menuAction('language');
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
function toggleLanguageDropdown() {
|
|
337
|
+
isOptionsListVisible = !isOptionsListVisible;
|
|
338
|
+
}
|
|
339
|
+
|
|
328
340
|
onMount(async () => {
|
|
329
341
|
window.addEventListener('message', messageHandler, false);
|
|
330
342
|
|
|
@@ -340,7 +352,7 @@
|
|
|
340
352
|
$: activecategory && !isLoading && initializeMenu();
|
|
341
353
|
$: session && setSession();
|
|
342
354
|
$: lang && setActiveLanguage();
|
|
343
|
-
$: cmsendpoint && lang && languageslist && userroles && initialLoad();
|
|
355
|
+
$: cmsendpoint && lang && languageslist && userroles && countryflagheader && initialLoad();
|
|
344
356
|
$: translationurl && setTranslationUrl();
|
|
345
357
|
$: clientstyling && customStylingContainer && setClientStyling();
|
|
346
358
|
$: clientstylingurl && customStylingContainer && setClientStylingURL();
|
|
@@ -449,11 +461,34 @@
|
|
|
449
461
|
</svg>
|
|
450
462
|
</div>
|
|
451
463
|
{#if (languagesArray.length > 1) }
|
|
452
|
-
|
|
453
|
-
{
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
464
|
+
{#if countryflagheader !== 'true'}
|
|
465
|
+
<select bind:value={selectedLanguage} class="Item ItemLanguage" on:change={()=>menuAction('language')}>
|
|
466
|
+
{#each languagesArray as operatorLanguage}
|
|
467
|
+
<option value={operatorLanguage} selected>{operatorLanguage}</option>
|
|
468
|
+
{/each}
|
|
469
|
+
</select>
|
|
470
|
+
{:else}
|
|
471
|
+
<div class="LanguageDropdown">
|
|
472
|
+
<div class="SelectedOption Item ItemLanguage" on:click={() => toggleLanguageDropdown()}>
|
|
473
|
+
<span class="FlagIcon">
|
|
474
|
+
<img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${selectedLanguage.toUpperCase() == 'EN' ? 'US' : selectedLanguage.toUpperCase()}.svg`}/>
|
|
475
|
+
</span>
|
|
476
|
+
<span class="LanguageName">{selectedLanguage}</span>
|
|
477
|
+
</div>
|
|
478
|
+
{#if isOptionsListVisible}
|
|
479
|
+
<div class="OptionList">
|
|
480
|
+
{#each languagesArray as operatorLanguage}
|
|
481
|
+
<div class="LanguageOption" on:click={() => selectLanguage(operatorLanguage)}>
|
|
482
|
+
<span class="FlagIcon">
|
|
483
|
+
<img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${selectedLanguage.toUpperCase() == 'EN' ? 'US' : operatorLanguage.toUpperCase()}.svg`}/>
|
|
484
|
+
</span>
|
|
485
|
+
<span class="LanguageName">{operatorLanguage}</span>
|
|
486
|
+
</div>
|
|
487
|
+
{/each}
|
|
488
|
+
</div>
|
|
489
|
+
{/if}
|
|
490
|
+
</div>
|
|
491
|
+
{/if}
|
|
457
492
|
{/if}
|
|
458
493
|
</div>
|
|
459
494
|
</div>
|
|
@@ -537,13 +572,36 @@
|
|
|
537
572
|
<div class="HeaderTopActions">
|
|
538
573
|
<div class="HeaderItemsMenu">
|
|
539
574
|
<div class="Item ItemLogin" tabindex="0" on:click={()=>menuAction('login')}>{$_('login')}</div>
|
|
540
|
-
<div class="Item ItemRegister" tabindex="0" on:click={()=>menuAction('register')}>{$_('register')}</div>
|
|
541
|
-
{#if (languagesArray.length > 1) }
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
575
|
+
<div class="Item ItemRegister" tabindex="0" on:click={()=>menuAction('register')}>{$_('register')}</div>
|
|
576
|
+
{#if (languagesArray.length > 1) }
|
|
577
|
+
{#if countryflagheader !== 'true'}
|
|
578
|
+
<select bind:value={selectedLanguage} class="Item ItemLanguage" on:change={()=>menuAction('language')}>
|
|
579
|
+
{#each languagesArray as operatorLanguage}
|
|
580
|
+
<option value={operatorLanguage}>{operatorLanguage}</option>
|
|
581
|
+
{/each}
|
|
582
|
+
</select>
|
|
583
|
+
{:else}
|
|
584
|
+
<div class="LanguageDropdown">
|
|
585
|
+
<div class="SelectedOption Item ItemLanguage" on:click={() => toggleLanguageDropdown()}>
|
|
586
|
+
<span class="FlagIcon">
|
|
587
|
+
<img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${selectedLanguage.toUpperCase() == 'EN' ? 'US' : selectedLanguage.toUpperCase()}.svg`}/>
|
|
588
|
+
</span>
|
|
589
|
+
<span class="LanguageName">{selectedLanguage}</span>
|
|
590
|
+
</div>
|
|
591
|
+
{#if isOptionsListVisible}
|
|
592
|
+
<div class="OptionList">
|
|
593
|
+
{#each languagesArray as operatorLanguage}
|
|
594
|
+
<div class="LanguageOption" on:click={() => selectLanguage(operatorLanguage)}>
|
|
595
|
+
<span class="FlagIcon">
|
|
596
|
+
<img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${operatorLanguage.toUpperCase() == 'EN' ? 'US' : operatorLanguage.toUpperCase()}.svg`}/>
|
|
597
|
+
</span>
|
|
598
|
+
<span class="LanguageName">{operatorLanguage}</span>
|
|
599
|
+
</div>
|
|
600
|
+
{/each}
|
|
601
|
+
</div>
|
|
602
|
+
{/if}
|
|
603
|
+
</div>
|
|
604
|
+
{/if}
|
|
547
605
|
{/if}
|
|
548
606
|
</div>
|
|
549
607
|
</div>
|
|
@@ -561,7 +619,7 @@
|
|
|
561
619
|
{/if}
|
|
562
620
|
{/if}
|
|
563
621
|
|
|
564
|
-
<casino-hamburger-menu menuitemsurl={hamburgerURL} {activecategory} {lang} {languageslist} {clientstyling} {clientstylingurl}></casino-hamburger-menu>
|
|
622
|
+
<casino-hamburger-menu menuitemsurl={hamburgerURL} {activecategory} {lang} {countryflaghamburger} {languageslist} {clientstyling} {clientstylingurl}></casino-hamburger-menu>
|
|
565
623
|
|
|
566
624
|
<style lang="scss">
|
|
567
625
|
|
|
@@ -585,6 +643,51 @@
|
|
|
585
643
|
height: 400px;
|
|
586
644
|
}
|
|
587
645
|
|
|
646
|
+
.LanguageDropdown {
|
|
647
|
+
margin-right: 16px;
|
|
648
|
+
position: relative;
|
|
649
|
+
display: inline-block;
|
|
650
|
+
}
|
|
651
|
+
|
|
652
|
+
.SelectedOption,
|
|
653
|
+
.OptionList {
|
|
654
|
+
border: 1px solid var(--emfe-w-header-color-primary);
|
|
655
|
+
padding: 8px;
|
|
656
|
+
cursor: pointer;
|
|
657
|
+
width: 200px;
|
|
658
|
+
border-radius: 2px;
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
.SelectedOption {
|
|
662
|
+
display: flex;
|
|
663
|
+
align-items: center;
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
.FlagIcon img {
|
|
667
|
+
width: 20px;
|
|
668
|
+
height: 14px;
|
|
669
|
+
margin-right: 8px;
|
|
670
|
+
border-radius: 2px;
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
.OptionList {
|
|
674
|
+
position: absolute;
|
|
675
|
+
z-index: 1;
|
|
676
|
+
color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
|
|
677
|
+
background: var(--emfe-w-header-color-secondary-menu-bg, var(--emfe-w-color-darkest-blue, #050518));
|
|
678
|
+
max-height: 150px;
|
|
679
|
+
overflow-y: auto;
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
.LanguageOption {
|
|
683
|
+
display: flex;
|
|
684
|
+
align-items: center;
|
|
685
|
+
padding: 4px;
|
|
686
|
+
}
|
|
687
|
+
.LanguageOption:hover {
|
|
688
|
+
background-color: var(--emfe-w-header-color-primary, var(--emfe-w-color-pink-500, #D0046C));
|
|
689
|
+
border-radius: 2px;
|
|
690
|
+
}
|
|
588
691
|
.HeaderWrapper {
|
|
589
692
|
background: var(--emfe-w-header-color-menu-bg, var(--emfe-w-color-darkest-blue, #050518));
|
|
590
693
|
}
|
|
@@ -632,6 +735,7 @@
|
|
|
632
735
|
}
|
|
633
736
|
|
|
634
737
|
.HeaderItemsMenu {
|
|
738
|
+
gap: 10px;
|
|
635
739
|
display: flex;
|
|
636
740
|
align-content: flex-start;
|
|
637
741
|
list-style: none;
|
|
@@ -647,6 +751,7 @@
|
|
|
647
751
|
}
|
|
648
752
|
|
|
649
753
|
.Item {
|
|
754
|
+
gap: 2px;
|
|
650
755
|
padding: 0 12px;
|
|
651
756
|
display: flex;
|
|
652
757
|
align-items: center;
|
|
@@ -698,7 +803,7 @@
|
|
|
698
803
|
|
|
699
804
|
.ItemLanguage {
|
|
700
805
|
height: 44px;
|
|
701
|
-
width:
|
|
806
|
+
width: 74px;
|
|
702
807
|
text-align: center;
|
|
703
808
|
line-height: 44px;
|
|
704
809
|
background: transparent;
|