@everymatrix/casino-header-controller 1.14.7 → 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,11 +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 = '';
|
|
26
|
-
|
|
27
|
-
export let operatorid:string = '';
|
|
28
|
-
export let pagetag:string = '';
|
|
29
|
-
export let positiontag:string = '';
|
|
27
|
+
export let countryflaghamburger:string = 'false';
|
|
30
28
|
|
|
31
29
|
export let actionevent:string = '';
|
|
32
30
|
|
|
@@ -83,6 +81,7 @@
|
|
|
83
81
|
let isLoading:boolean = true;
|
|
84
82
|
let logoFromCms:boolean = false;
|
|
85
83
|
|
|
84
|
+
let isOptionsListVisible:boolean = false;
|
|
86
85
|
let mobileView:boolean = false;
|
|
87
86
|
let userAgent:string = window.navigator.userAgent;
|
|
88
87
|
let isLoggedIn:boolean = false;
|
|
@@ -329,6 +328,15 @@
|
|
|
329
328
|
});
|
|
330
329
|
}
|
|
331
330
|
|
|
331
|
+
function selectLanguage(operatorLanguage:string) {
|
|
332
|
+
selectedLanguage = operatorLanguage;
|
|
333
|
+
menuAction('language');
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
function toggleLanguageDropdown() {
|
|
337
|
+
isOptionsListVisible = !isOptionsListVisible;
|
|
338
|
+
}
|
|
339
|
+
|
|
332
340
|
onMount(async () => {
|
|
333
341
|
window.addEventListener('message', messageHandler, false);
|
|
334
342
|
|
|
@@ -344,7 +352,7 @@
|
|
|
344
352
|
$: activecategory && !isLoading && initializeMenu();
|
|
345
353
|
$: session && setSession();
|
|
346
354
|
$: lang && setActiveLanguage();
|
|
347
|
-
$: cmsendpoint && lang && languageslist && userroles && initialLoad();
|
|
355
|
+
$: cmsendpoint && lang && languageslist && userroles && countryflagheader && initialLoad();
|
|
348
356
|
$: translationurl && setTranslationUrl();
|
|
349
357
|
$: clientstyling && customStylingContainer && setClientStyling();
|
|
350
358
|
$: clientstylingurl && customStylingContainer && setClientStylingURL();
|
|
@@ -453,11 +461,34 @@
|
|
|
453
461
|
</svg>
|
|
454
462
|
</div>
|
|
455
463
|
{#if (languagesArray.length > 1) }
|
|
456
|
-
|
|
457
|
-
{
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
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}
|
|
461
492
|
{/if}
|
|
462
493
|
</div>
|
|
463
494
|
</div>
|
|
@@ -541,13 +572,36 @@
|
|
|
541
572
|
<div class="HeaderTopActions">
|
|
542
573
|
<div class="HeaderItemsMenu">
|
|
543
574
|
<div class="Item ItemLogin" tabindex="0" on:click={()=>menuAction('login')}>{$_('login')}</div>
|
|
544
|
-
<div class="Item ItemRegister" tabindex="0" on:click={()=>menuAction('register')}>{$_('register')}</div>
|
|
545
|
-
{#if (languagesArray.length > 1) }
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
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}
|
|
551
605
|
{/if}
|
|
552
606
|
</div>
|
|
553
607
|
</div>
|
|
@@ -565,7 +619,7 @@
|
|
|
565
619
|
{/if}
|
|
566
620
|
{/if}
|
|
567
621
|
|
|
568
|
-
<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>
|
|
569
623
|
|
|
570
624
|
<style lang="scss">
|
|
571
625
|
|
|
@@ -589,6 +643,51 @@
|
|
|
589
643
|
height: 400px;
|
|
590
644
|
}
|
|
591
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
|
+
}
|
|
592
691
|
.HeaderWrapper {
|
|
593
692
|
background: var(--emfe-w-header-color-menu-bg, var(--emfe-w-color-darkest-blue, #050518));
|
|
594
693
|
}
|
|
@@ -636,6 +735,7 @@
|
|
|
636
735
|
}
|
|
637
736
|
|
|
638
737
|
.HeaderItemsMenu {
|
|
738
|
+
gap: 10px;
|
|
639
739
|
display: flex;
|
|
640
740
|
align-content: flex-start;
|
|
641
741
|
list-style: none;
|
|
@@ -651,6 +751,7 @@
|
|
|
651
751
|
}
|
|
652
752
|
|
|
653
753
|
.Item {
|
|
754
|
+
gap: 2px;
|
|
654
755
|
padding: 0 12px;
|
|
655
756
|
display: flex;
|
|
656
757
|
align-items: center;
|
|
@@ -702,7 +803,7 @@
|
|
|
702
803
|
|
|
703
804
|
.ItemLanguage {
|
|
704
805
|
height: 44px;
|
|
705
|
-
width:
|
|
806
|
+
width: 74px;
|
|
706
807
|
text-align: center;
|
|
707
808
|
line-height: 44px;
|
|
708
809
|
background: transparent;
|