Skip to content

Commit a657313

Browse files
ala-nala-n
authored
Merge pull request #2532 from exadel-inc/feat/esl-nav-rework
feat(esl-carousel): `esl-carousel-nav` default classes and attributes reworked
2 parents 44e9804 + 79e2aef commit a657313

9 files changed

+93
-72
lines changed

‎site/views/examples/carousel/centered-siblings.sample.njk

+6-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ order: 6
44
tags: carousel-sample
55
---
66
<div class="esl-carousel-nav-container">
7-
<button class="esl-carousel-arrow inner prev hide-xs" esl-carousel-nav="group:prev">
7+
<button type="button"
8+
class="esl-carousel-arrow inner prev hide-xs"
9+
esl-carousel-nav="group:prev">
810
<span class="sr-only">Previous Slide</span>
911
</button>
1012

@@ -28,7 +30,9 @@ tags: carousel-sample
2830
</ul>
2931
</esl-carousel>
3032

31-
<button class="esl-carousel-arrow inner next hide-xs" esl-carousel-nav="group:next">
33+
<button type="button"
34+
class="esl-carousel-arrow inner next hide-xs"
35+
esl-carousel-nav="group:next">
3236
<span class="sr-only">Next Slide</span>
3337
</button>
3438
</div>

‎site/views/examples/carousel/default.sample.njk

+4-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ order: 1
44
tags: carousel-sample
55
---
66
<div class="mx-6 esl-carousel-nav-container">
7-
<button class="esl-carousel-arrow prev hide-xs"
7+
<button type="button"
8+
class="esl-carousel-arrow prev hide-xs"
89
esl-carousel-nav="group:prev"><span class="sr-only">Previous Slide</span></button>
910

1011
<esl-carousel demo-options-target
@@ -40,7 +41,8 @@ tags: carousel-sample
4041
</ul>
4142
</esl-carousel>
4243

43-
<button class="esl-carousel-arrow next hide-xs"
44+
<button type="button"
45+
class="esl-carousel-arrow next hide-xs"
4446
esl-carousel-nav="group:next"><span class="sr-only">Next Slide</span></button>
4547
</div>
4648
<esl-carousel-dots class="carousel-dots-wrapper" target="::prev::child(esl-carousel)" tabindex="0"></esl-carousel-dots>

‎site/views/examples/carousel/multirow.sample.njk

+4-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ order: 4
44
tags: carousel-sample
55
---
66
<div class="mx-6 esl-carousel-nav-container">
7-
<button class="esl-carousel-arrow prev hide-xs"
7+
<button type="button"
8+
class="esl-carousel-arrow prev hide-xs"
89
esl-carousel-nav="group:prev"><span class="sr-only">Previous Slide</span></button>
910

1011
<esl-carousel demo-options-target
@@ -39,7 +40,8 @@ tags: carousel-sample
3940
</ul>
4041
</esl-carousel>
4142

42-
<button class="esl-carousel-arrow next hide-xs"
43+
<button type="button"
44+
class="esl-carousel-arrow next hide-xs"
4345
esl-carousel-nav="group:next"><span class="sr-only">Next Slide</span></button>
4446
</div>
4547
<esl-carousel-dots class="carousel-dots-wrapper" target="::prev::find(esl-carousel)" tabindex="0"></esl-carousel-dots>

‎site/views/examples/carousel/nav-carousel.sample.njk

+2-2
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ tags: carousel-sample
2424
</esl-carousel>
2525
</div>
2626
<div class="flex-column marquee-nav-carousel esl-carousel-nav-container">
27-
<button class="esl-carousel-arrow inner prev" esl-carousel-nav="-4"></button>
27+
<button type="button" class="esl-carousel-arrow inner prev" esl-carousel-nav="-4"></button>
2828

2929
<esl-carousel id="nav-carousel"
3030
esl-carousel-touch="drag"
@@ -44,5 +44,5 @@ tags: carousel-sample
4444
</ul>
4545
</esl-carousel>
4646

47-
<button class="esl-carousel-arrow inner next" esl-carousel-nav="+4"></button>
47+
<button type="button" class="esl-carousel-arrow inner next" esl-carousel-nav="+4"></button>
4848
</div>

‎site/views/examples/carousel/siblings.sample.njk

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ order: 3
44
tags: carousel-sample
55
---
66
<div class="esl-carousel-nav-container">
7-
<button class="esl-carousel-arrow inner prev hide-xs" esl-carousel-nav="group:prev">
7+
<button type="button" class="esl-carousel-arrow inner prev hide-xs" esl-carousel-nav="group:prev">
88
<span class="sr-only">Previous Slide</span>
99
</button>
1010

@@ -26,7 +26,7 @@ tags: carousel-sample
2626
</ul>
2727
</esl-carousel>
2828

29-
<button class="esl-carousel-arrow inner next hide-xs" esl-carousel-nav="group:next">
29+
<button type="button" class="esl-carousel-arrow inner next hide-xs" esl-carousel-nav="group:next">
3030
<span class="sr-only">Next Slide</span>
3131
</button>
3232
</div>

‎site/views/examples/carousel/single.sample.njk

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ tags: carousel-sample
55
---
66

77
<div class="esl-carousel-no-extra-space esl-carousel-nav-container">
8-
<button class="esl-carousel-arrow inner prev hide-xs" esl-carousel-nav="group:prev">
8+
<button type="button" class="esl-carousel-arrow inner prev hide-xs" esl-carousel-nav="group:prev">
99
<span class="sr-only">Previous Slide</span>
1010
</button>
1111

@@ -28,7 +28,7 @@ tags: carousel-sample
2828
</ul>
2929
</esl-carousel>
3030

31-
<button class="esl-carousel-arrow inner next hide-xs" esl-carousel-nav="group:next">
31+
<button type="button" class="esl-carousel-arrow inner next hide-xs" esl-carousel-nav="group:next">
3232
<span class="sr-only">Next Slide</span>
3333
</button>
3434

‎site/views/examples/carousel/vertical.sample.njk

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ tags: carousel-sample
55
---
66

77
<div class="esl-carousel-no-extra-space esl-carousel-nav-container">
8-
<button class="esl-carousel-arrow inner prev hide-xs" esl-carousel-nav="group:prev">
8+
<button type="button" class="esl-carousel-arrow inner prev hide-xs" esl-carousel-nav="group:prev">
99
<span class="sr-only">Previous Slide</span>
1010
</button>
1111

@@ -30,7 +30,7 @@ tags: carousel-sample
3030
</ul>
3131
</esl-carousel>
3232

33-
<button class="esl-carousel-arrow inner next hide-xs" esl-carousel-nav="group:next">
33+
<button type="button" class="esl-carousel-arrow inner next hide-xs" esl-carousel-nav="group:next">
3434
<span class="sr-only">Next Slide</span>
3535
</button>
3636

‎src/modules/esl-carousel/plugin/nav/esl-carousel.nav.arrows.less

+65-54
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,81 @@
1+
/** Nav control mixin defaults */
2+
[esl-carousel-nav]:not([active]) {
3+
display: none;
4+
}
5+
6+
[esl-carousel-nav][disabled] {
7+
pointer-events: none;
8+
}
9+
10+
:root {
11+
// variable to make clickable area larger
12+
--esl-carousel-arrow-size: 40px;
13+
--esl-carousel-arrow-padding: 0px;
14+
--esl-carousel-arrow-bg: grey;
15+
}
16+
117
/** Arrow navigation styles */
218
.esl-carousel-nav-container {
319
position: relative;
4-
// variable to make clickable area larger
5-
--esl-carousel-arrow-padding: 0px;
6-
--esl-carousel-arrow-size: 40px;
20+
721
/* stylelint-disable-next-line */
822
--esl-carousel-arrow-offset: calc((var(--esl-carousel-arrow-size) + var(--esl-carousel-arrow-padding) + var(--esl-carousel-side-space)) * -1);
9-
--esl-carousel-arrow-bg: grey;
23+
}
1024

11-
.esl-carousel-arrow {
12-
position: absolute;
13-
z-index: 3;
14-
top: 50%;
15-
transform: translateY(-50%);
16-
padding: var(--esl-carousel-arrow-padding);
17-
18-
display: grid;
19-
place-content: center;
20-
21-
background: none;
22-
border: none;
23-
cursor: pointer;
24-
appearance: none;
25-
filter: drop-shadow(0 0 4px var(--esl-carousel-arrow-bg));
26-
27-
opacity: 0.75;
28-
29-
&:hover {
30-
opacity: 1;
31-
}
32-
33-
&[disabled] {
34-
opacity: 0.25;
35-
}
36-
&[disabled='hidden'] {
37-
visibility: hidden;
38-
}
39-
}
25+
.esl-carousel-arrow {
26+
position: absolute;
27+
z-index: 3;
28+
top: 50%;
29+
transform: translateY(-50%);
30+
padding: var(--esl-carousel-arrow-padding);
4031

41-
// Positioning
42-
.esl-carousel-arrow.prev {
43-
left: var(--esl-carousel-arrow-offset);
32+
display: grid;
33+
place-content: center;
4434

45-
&.inner {
46-
left: 0;
47-
}
48-
}
35+
background: none;
36+
border: none;
37+
cursor: pointer;
38+
appearance: none;
39+
filter: drop-shadow(0 0 4px var(--esl-carousel-arrow-bg));
4940

50-
.esl-carousel-arrow.next {
51-
right: var(--esl-carousel-arrow-offset);
41+
opacity: 0.75;
5242

53-
&.inner {
54-
right: 0;
55-
}
43+
&:hover {
44+
opacity: 1;
5645
}
5746

58-
.esl-carousel-arrow::before {
59-
content: '';
60-
display: block;
61-
width: var(--esl-carousel-arrow-size);
62-
height: var(--esl-carousel-arrow-size);
63-
background: var(--esl-carousel-arrow-bg);
64-
clip-path: polygon(20% 50%, 70% 0%, 80% 5%, 35% 50%, 80% 95%, 70% 100%);
47+
&[disabled] {
48+
opacity: 0.25;
49+
}
50+
}
51+
52+
// Positioning
53+
.esl-carousel-arrow.prev {
54+
left: var(--esl-carousel-arrow-offset);
55+
56+
&.inner {
57+
left: 0;
6558
}
59+
}
6660

67-
.esl-carousel-arrow.next::before {
68-
transform: scaleX(-1);
61+
.esl-carousel-arrow.next {
62+
right: var(--esl-carousel-arrow-offset);
63+
64+
&.inner {
65+
right: 0;
6966
}
7067
}
68+
69+
// Arrow icon
70+
.esl-carousel-arrow::before {
71+
content: '';
72+
display: block;
73+
width: var(--esl-carousel-arrow-size);
74+
height: var(--esl-carousel-arrow-size);
75+
background: var(--esl-carousel-arrow-bg);
76+
clip-path: polygon(20% 50%, 70% 0%, 80% 5%, 35% 50%, 80% 95%, 70% 100%);
77+
}
78+
79+
.esl-carousel-arrow.next::before {
80+
transform: scaleX(-1);
81+
}

‎src/modules/esl-carousel/plugin/nav/esl-carousel.nav.mixin.ts

+6-4
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,15 @@ export class ESLCarouselNavMixin extends ESLMixinElement {
4848
@ready
4949
public override connectedCallback(): void {
5050
super.connectedCallback();
51-
this.$$attr('disabled', true);
5251
if (!this.$carousel) return;
5352
if (this.$carousel.renderer) this._onUpdate();
5453
}
5554

5655
public override disconnectedCallback(): void {
5756
super.disconnectedCallback();
5857
memoize.clear(this, '$carousel');
58+
this.$$attr('active', false);
59+
this.$$attr('disabled', false);
5960
}
6061

6162
/** Handles carousel state changes */
@@ -64,9 +65,10 @@ export class ESLCarouselNavMixin extends ESLMixinElement {
6465
target: ($nav: ESLCarouselNavMixin) => $nav.$carousel
6566
})
6667
protected _onUpdate(): void {
67-
const isIncomplete = !this.$carousel?.renderer || this.$carousel.incomplete;
68-
const isDisabled = isIncomplete || !this.$carousel.canNavigate(this.command);
69-
this.$$attr('disabled', isIncomplete ? 'hidden' : (isDisabled ? 'inactive' : false));
68+
const isActive = !!this.$carousel?.renderer && !this.$carousel.incomplete;
69+
const isDisabled = isActive && !this.$carousel.canNavigate(this.command);
70+
this.$$attr('active', isActive);
71+
this.$$attr('disabled', isDisabled);
7072
this.$$attr('aria-controls', this.targetID);
7173
}
7274

0 commit comments

Comments
 (0)