Skip to content

Commit 15a9d81

Browse files
ala-nala-n
authored
Merge pull request #2356 from exadel-inc/feat/esl-carousel-slide
[🔧 esl-carousel]: migration carousel slide `esl-carousel-slide` to Mixin representation
2 parents c6b6b1e + 2f61a09 commit 15a9d81

20 files changed

+520
-306
lines changed

‎site/src/esl-carousel-demo/test-carousel.less

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@import (reference) '../common/variables.less';
22

3+
// TODO: Cleanup according to core styles update
4+
35
.marquee-carousel [esl-carousel-container] {
46
esl-carousel {
57
margin: 0;
@@ -43,7 +45,7 @@
4345
min-height: 500px;
4446
gap: 0;
4547
}
46-
esl-carousel-slide {
48+
[esl-carousel-slide] {
4749
padding: 0;
4850
}
4951
button.arrow-prev,
@@ -56,7 +58,7 @@
5658

5759
&.marquee-nav-carousel {
5860
padding: 0 60px;
59-
esl-carousel-slide {
61+
[esl-carousel-slide] {
6062
margin: 10px 0;
6163
}
6264
&::before {

‎site/views/_includes/landing/overview.njk

-61
This file was deleted.

‎site/views/examples/carousel.marquee.njk

+14-13
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,18 @@ icon: examples/carousel.svg
1313
type="default"
1414
esl-carousel-touch
1515
esl-carousel-relate-to="#nav-carousel">
16-
<div esl-carousel-slides>
16+
<ul esl-carousel-slides>
1717
{% for item in slides %}
18-
<esl-carousel-slide>
19-
<div class="img-container">
20-
<esl-image mode="cover" lazy
21-
data-alt="{{ 'Carousel slide ' + loop.index }}"
22-
data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
23-
</div>
24-
</esl-carousel-slide>
18+
<li esl-carousel-slide>
19+
<div class="img-container">
20+
<esl-image mode="cover"
21+
lazy
22+
data-alt="{{ 'Carousel slide ' + loop.index }}"
23+
data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
24+
</div>
25+
</li>
2526
{% endfor %}
26-
</div>
27+
</ul>
2728
</esl-carousel>
2829

2930
<esl-carousel-dots class="carousel-dots-wrapper"></esl-carousel-dots>
@@ -35,19 +36,19 @@ icon: examples/carousel.svg
3536
esl-carousel-touch
3637
type="default"
3738
count="5">
38-
<div esl-carousel-slides>
39+
<ul esl-carousel-slides>
3940
{% for item in slides %}
40-
<esl-carousel-slide>
41+
<li esl-carousel-slide>
4142
<div class="img-container img-container-4-3"
4243
esl-carousel-nav="slide:{{ loop.index - 1 }}"
4344
esl-carousel-nav-target="#main-carousel">
4445
<esl-image mode="cover" lazy
4546
data-alt="{{ 'Carousel slide ' + loop.index }}"
4647
data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
4748
</div>
48-
</esl-carousel-slide>
49+
</li>
4950
{% endfor %}
50-
</div>
51+
</ul>
5152
</esl-carousel>
5253

5354
<button class="esl-carousel-arrow inner icon-arrow-next" esl-carousel-nav="+4"></button>

‎site/views/examples/carousel.njk

+101-20
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ icon: examples/carousel.svg
1919
media="@XS|@SM|@MD|@LG|@XL"
2020
loop="true"
2121
count="1|2|3|4|5">
22-
<div esl-carousel-slides>
22+
<ul esl-carousel-slides>
2323
{% for item in cards %}
24-
<esl-carousel-slide {{ 'active' if loop.first }}>
24+
<li esl-carousel-slide {{ 'active' if loop.first }}>
2525
<div class="card">
2626
<div class="card-image img-container img-container-16-9">
2727
<esl-image lazy
@@ -35,9 +35,90 @@ icon: examples/carousel.svg
3535
<button type="button" class="btn" onclick="alert('I\'m alive')">Hey cart!</button>
3636
</div>
3737
</div>
38-
</esl-carousel-slide>
38+
</li>
3939
{% endfor %}
40-
</div>
40+
</ul>
41+
</esl-carousel>
42+
43+
<button class="esl-carousel-arrow icon-arrow-next hide-xs"
44+
esl-carousel-nav="group:next"><span class="sr-only">Next Slide</span></button>
45+
46+
<esl-carousel-dots class="carousel-dots-wrapper" tabindex="0"></esl-carousel-dots>
47+
</div>
48+
</section>
49+
50+
<section>
51+
<h2>Multi-slide Carousel (cards, adaptive, loop): </h2>
52+
<div esl-carousel-container>
53+
<button class="esl-carousel-arrow icon-arrow-prev hide-xs"
54+
esl-carousel-nav="group:prev"><span class="sr-only">Previous Slide</span></button>
55+
56+
<esl-carousel esl-carousel-touch
57+
esl-carousel-keyboard
58+
tabindex="0"
59+
media="@XS|@SM|@MD|@LG|@XL"
60+
loop="true"
61+
count="1|2|3|4|5">
62+
<ul esl-carousel-slides>
63+
{% for item in cards | limit(5) %}
64+
<li esl-carousel-slide {{ 'active' if loop.first }}>
65+
<div class="card">
66+
<div class="card-image img-container img-container-16-9">
67+
<esl-image lazy
68+
mode="cover"
69+
data-alt="{{ 'Carousel slide ' + loop.index }}"
70+
data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
71+
</div>
72+
<div class="card-content p-3">
73+
<h5>{{ item.name }}</h5>
74+
<p>{{ lorem.string(12) }}</p>
75+
<button type="button" class="btn" onclick="alert('I\'m alive')">Hey cart!</button>
76+
</div>
77+
</div>
78+
</li>
79+
{% endfor %}
80+
</ul>
81+
</esl-carousel>
82+
83+
<button class="esl-carousel-arrow icon-arrow-next hide-xs"
84+
esl-carousel-nav="group:next"><span class="sr-only">Next Slide</span></button>
85+
86+
<esl-carousel-dots class="carousel-dots-wrapper" tabindex="0"></esl-carousel-dots>
87+
</div>
88+
</section>
89+
90+
91+
<section>
92+
<h2>Multi-slide Carousel (cards, adaptive, loop): </h2>
93+
<div esl-carousel-container>
94+
<button class="esl-carousel-arrow icon-arrow-prev hide-xs"
95+
esl-carousel-nav="group:prev"><span class="sr-only">Previous Slide</span></button>
96+
97+
<esl-carousel esl-carousel-touch
98+
esl-carousel-keyboard
99+
tabindex="0"
100+
media="@XS|@SM|@MD|@LG|@XL"
101+
loop="true"
102+
count="1|2|3|4|5">
103+
<ul esl-carousel-slides>
104+
{% for item in cards | limit(4) %}
105+
<li esl-carousel-slide {{ 'active' if loop.first }}>
106+
<div class="card">
107+
<div class="card-image img-container img-container-16-9">
108+
<esl-image lazy
109+
mode="cover"
110+
data-alt="{{ 'Carousel slide ' + loop.index }}"
111+
data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
112+
</div>
113+
<div class="card-content p-3">
114+
<h5>{{ item.name }}</h5>
115+
<p>{{ lorem.string(12) }}</p>
116+
<button type="button" class="btn" onclick="alert('I\'m alive')">Hey cart!</button>
117+
</div>
118+
</div>
119+
</li>
120+
{% endfor %}
121+
</ul>
41122
</esl-carousel>
42123

43124
<button class="esl-carousel-arrow icon-arrow-next hide-xs"
@@ -59,17 +140,17 @@ icon: examples/carousel.svg
59140
esl-carousel-touch
60141
count="2"
61142
loop="true">
62-
<div esl-carousel-slides>
143+
<ul esl-carousel-slides>
63144
{% for i in range(0, 6) -%}
64-
<esl-carousel-slide style="max-width: 50%">
145+
<li esl-carousel-slide style="max-width: 50%">
65146
<div class="card">
66147
<esl-image mode="cover" lazy
67148
data-alt="Alt Text Test"
68149
data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
69150
</div>
70-
</esl-carousel-slide>
151+
</li>
71152
{%- endfor %}
72-
</div>
153+
</ul>
73154
</esl-carousel>
74155

75156
<button class="esl-carousel-arrow inner hide-xs" esl-carousel-nav="group:next">
@@ -91,15 +172,15 @@ icon: examples/carousel.svg
91172
media="@XS|@SM|@MD|@LG|@XL"
92173
count="2|3|4|5|6"
93174
loop="true">
94-
<div esl-carousel-slides>
175+
<ul esl-carousel-slides>
95176
{% for item in items %}
96-
<esl-carousel-slide {{ 'active' if loop.first }}>
177+
<li esl-carousel-slide {{ 'active' if loop.first }}>
97178
<div class="card" style="justify-content: center; background: {{item.background}}">
98179
<h4 class="text-center mb-0">{{ item.name }}</h4>
99180
</div>
100-
</esl-carousel-slide>
181+
</li>
101182
{% endfor %}
102-
</div>
183+
</ul>
103184
</esl-carousel>
104185

105186
<button class="esl-carousel-arrow icon-arrow-next hide-xs" esl-carousel-nav="group:next">
@@ -121,15 +202,15 @@ icon: examples/carousel.svg
121202
<esl-carousel esl-carousel-touch="none | @XS => drag"
122203
media="@XS|@SM|@MD|@LG|@XL"
123204
count="2|3|4|5|6">
124-
<div esl-carousel-slides>
205+
<ul esl-carousel-slides>
125206
{% for item in items %}
126-
<esl-carousel-slide {{ 'active' if loop.first }}>
207+
<li esl-carousel-slide {{ 'active' if loop.first }}>
127208
<div class="card" style="justify-content: center; background: {{item.background}}">
128209
<h4 class="text-center mb-0">{{ item.name }}</h4>
129210
</div>
130-
</esl-carousel-slide>
211+
</li>
131212
{% endfor %}
132-
</div>
213+
</ul>
133214
</esl-carousel>
134215

135216
<button class="esl-carousel-arrow icon-arrow-next hide-xs" esl-carousel-nav="group:next">
@@ -149,19 +230,19 @@ icon: examples/carousel.svg
149230
</button>
150231

151232
<esl-carousel esl-carousel-touch="@touch => swipe" loop="true">
152-
<div esl-carousel-slides>
233+
<ul esl-carousel-slides>
153234
{% for i in range(0, 4) -%}
154-
<esl-carousel-slide>
235+
<li esl-carousel-slide>
155236
<div class="card">
156237
<div class="img-container img-container-16-9">
157238
<esl-image mode="cover" lazy
158239
data-alt="Alt Text Test"
159240
data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
160241
</div>
161242
</div>
162-
</esl-carousel-slide>
243+
</li>
163244
{%- endfor %}
164-
</div>
245+
</ul>
165246
</esl-carousel>
166247

167248
<button class="esl-carousel-arrow icon-arrow-next hide-xs" esl-carousel-nav="group:next">

‎site/views/index.njk

-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ eleventyImport:
77

88
{% include 'landing/marquee.njk' %}
99
{% include 'landing/benefits.njk' %}
10-
{#{% include 'landing/overview.njk/'%}#}
1110
{% include 'landing/browser-support.njk/'%}
1211
{% include 'landing/promo-banner.njk/'%}
1312
{% include 'landing/newsline.njk/'%}

‎src/modules/esl-carousel/core/esl-carousel.events.ts

+20-10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type {ESLCarousel} from './esl-carousel';
2-
import type {ESLCarouselSlide} from './esl-carousel.slide';
32
import type {ESLCarouselDirection, ESLCarouselStaticState} from './nav/esl-carousel.nav.types';
43

54
/** {@link ESLCarouselSlideEvent} init object */
@@ -50,25 +49,29 @@ interface ESLCarouselChangeEventInit {
5049
config: ESLCarouselStaticState;
5150
/** Previous {@link ESLCarousel} instance config */
5251
oldConfig?: ESLCarouselStaticState;
53-
/** A list of {@link ESLCarouselSlide}s that has been added to the current carousel instance */
54-
added: ESLCarouselSlide[];
55-
/** A list of {@link ESLCarouselSlide}s that has been removed from the current carousel instance */
56-
removed: ESLCarouselSlide[];
52+
/** A list of slides that has been added to the current carousel instance */
53+
added: HTMLElement[];
54+
/** A list of slides that has been removed from the current carousel instance */
55+
removed: HTMLElement[];
5756
}
5857

5958
/** {@link ESLCarousel} event that represents slide configuration change */
6059
export class ESLCarouselChangeEvent extends Event implements ESLCarouselChangeEventInit {
6160
/** {@link ESLCarouselSlideEvent} event type dispatched on carousel config changes */
6261
public static readonly TYPE = 'esl:carousel:change';
62+
public static readonly INITIAL = 'esl:carousel:init';
6363

6464
public override readonly target: ESLCarousel;
6565
public readonly config: ESLCarouselStaticState;
6666
public readonly oldConfig?: ESLCarouselStaticState;
67-
public readonly added: ESLCarouselSlide[] = [];
68-
public readonly removed: ESLCarouselSlide[] = [];
67+
public readonly added: HTMLElement[] = [];
68+
public readonly removed: HTMLElement[] = [];
6969

70-
protected constructor(init: ESLCarouselChangeEventInit) {
71-
super(ESLCarouselChangeEvent.TYPE, {
70+
protected constructor(
71+
type: typeof ESLCarouselChangeEvent.TYPE | typeof ESLCarouselChangeEvent.INITIAL,
72+
init: ESLCarouselChangeEventInit
73+
) {
74+
super(type, {
7275
bubbles: true,
7376
cancelable: false,
7477
composed: true
@@ -77,6 +80,13 @@ export class ESLCarouselChangeEvent extends Event implements ESLCarouselChangeEv
7780
}
7881

7982
public static create(init: ESLCarouselChangeEventInit): ESLCarouselChangeEvent {
80-
return new ESLCarouselChangeEvent(init);
83+
return new ESLCarouselChangeEvent(ESLCarouselChangeEvent.TYPE, init);
84+
}
85+
public static createInitial(carousel: ESLCarousel): ESLCarouselChangeEvent {
86+
return new ESLCarouselChangeEvent(ESLCarouselChangeEvent.INITIAL, {
87+
added: carousel.$slides,
88+
removed: [],
89+
config: carousel.config
90+
});
8191
}
8292
}

0 commit comments

Comments
 (0)