@everymatrix/casino-header-controller 1.37.0 → 1.37.2
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/index.html
CHANGED
@@ -36,7 +36,7 @@
|
|
36
36
|
endpoint="https://demo-api.stage.norway.everymatrix.com"
|
37
37
|
actionevent="HeaderMenuItemClicked" activecategory="/en/casino" clientstyling="
|
38
38
|
" currencyseparator="." currencydecimal="," currencyprecision="2" gmversion="gmcore"
|
39
|
-
countryflagheader="
|
39
|
+
countryflagheader="false" countryflaghamburger='true'customlocaleidentifier=""></casino-header-controller>
|
40
40
|
|
41
41
|
</div>
|
42
42
|
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@everymatrix/casino-header-controller",
|
3
|
-
"version": "1.37.
|
3
|
+
"version": "1.37.2",
|
4
4
|
"main": "dist/casino-header-controller.js",
|
5
5
|
"svelte": "src/index.ts",
|
6
6
|
"scripts": {
|
@@ -42,5 +42,5 @@
|
|
42
42
|
"publishConfig": {
|
43
43
|
"access": "public"
|
44
44
|
},
|
45
|
-
"gitHead": "
|
45
|
+
"gitHead": "0a314fe46510038a31ea77b611f22f5429a56d49"
|
46
46
|
}
|
@@ -97,6 +97,7 @@
|
|
97
97
|
let hamburgerMenuActive: boolean = false;
|
98
98
|
let logoPath: string = '';
|
99
99
|
let shortCashierActivated: boolean = false;
|
100
|
+
let isBalanceOpened: boolean = false;
|
100
101
|
|
101
102
|
const gtagCall = (eventName: string): void => {
|
102
103
|
// @ts-ignore
|
@@ -108,8 +109,8 @@
|
|
108
109
|
}
|
109
110
|
}
|
110
111
|
|
111
|
-
const menuAction = (
|
112
|
-
switch (
|
112
|
+
const menuAction = (type: string, data?: any): void => {
|
113
|
+
switch (type) {
|
113
114
|
case 'login':
|
114
115
|
window.postMessage({ type: 'OpenLoginRegisterModal', transition: 'Login' }, window.location.href);
|
115
116
|
|
@@ -148,6 +149,10 @@
|
|
148
149
|
case 'language':
|
149
150
|
window.postMessage({ type: 'LanguageChanged', selectedLanguage }, window.location.href);
|
150
151
|
break;
|
152
|
+
|
153
|
+
case 'page':
|
154
|
+
window.postMessage({ type: 'NavigateTo', item: data, path: data.path });
|
155
|
+
break;
|
151
156
|
}
|
152
157
|
}
|
153
158
|
|
@@ -177,6 +182,9 @@
|
|
177
182
|
break;
|
178
183
|
|
179
184
|
case 'LanguageChanged':
|
185
|
+
if (e.data.selectedLanguage.toLowerCase() != lang) {
|
186
|
+
primaryMenuLoading = true;
|
187
|
+
}
|
180
188
|
createCMSUrls();
|
181
189
|
getHeaderMenusData(headerURL);
|
182
190
|
break;
|
@@ -192,6 +200,10 @@
|
|
192
200
|
case 'RequestHeaderHeight':
|
193
201
|
window.postMessage({ type: 'HeaderHeight', headerHeight: customStylingContainer.clientHeight }, window.location.href);
|
194
202
|
break;
|
203
|
+
|
204
|
+
case 'BalanceModalStatus':
|
205
|
+
isBalanceOpened = e.data.status == 'open';
|
206
|
+
break;
|
195
207
|
}
|
196
208
|
}
|
197
209
|
}
|
@@ -421,7 +433,8 @@
|
|
421
433
|
{/each}
|
422
434
|
{:else}
|
423
435
|
{#each mainMenuArray as menuItem}
|
424
|
-
|
436
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
437
|
+
<div class="ItemMenu {menuItem.id == activeIndex ? 'Active' : ''}" on:click={() => menuAction('page', menuItem)}>
|
425
438
|
<p>{menuItem.label}</p>
|
426
439
|
<div class="MenuHover"></div>
|
427
440
|
</div>
|
@@ -431,12 +444,14 @@
|
|
431
444
|
</nav>
|
432
445
|
{#if isLoggedIn}
|
433
446
|
<div class="BalanceDepositWrapper">
|
434
|
-
<div class="
|
447
|
+
<div class="Background {isBalanceOpened ? 'Open' : ''}"></div>
|
448
|
+
<div class="Balance {isBalanceOpened ? 'Open' : ''}">
|
435
449
|
<player-account-balance-modal {session} {userid} {endpoint} {lang} {clientstyling} {clientstylingurl} {customlocaleidentifier} {gmversion} {displaybalanceoption} {currencyseparator} {currencydecimal} {currencyprecision} />
|
436
450
|
</div>
|
437
|
-
<div class="Deposit">
|
438
|
-
|
439
|
-
|
451
|
+
<div class="Deposit {isBalanceOpened ? 'Open' : ''}">
|
452
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
453
|
+
<div class="DepositButton" on:click={() => menuAction('deposit')}>
|
454
|
+
<p>{$_('deposit')}</p>
|
440
455
|
</div>
|
441
456
|
{#if shortCashierActivated}
|
442
457
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
@@ -526,36 +541,34 @@
|
|
526
541
|
{#if !mobileView}
|
527
542
|
<div class="LanguageSelector">
|
528
543
|
{#if (languagesArray.length > 1) }
|
529
|
-
|
530
|
-
|
531
|
-
|
532
|
-
|
533
|
-
{/each}
|
534
|
-
</select>
|
535
|
-
{:else}
|
536
|
-
<div class="LanguageDropdown">
|
537
|
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
538
|
-
<div class="SelectedOption" on:click={() => toggleLanguageDropdown()}>
|
544
|
+
<div class="LanguageDropdown">
|
545
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
546
|
+
<div class="SelectedOption" on:click={() => toggleLanguageDropdown()}>
|
547
|
+
{#if countryflagheader == 'true' }
|
539
548
|
<span class="LanguageName">{@html countryFlags[determineFlag()]}</span>
|
540
|
-
|
541
|
-
|
542
|
-
|
543
|
-
|
544
|
-
|
545
|
-
|
549
|
+
{:else}
|
550
|
+
<span class="LanguageName">{determineFlag()}</span>
|
551
|
+
{/if}
|
552
|
+
<span class=" {isOptionsListVisible ? 'TriangleActive' : 'TriangleInactive'}">
|
553
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="6.835" viewBox="0 0 14 6.835">
|
554
|
+
<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"/>
|
555
|
+
</svg>
|
556
|
+
</span>
|
546
557
|
</div>
|
547
|
-
|
548
|
-
|
549
|
-
|
550
|
-
|
558
|
+
</div>
|
559
|
+
<div class="OptionList {isOptionsListVisible ? 'Active' : ''}">
|
560
|
+
{#each languagesArray as operatorLanguage}
|
561
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
562
|
+
<div class="LanguageOption" on:click={() => selectLanguage(operatorLanguage)}>
|
563
|
+
{#if countryflagheader == 'true' }
|
551
564
|
<span class="FlagIcon">
|
552
565
|
{@html countryFlags[determineFlag(operatorLanguage)]}
|
553
566
|
</span>
|
554
|
-
|
555
|
-
</
|
556
|
-
|
557
|
-
|
558
|
-
|
567
|
+
{/if}
|
568
|
+
<span class="LanguageName">{operatorLanguage.slice(-2)}</span>
|
569
|
+
</div>
|
570
|
+
{/each}
|
571
|
+
</div>
|
559
572
|
{/if}
|
560
573
|
</div>
|
561
574
|
{/if}
|
@@ -902,7 +915,7 @@
|
|
902
915
|
{/if}
|
903
916
|
-->
|
904
917
|
|
905
|
-
<casino-hamburger-menu
|
918
|
+
<casino-hamburger-menu {cmsendpoint} {cmsenv} {userroles} {activecategory} {lang} {countryflaghamburger} {customlocaleidentifier} {languageslist} {clientstyling} {clientstylingurl}></casino-hamburger-menu>
|
906
919
|
|
907
920
|
<style lang="scss">
|
908
921
|
*,
|
@@ -963,10 +976,6 @@
|
|
963
976
|
top: 18px;
|
964
977
|
}
|
965
978
|
|
966
|
-
&.Open {
|
967
|
-
// animation: growWidth 1s forwards;
|
968
|
-
}
|
969
|
-
|
970
979
|
&.Open span:nth-child(1) {
|
971
980
|
top: 9px;
|
972
981
|
width: 100%;
|
@@ -990,18 +999,37 @@
|
|
990
999
|
}
|
991
1000
|
}
|
992
1001
|
|
993
|
-
|
994
|
-
|
995
1002
|
.Skeleton {
|
996
|
-
animation: skeleton-loading
|
1003
|
+
animation: skeleton-loading .6s linear infinite alternate;
|
997
1004
|
}
|
998
1005
|
|
999
1006
|
@keyframes skeleton-loading {
|
1000
1007
|
0% {
|
1001
|
-
background
|
1008
|
+
background: linear-gradient(90deg, rgba(35, 178, 78, .2) 0%, rgba(0, 61, 93, .2) 100%);
|
1009
|
+
}
|
1010
|
+
12% {
|
1011
|
+
background: linear-gradient(90deg, rgba(35, 178, 78, .225) 0%, rgba(0, 61, 93, .225) 100%);
|
1012
|
+
}
|
1013
|
+
25% {
|
1014
|
+
background: linear-gradient(90deg, rgba(35, 178, 78, .25) 0%, rgba(0, 61, 93, .25) 100%);
|
1015
|
+
}
|
1016
|
+
33% {
|
1017
|
+
background: linear-gradient(90deg, rgba(35, 178, 78, .275) 0%, rgba(0, 61, 93, .275) 100%);
|
1018
|
+
}
|
1019
|
+
50% {
|
1020
|
+
background: linear-gradient(90deg, rgba(35, 178, 78, .3) 0%, rgba(0, 61, 93, .3) 100%);
|
1021
|
+
}
|
1022
|
+
63% {
|
1023
|
+
background: linear-gradient(90deg, rgba(35, 178, 78, .325) 0%, rgba(0, 61, 93, .325) 100%);
|
1024
|
+
}
|
1025
|
+
75% {
|
1026
|
+
background: linear-gradient(90deg, rgba(35, 178, 78, .35) 0%, rgba(0, 61, 93, .35) 100%);
|
1027
|
+
}
|
1028
|
+
88% {
|
1029
|
+
background: linear-gradient(90deg, rgba(35, 178, 78, .375) 0%, rgba(0, 61, 93, .375) 100%);
|
1002
1030
|
}
|
1003
1031
|
100% {
|
1004
|
-
background
|
1032
|
+
background: linear-gradient(90deg, rgba(35, 178, 78, .4) 0%, rgba(0, 61, 93, .4) 100%);
|
1005
1033
|
}
|
1006
1034
|
}
|
1007
1035
|
|
@@ -1016,6 +1044,7 @@
|
|
1016
1044
|
.HeaderContainer {
|
1017
1045
|
position: fixed;
|
1018
1046
|
width: 100%;
|
1047
|
+
z-index: 999;
|
1019
1048
|
background-color: var(--emw-header-color-background, var(--emw-color-background, #000000));
|
1020
1049
|
display: flex;
|
1021
1050
|
flex-direction: column;
|
@@ -1070,18 +1099,32 @@
|
|
1070
1099
|
border-radius: 30px;
|
1071
1100
|
padding: 0 0 0 10px;
|
1072
1101
|
|
1102
|
+
.Background {
|
1103
|
+
height: 34px;
|
1104
|
+
width: 80px;
|
1105
|
+
position: absolute;
|
1106
|
+
transform: translateX(36%);
|
1107
|
+
background: linear-gradient(0deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
|
1108
|
+
linear-gradient(180deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
|
1109
|
+
border-radius: 30px;
|
1110
|
+
z-index: 3;
|
1111
|
+
transition: all .3s ease-out;
|
1112
|
+
|
1113
|
+
&.Open {
|
1114
|
+
width: 75px;
|
1115
|
+
transform: translateX(-56%);
|
1116
|
+
}
|
1117
|
+
}
|
1118
|
+
|
1073
1119
|
.Deposit {
|
1074
1120
|
display: flex;
|
1075
1121
|
align-items: center;
|
1076
1122
|
cursor: pointer;
|
1077
1123
|
justify-content: center;
|
1124
|
+
margin: 0 10px;
|
1125
|
+
z-index: 4;
|
1078
1126
|
|
1079
1127
|
.DepositButton {
|
1080
|
-
border-radius: 30px;
|
1081
|
-
height: 34px;
|
1082
|
-
width: 100px;
|
1083
|
-
background: linear-gradient(0deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
|
1084
|
-
linear-gradient(180deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
|
1085
1128
|
font-size: 14px;
|
1086
1129
|
text-align: center;
|
1087
1130
|
cursor: pointer;
|
@@ -1093,20 +1136,26 @@
|
|
1093
1136
|
text-transform: uppercase;
|
1094
1137
|
color: white;
|
1095
1138
|
}
|
1139
|
+
}
|
1096
1140
|
|
1097
|
-
|
1098
|
-
|
1099
|
-
|
1141
|
+
&.Open {
|
1142
|
+
.DepositButton {
|
1143
|
+
p {
|
1144
|
+
transition: all .5s linear;
|
1145
|
+
color: black;
|
1146
|
+
opacity: .5;
|
1147
|
+
}
|
1100
1148
|
}
|
1101
1149
|
|
1102
|
-
&:active {
|
1103
|
-
background: linear-gradient(0deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
|
1104
|
-
linear-gradient(180deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
|
1105
|
-
}
|
1106
1150
|
}
|
1107
1151
|
}
|
1108
1152
|
|
1109
1153
|
.Balance {
|
1154
|
+
z-index: 4;
|
1155
|
+
|
1156
|
+
&.Open {
|
1157
|
+
color: white;
|
1158
|
+
}
|
1110
1159
|
}
|
1111
1160
|
}
|
1112
1161
|
|
@@ -1268,6 +1317,7 @@
|
|
1268
1317
|
height: 100%;
|
1269
1318
|
cursor: pointer;
|
1270
1319
|
transform: all .3s linear;
|
1320
|
+
color: white;
|
1271
1321
|
|
1272
1322
|
.SelectedOption {
|
1273
1323
|
display: flex;
|
@@ -1276,7 +1326,6 @@
|
|
1276
1326
|
|
1277
1327
|
.TriangleActive, .TriangleInactive {
|
1278
1328
|
display: block;
|
1279
|
-
color: currentColor;
|
1280
1329
|
margin: 0 0 0 10px;
|
1281
1330
|
transition: all .2s;
|
1282
1331
|
&:hover {
|
@@ -1323,7 +1372,7 @@
|
|
1323
1372
|
z-index: 6;
|
1324
1373
|
right: 5px;
|
1325
1374
|
color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
|
1326
|
-
background:
|
1375
|
+
background: linear-gradient(90deg, rgba(42,79,55,1) 0%, rgba(0,61,92,1) 100%);
|
1327
1376
|
|
1328
1377
|
&.Active {
|
1329
1378
|
opacity: 1;
|
@@ -1342,14 +1391,15 @@
|
|
1342
1391
|
align-items: center;
|
1343
1392
|
transform: scale(1.1);
|
1344
1393
|
gap: 3px;
|
1345
|
-
background: black;
|
1346
1394
|
padding: 7px;
|
1347
1395
|
|
1348
1396
|
&:hover {
|
1349
|
-
transition: all .
|
1350
|
-
color:
|
1351
|
-
background
|
1397
|
+
transition: all 0.2s;
|
1398
|
+
color: var(--emw-color-primary);
|
1399
|
+
background: var(--emw-color-primary) transparent;
|
1400
|
+
box-shadow: inset 0px 0px 0px 2px var(--emw-color-primary);
|
1352
1401
|
border-radius: 20px;
|
1402
|
+
box-sizing: border-box;
|
1353
1403
|
}
|
1354
1404
|
}
|
1355
1405
|
}
|