@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="true" countryflaghamburger='true'customlocaleidentifier=""></casino-header-controller>
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.0",
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": "23b14632ab842e43bf71843de47000e6dd141751"
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 = (data: any): void => {
112
- switch (data) {
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
- <div class="ItemMenu {menuItem.id == activeIndex ? 'Active' : ''}">
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="Balance">
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
- <div class="DepositButton">
439
- <p>Deposit</p>
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
- {#if countryflagheader !== 'true'}
530
- <select bind:value={selectedLanguage} class="Item ItemLanguage NoFlag" on:change={()=>menuAction('language')}>
531
- {#each languagesArray as operatorLanguage}
532
- <option value={operatorLanguage} selected>{operatorLanguage.slice(-2)}</option>
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
- <span class=" {isOptionsListVisible ? 'TriangleActive' : 'TriangleInactive'}">
541
- <svg xmlns="http://www.w3.org/2000/svg" width="14" height="6.835" viewBox="0 0 14 6.835">
542
- <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"/>
543
- </svg>
544
- </span>
545
- </div>
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
- <div class="OptionList {isOptionsListVisible ? 'Active' : ''}">
548
- {#each languagesArray as operatorLanguage}
549
- <!-- svelte-ignore a11y-click-events-have-key-events -->
550
- <div class="LanguageOption" on:click={() => selectLanguage(operatorLanguage)}>
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
- <span class="LanguageName">{operatorLanguage.slice(-2)}</span>
555
- </div>
556
- {/each}
557
- </div>
558
- {/if}
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 menuitemsurl={hamburgerURL} {activecategory} {lang} {countryflaghamburger} {customlocaleidentifier} {languageslist} {clientstyling} {clientstylingurl}></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 1s linear infinite alternate;
1003
+ animation: skeleton-loading .6s linear infinite alternate;
997
1004
  }
998
1005
 
999
1006
  @keyframes skeleton-loading {
1000
1007
  0% {
1001
- background-color: hsl(192, 2%, 45%);
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-color: hsl(200, 20%, 95%);
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
- &:hover {
1098
- background: linear-gradient(180deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
1099
- linear-gradient(0deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
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: var(--emw-header-color-secondary-menu-bg, var(--emw-color-background-secondary, #050518));
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 .5s;
1350
- color: black;
1351
- background-color: var(--emw-header-color-primary, var(--emw-color-primary, #22B04F));
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
  }