Skip to content

Commit e7af480

Browse files
fifoosidfifoosid
authoredMay 27, 2020
feat(ui5-carousel): introduce loadMore event (#1667)
·
v./29.5v0.0.0-7b49a7ff1
1 parent 549148d commit e7af480

File tree

4 files changed

+610
-483
lines changed

4 files changed

+610
-483
lines changed
 

‎packages/main/src/Carousel.js

+29
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,18 @@ const metadata = {
100100
defaultValue: 0,
101101
},
102102

103+
/**
104+
* Defines when the <code>loadMore</code> event is thrown. If not applied the event will not be thrown.
105+
* @type {Integer}
106+
* @defaultvalue 1
107+
* @public
108+
* @since 1.0.0-rc.8
109+
*/
110+
infiniteScrollOffset: {
111+
type: Integer,
112+
defaultValue: 1,
113+
},
114+
103115
/**
104116
* Defines the position of arrows.
105117
* <br><br>
@@ -168,6 +180,17 @@ const metadata = {
168180
selectedIndex: { type: Integer },
169181
},
170182
},
183+
184+
/**
185+
* Fired for the last items of the <code>ui5-carousel</code> if it is scrolled and the direction of scrolling is to the end.
186+
* The number of items for which the event is thrown is controlled by the <code>infiniteScrollOffset</code> property.
187+
* @event
188+
* @public
189+
* @since 1.0.0-rc.8
190+
*/
191+
loadMore: {
192+
193+
},
171194
},
172195
};
173196

@@ -332,6 +355,8 @@ class Carousel extends UI5Element {
332355
if (this.selectedIndex + 1 > this.pagesCount - 1) {
333356
if (this.cyclic) {
334357
this.selectedIndex = 0;
358+
} else {
359+
return;
335360
}
336361
} else {
337362
++this.selectedIndex;
@@ -340,6 +365,10 @@ class Carousel extends UI5Element {
340365
if (peviousSelectedIndex !== this.selectedIndex) {
341366
this.fireEvent("navigate", { selectedIndex: this.selectedIndex });
342367
}
368+
369+
if (this.pagesCount - this.selectedIndex <= this.infiniteScrollOffset + 1) {
370+
this.fireEvent("loadMore");
371+
}
343372
}
344373

345374
/**

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

+406-482
Large diffs are not rendered by default.

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

+154
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7+
8+
<title>Carousel</title>
9+
10+
<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
11+
<script src="../../resources/bundle.esm.js" type="module"></script>
12+
<script nomodule src="../../resources/bundle.es5.js"></script>
13+
14+
</head>
15+
16+
<body style="background-color: var(--sapBackgroundColor); padding: 1rem;">
17+
<style>
18+
ui5-carousel {
19+
height: 25rem;
20+
margin-bottom: 1rem;
21+
}
22+
23+
.myCard {
24+
height: 100%;
25+
}
26+
</style>
27+
28+
<ui5-busyindicator id="busy" style="width: 100%;">
29+
<ui5-carousel id="dynamicCarousel" items-per-page-s="3" items-per-page-m="3" items-per-page-l="3" infinite-scroll-offset="0">
30+
<ui5-card
31+
id="card"
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+
heading="Quick Links"
48+
subheading="quick links"
49+
class="myCard">
50+
<ui5-icon name="group" slot="avatar"></ui5-icon>
51+
<ui5-list id="myList3" separators="Inner">
52+
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
53+
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
54+
</ui5-list>
55+
</ui5-card>
56+
57+
<ui5-card heading="Quick Links" subheading="quick links" class="myCard">
58+
<ui5-list id="myList3" separators="Inner">
59+
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
60+
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
61+
</ui5-list>
62+
</ui5-card>
63+
64+
<ui5-card
65+
id="card"
66+
heading="Quick Links"
67+
subheading="quick links"
68+
header-interactive
69+
class="myCard">
70+
<ui5-list id="myList3" separators="Inner">
71+
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
72+
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
73+
<ui5-li icon="line-charts" >Marketing plans</ui5-li>
74+
</ui5-list>
75+
76+
<ui5-input id="field" value="0"></ui5-input>
77+
</ui5-card>
78+
79+
<ui5-card
80+
id="card2"
81+
heading="Quick Links"
82+
subheading="quick links"
83+
class="myCard">
84+
<ui5-icon name="group" slot="avatar"></ui5-icon>
85+
<ui5-list id="myList3" separators="Inner">
86+
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
87+
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
88+
</ui5-list>
89+
</ui5-card>
90+
91+
<ui5-card heading="Quick Links" subheading="quick links" class="myCard">
92+
<ui5-list id="myList3" separators="Inner">
93+
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
94+
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
95+
</ui5-list>
96+
</ui5-card>
97+
98+
<ui5-card
99+
id="card"
100+
heading="Quick Links"
101+
subheading="quick links"
102+
header-interactive
103+
class="myCard">
104+
<ui5-list id="myList3" separators="Inner">
105+
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
106+
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
107+
<ui5-li icon="line-charts" >Marketing plans</ui5-li>
108+
</ui5-list>
109+
110+
<ui5-input id="field" value="0"></ui5-input>
111+
</ui5-card>
112+
113+
114+
</ui5-carousel>
115+
</ui5-busyindicator>
116+
117+
<script>
118+
var dynamicCarousel = document.getElementById('dynamicCarousel');
119+
var busy = document.getElementById('busy');
120+
121+
function createCard() {
122+
var card = document.createElement("ui5-card");
123+
card.heading = "Dynamic card ";
124+
card.subheading = "new";
125+
card.classList.add("myCard");
126+
card.textContent = Math.random() + "";
127+
128+
dynamicCarousel.appendChild(card);
129+
}
130+
131+
dynamicCarousel.addEventListener("ui5-loadMore", function(event) {
132+
133+
if (dynamicCarousel.children.length >= 20) {
134+
console.log("All items loaded!");
135+
return;
136+
}
137+
138+
busy.active = true;
139+
setTimeout(function() {
140+
console.log("Fetching 3 items from db...");
141+
142+
createCard();
143+
createCard();
144+
createCard();
145+
busy.active = false;
146+
147+
}, 1000);
148+
149+
});
150+
</script>
151+
</body>
152+
153+
154+
</html>

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

+21-1
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,6 @@ describe("Carousel general interaction", () => {
101101
assert.strictEqual(pages, 1, "There is only 1 page.");
102102
});
103103

104-
105104
it("Invalid selectedIndex normalized", () => {
106105
const carousel = browser.$("#carousel7");
107106
const selectedIndex = carousel.getProperty("selectedIndex");
@@ -149,4 +148,25 @@ describe("Carousel general interaction", () => {
149148
assert.strictEqual(selectedIndex.getProperty("value"), "0", "The selectedIndex is correct.");
150149
assert.strictEqual(eventCounter.getProperty("value"), "6", "The navigate event is not fired as no previous item.");
151150
});
151+
152+
it("loadMore event is thrown only when neccessary", () => {
153+
const carousel = browser.$("#carousel9");
154+
const eventCounter = browser.$("#loadmore-result");
155+
const navigationArrowForward = carousel.shadow$("ui5-button[arrow-forward]");
156+
157+
navigationArrowForward.click();
158+
navigationArrowForward.click();
159+
navigationArrowForward.click();
160+
navigationArrowForward.click();
161+
navigationArrowForward.click();
162+
navigationArrowForward.click();
163+
164+
assert.strictEqual(eventCounter.getProperty("value"), "0" , "loadMore event is not thrown");
165+
166+
navigationArrowForward.click();
167+
navigationArrowForward.click();
168+
navigationArrowForward.click();
169+
170+
assert.strictEqual(eventCounter.getProperty("value"), "3", "loadMore event is thrown 3 times");
171+
});
152172
});

0 commit comments

Comments
 (0)
Please sign in to comment.