Skip to content

Commit 0e26906

Browse files
vladitasevvladitasev
authored
fix(ui5-carousel): Content now shrinks properly (#1402)
1 parent 39068b3 commit 0e26906

File tree

5 files changed

+182
-29
lines changed

5 files changed

+182
-29
lines changed

‎packages/main/src/Carousel.hbs

+5-5
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
>
66
<div class="ui5-carousel-overflow-hidden">
77
<div class="{{classes.content}}" style="{{styles.content}}">
8-
{{#each items}}
9-
<div class="{{../classes.item}}">
8+
{{#each pages}}
9+
<div class="{{../classes.page}}">
1010
{{#each this}}
11-
{{#if this.item}}
11+
<div class="ui5-carousel-item" style="width: {{this.width}}%">
1212
<slot name="{{this.item._individualSlot}}" tabindex="{{this.tabIndex}}"></slot>
13-
{{/if}}
13+
</div>
1414
{{/each}}
1515
</div>
1616
{{/each}}
@@ -56,7 +56,7 @@
5656
></div>
5757
{{/each}}
5858
{{else}}
59-
<ui5-label>{{currenlySelectedIndexToShow}}&nbsp;{{ofText}}&nbsp;{{items.length}}</ui5-label>
59+
<ui5-label>{{currenlySelectedIndexToShow}}&nbsp;{{ofText}}&nbsp;{{pages.length}}</ui5-label>
6060
{{/if}}
6161
</div>
6262

‎packages/main/src/Carousel.js

+23-19
Original file line numberDiff line numberDiff line change
@@ -179,10 +179,6 @@ class Carousel extends UI5Element {
179179
this.i18nBundle = getI18nBundle("@ui5/webcomponents");
180180
}
181181

182-
onBeforeRendering() {
183-
this.itemsPerPage = this.effectiveItemsPerPage;
184-
}
185-
186182
onAfterRendering() {
187183
this._scrollEnablement.scrollContainer = this.getDomRef();
188184
}
@@ -214,15 +210,15 @@ class Carousel extends UI5Element {
214210
navigateLeft() {
215211
if (this.selectedIndex - 1 < 0) {
216212
if (this.cycling) {
217-
this.selectedIndex = this.items.length - 1;
213+
this.selectedIndex = this.pages.length - 1;
218214
}
219215
} else {
220216
--this.selectedIndex;
221217
}
222218
}
223219

224220
navigateRight() {
225-
if (this.selectedIndex + 1 > this.items.length - 1) {
221+
if (this.selectedIndex + 1 > this.pages.length - 1) {
226222
if (this.cycling) {
227223
this.selectedIndex = 0;
228224
}
@@ -239,18 +235,26 @@ class Carousel extends UI5Element {
239235
* Assuming that all items have the same width
240236
* @private
241237
*/
242-
get items() {
238+
get pages() {
243239
const result = [],
244-
innerArraysLength = Math.ceil(this.content.length / this.itemsPerPage);
240+
pagesCount = Math.ceil(this.content.length / this.effectiveItemsPerPage);
245241

246-
for (let i = 0; i < innerArraysLength; i++) {
242+
for (let pageIdx = 0; pageIdx < pagesCount; pageIdx++) {
247243
result.push([]);
248-
for (let j = 0; j < this.itemsPerPage; j++) {
249-
result[i].push({
250-
item: this.content[(i * this.itemsPerPage) + j],
251-
tabIndex: i === this.selectedIndex ? "0" : "-1",
252-
});
244+
for (let itemIdx = 0; itemIdx < this.effectiveItemsPerPage; itemIdx++) {
245+
const item = this.content[(pageIdx * this.effectiveItemsPerPage) + itemIdx];
246+
if (item) {
247+
result[pageIdx].push({
248+
item,
249+
tabIndex: pageIdx === this.selectedIndex ? "0" : "-1",
250+
});
251+
}
253252
}
253+
const itemsOnThisPage = result[pageIdx].length;
254+
const itemWidth = Math.floor(100 / itemsOnThisPage);
255+
result[pageIdx].forEach(item => {
256+
item.width = itemWidth;
257+
});
254258
}
255259

256260
return result;
@@ -280,19 +284,19 @@ class Carousel extends UI5Element {
280284
"ui5-carousel-navigation-wrapper": true,
281285
"ui5-carousel-navigation-with-buttons": this.arrowsPlacement === CarouselArrowsPlacement.Navigation,
282286
},
283-
item: {
284-
"ui5-carousel-item": true,
285-
"ui5-carousel-item-multiple": this.itemsPerPage > 1,
287+
page: {
288+
"ui5-carousel-page": true,
289+
"ui5-carousel-page-multiple": this.effectiveItemsPerPage > 1,
286290
},
287291
};
288292
}
289293

290294
get isPageTypeDots() {
291-
return this.items.length < Carousel.pageTypeLimit;
295+
return this.pages.length < Carousel.pageTypeLimit;
292296
}
293297

294298
get dots() {
295-
return this.items.map((item, index) => {
299+
return this.pages.map((item, index) => {
296300
return {
297301
active: index === this.selectedIndex,
298302
};

‎packages/main/src/themes/Carousel.css

+16-4
Original file line numberDiff line numberDiff line change
@@ -34,16 +34,16 @@
3434
width: 100%;
3535
padding: 0 .5rem;
3636
position: absolute;
37-
top: 50%;
37+
top: calc(50% - 2.5rem);
3838
display: flex;
3939
justify-content: space-between;
4040
box-sizing: border-box;
4141
}
4242

43+
4344
.ui5-carousel-content {
4445
width: 100%;
4546
height: 100%;
46-
height: inherit;
4747
position: relative;
4848
display: flex;
4949
flex-direction: row;
@@ -65,7 +65,7 @@
6565
height: calc(100% - 3.5rem);
6666
}
6767

68-
.ui5-carousel-item {
68+
.ui5-carousel-page {
6969
width: 100%;
7070
padding: 0 3rem;
7171
flex: 0 0 auto;
@@ -75,10 +75,22 @@
7575
box-sizing: border-box;
7676
}
7777

78-
.ui5-carousel-item-multiple {
78+
.ui5-carousel-page-multiple {
7979
justify-content: space-around;
8080
}
8181

82+
.ui5-carousel-item {
83+
height: 100%;
84+
display: flex;
85+
align-items: center;
86+
justify-content: center;
87+
margin-right: 1.25rem;
88+
}
89+
90+
.ui5-carousel-item:last-child {
91+
margin-right: 0;
92+
}
93+
8294
.ui5-carousel-navigation-button {
8395
width: var(--ui5_carousel_button_size);
8496
height: var(--ui5_carousel_button_size);

‎packages/main/test/pages/Carousel.html

+137
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,144 @@
1919
height: 25rem;
2020
margin-bottom: 1rem;
2121
}
22+
23+
.myCard {
24+
height: 100%;
25+
}
2226
</style>
27+
28+
<ui5-carousel items-per-page="3">
29+
<ui5-card
30+
id="card"
31+
status="4 of 10"
32+
heading="Quick Links"
33+
subheading="quick links"
34+
header-interactive
35+
class="myCard">
36+
<ui5-list id="myList3" separators="Inner">
37+
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
38+
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
39+
<ui5-li icon="line-charts" >Marketing plans</ui5-li>
40+
</ui5-list>
41+
42+
<ui5-input id="field" value="0"></ui5-input>
43+
</ui5-card>
44+
45+
<ui5-card
46+
id="card2"
47+
status="4 of 10"
48+
heading="Quick Links"
49+
subheading="quick links"
50+
class="myCard">
51+
<ui5-icon name="group" slot="avatar"></ui5-icon>
52+
<ui5-list id="myList3" separators="Inner">
53+
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
54+
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
55+
</ui5-list>
56+
</ui5-card>
57+
58+
<ui5-card heading="Quick Links" subheading="quick links" class="myCard">
59+
<ui5-list id="myList3" separators="Inner">
60+
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
61+
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
62+
</ui5-list>
63+
</ui5-card>
64+
65+
<ui5-card
66+
id="card"
67+
status="4 of 10"
68+
heading="Quick Links"
69+
subheading="quick links"
70+
header-interactive
71+
class="myCard">
72+
<ui5-list id="myList3" separators="Inner">
73+
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
74+
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
75+
<ui5-li icon="line-charts" >Marketing plans</ui5-li>
76+
</ui5-list>
77+
78+
<ui5-input id="field" value="0"></ui5-input>
79+
</ui5-card>
80+
81+
<ui5-card
82+
id="card2"
83+
status="4 of 10"
84+
heading="Quick Links"
85+
subheading="quick links"
86+
class="myCard">
87+
<ui5-icon name="group" slot="avatar"></ui5-icon>
88+
<ui5-list id="myList3" separators="Inner">
89+
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
90+
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
91+
</ui5-list>
92+
</ui5-card>
93+
94+
<ui5-card heading="Quick Links" subheading="quick links" class="myCard">
95+
<ui5-list id="myList3" separators="Inner">
96+
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
97+
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
98+
</ui5-list>
99+
</ui5-card>
100+
101+
<ui5-card
102+
id="card"
103+
status="4 of 10"
104+
heading="Quick Links"
105+
subheading="quick links"
106+
header-interactive
107+
class="myCard">
108+
<ui5-list id="myList3" separators="Inner">
109+
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
110+
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
111+
<ui5-li icon="line-charts" >Marketing plans</ui5-li>
112+
</ui5-list>
113+
114+
<ui5-input id="field" value="0"></ui5-input>
115+
</ui5-card>
116+
117+
<ui5-card
118+
id="card2"
119+
status="4 of 10"
120+
heading="Quick Links"
121+
subheading="quick links"
122+
class="myCard">
123+
<ui5-icon name="group" slot="avatar"></ui5-icon>
124+
<ui5-list id="myList3" separators="Inner">
125+
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
126+
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
127+
</ui5-list>
128+
</ui5-card>
129+
130+
<ui5-card heading="Quick Links" subheading="quick links" class="myCard">
131+
<ui5-list id="myList3" separators="Inner">
132+
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
133+
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
134+
</ui5-list>
135+
</ui5-card>
136+
137+
<ui5-card
138+
id="card2"
139+
status="4 of 10"
140+
heading="Quick Links"
141+
subheading="quick links"
142+
class="myCard">
143+
<ui5-icon name="group" slot="avatar"></ui5-icon>
144+
<ui5-list id="myList3" separators="Inner">
145+
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
146+
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
147+
</ui5-list>
148+
</ui5-card>
149+
150+
<ui5-card heading="Quick Links" subheading="quick links" class="myCard">
151+
<ui5-list id="myList3" separators="Inner">
152+
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
153+
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
154+
</ui5-list>
155+
</ui5-card>
156+
157+
</ui5-carousel>
158+
159+
23160
<ui5-carousel id="carousel1" cycling="true">
24161
<ui5-button>Button 1</ui5-button>
25162
<ui5-button>Button 2</ui5-button>

‎packages/main/test/specs/Carousel.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ describe("Carousel general interaction", () => {
4949

5050
it("ItemsPerPage property is working properly", () => {
5151
const carousel = browser.$("#carousel4");
52-
const pages = carousel.getProperty("items").length;
52+
const pages = carousel.getProperty("pages").length;
5353

5454
assert.strictEqual(pages, 3, "There are only 3 pages.");
5555
});

0 commit comments

Comments
 (0)