@everymatrix/casino-slider 1.0.10 → 1.0.13
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/casino-slider.js +1 -1
- package/dist/casino-slider.js.map +1 -1
- package/package.json +2 -2
- package/src/CasinoSlider.svelte +25 -14
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@everymatrix/casino-slider",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.13",
|
4
4
|
"main": "dist/casino-slider.js",
|
5
5
|
"svelte": "src/index.ts",
|
6
6
|
"scripts": {
|
@@ -36,5 +36,5 @@
|
|
36
36
|
"publishConfig": {
|
37
37
|
"access": "public"
|
38
38
|
},
|
39
|
-
"gitHead": "
|
39
|
+
"gitHead": "4b2bbc7cb2c3424950a39147a985ac5d38207cdf"
|
40
40
|
}
|
package/src/CasinoSlider.svelte
CHANGED
@@ -34,7 +34,9 @@
|
|
34
34
|
|
35
35
|
let carousel:any;
|
36
36
|
let activeIndex:number;
|
37
|
+
let activeSubIndex:number;
|
37
38
|
let prevIndex:number;
|
39
|
+
let prevSubIndex:number;
|
38
40
|
let customStylingContainer:HTMLElement;
|
39
41
|
let sliderdata:Array<any> = [];
|
40
42
|
let subGroupsData: any;
|
@@ -43,12 +45,23 @@
|
|
43
45
|
|
44
46
|
// Clicking on the slider item will trigger this method and send a postmessage on window
|
45
47
|
// @TODO itemId type fix
|
46
|
-
let handleClick = (item:any, index:number):void => {
|
48
|
+
let handleClick = (item:any, index:number, subItem:any, subIndex:number, itemType:string):void => {
|
47
49
|
scrollHandler();
|
48
50
|
activeIndex = index;
|
49
51
|
activeIndex = activeIndex;
|
50
52
|
prevIndex = activeIndex;
|
51
|
-
|
53
|
+
|
54
|
+
if(itemType != 'secondary') {
|
55
|
+
getSubGroups(item, index, 'navigation');
|
56
|
+
activeSubIndex = null;
|
57
|
+
prevSubIndex = null;
|
58
|
+
return;
|
59
|
+
}
|
60
|
+
|
61
|
+
activeSubIndex = subIndex;
|
62
|
+
activeSubIndex = activeSubIndex;
|
63
|
+
prevSubIndex = activeSubIndex;
|
64
|
+
getSubGroups(subItem, subIndex, 'navigation');
|
52
65
|
};
|
53
66
|
|
54
67
|
let scrollLeft = ():void => {
|
@@ -107,7 +120,6 @@
|
|
107
120
|
|
108
121
|
const getSubGroups = (item:string, index?:number, trigger?:string):void => {
|
109
122
|
if(location == 'secondaryMenu' && endpoint && datasource && lang && item.id) {
|
110
|
-
|
111
123
|
let url:URL = new URL(`${endpoint}/casino/groups/${datasource}/${item.id}/subGroups?language=${lang}`);
|
112
124
|
fetch(url.href)
|
113
125
|
.then((res:any) => res.json())
|
@@ -211,7 +223,7 @@
|
|
211
223
|
<li class="CarouselItem {activeIndex == index || prevIndex == index ? 'active': ''}
|
212
224
|
{location == 'headerMain' ? '' : 'SecondaryMenu'}"
|
213
225
|
part="CarouselItem"
|
214
|
-
on:click={e => { handleClick(category, index); e.preventDefault()}}>
|
226
|
+
on:click={e => { handleClick(category, index, null, null, 'main'); e.preventDefault()}}>
|
215
227
|
{#if location === 'headerMain'}
|
216
228
|
<a href="#">{category.label}</a>
|
217
229
|
{:else}
|
@@ -221,10 +233,10 @@
|
|
221
233
|
{#if subGroupsData?.count > 0}
|
222
234
|
{#if subGroupsData && showsubgroups == 'true'}
|
223
235
|
<ul class="DropDown">
|
224
|
-
{#each subGroupsData?.items as subGroupsData}
|
236
|
+
{#each subGroupsData?.items as subGroupsData, subindex (subGroupsData.id)}
|
225
237
|
{#if subGroupsData.games.count}
|
226
|
-
<li on:click={e => { handleClick(subGroupsData,
|
227
|
-
<a class="SubDropDown">{subGroupsData?.name}</a>
|
238
|
+
<li on:click={e => { handleClick(category, index, subGroupsData, subindex, 'secondary'); e.stopPropagation();}}>
|
239
|
+
<a class="SubDropDown {activeSubIndex == subindex || prevSubIndex == subindex ? 'active': ''}">{subGroupsData?.name}</a>
|
228
240
|
</li>
|
229
241
|
{/if}
|
230
242
|
{/each}
|
@@ -424,7 +436,9 @@
|
|
424
436
|
top: 0;
|
425
437
|
opacity: 0;
|
426
438
|
transition: opacity 0.1s, left 0s 0.1s, top 0.1s;
|
427
|
-
background: var(--emfe-w-color-
|
439
|
+
background: var(--emfe-w-color-secondary, #FD2839); /* fallback for old browsers */
|
440
|
+
background: -webkit-linear-gradient(var(--emfe-w-color-secondary, #FD2839), var(--emfe-w-color-primary, #D0046C)); /* Chrome 10-25, Safari 5.1-6 */
|
441
|
+
background: linear-gradient(var(--emfe-w-color-secondary, #FD2839), var(--emfe-w-color-primary, #D0046C)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
428
442
|
}
|
429
443
|
}
|
430
444
|
|
@@ -447,12 +461,9 @@
|
|
447
461
|
opacity:0;
|
448
462
|
}
|
449
463
|
|
450
|
-
.SubDropDown {
|
451
|
-
|
452
|
-
|
453
|
-
background: -webkit-linear-gradient(var(--emfe-w-color-contrast, #07072A), var(--emfe-w-color-primary, #D0046C)); /* Chrome 10-25, Safari 5.1-6 */
|
454
|
-
|
455
|
-
background: linear-gradient(var(--emfe-w-color-contrast, #07072A), var(--emfe-w-color-primary, #D0046C)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
464
|
+
.SubDropDown:hover, .SubDropDown.active {
|
465
|
+
color: var(--emfe-w-color-black, #000);
|
466
|
+
background: var(--emfe-w-color-white, #FFF);
|
456
467
|
}
|
457
468
|
}
|
458
469
|
|