Skip to content

Commit 351d289

Browse files
kskondovgeorgimkv
kskondov
and
georgimkv
authored
fix(ui5-carousel): enhance public api (#3360)
Part of #3107 New features: Added "visibleItemsIndices" public getter returning an array Added "navigateTo" method that navigates to an item BREAKING_CHANGE: selectedIndex property is deprecated infiniteScrollOffset property is deprecated load-more event is deprecated Co-authored-by: Georgi Minkov <[email protected]>
1 parent d85561a commit 351d289

File tree

5 files changed

+83
-262
lines changed

5 files changed

+83
-262
lines changed

‎packages/main/src/Carousel.js

+56-53
Original file line numberDiff line numberDiff line change
@@ -114,25 +114,13 @@ const metadata = {
114114
* Defines the index of the initially selected item.
115115
* @type {Integer}
116116
* @defaultvalue 0
117-
* @public
117+
* @private
118118
*/
119-
selectedIndex: {
119+
_selectedIndex: {
120120
type: Integer,
121121
defaultValue: 0,
122122
},
123123

124-
/**
125-
* Defines when the <code>load-more</code> event is fired. If not applied the event will not be fired.
126-
* @type {Integer}
127-
* @defaultvalue 1
128-
* @public
129-
* @since 1.0.0-rc.8
130-
*/
131-
infiniteScrollOffset: {
132-
type: Integer,
133-
defaultValue: 1,
134-
},
135-
136124
/**
137125
* Defines the position of arrows.
138126
* <br><br>
@@ -197,12 +185,12 @@ const metadata = {
197185
events: /** @lends sap.ui.webcomponents.main.Carousel.prototype */ {
198186

199187
/**
200-
* Fired whenever the <code>selectedIndex</code> changes due to user interaction,
188+
* Fired whenever the page changes due to user interaction,
201189
* when the user clicks on the navigation arrows or while resizing,
202190
* based on the <code>items-per-page-l</code>, <code>items-per-page-m</code> and <code>items-per-page-s</code> properties.
203191
*
204192
* @event
205-
* @param {Integer} selectedIndex the current <code>selectedIndex</code>.
193+
* @param {Integer} selectedIndex the current selected index
206194
* @public
207195
* @since 1.0.0-rc.7
208196
*/
@@ -211,15 +199,6 @@ const metadata = {
211199
selectedIndex: { type: Integer },
212200
},
213201
},
214-
215-
/**
216-
* Fired for the last items of the component if it is scrolled and the direction of scrolling is to the end.
217-
* The number of items for which the event is fired is controlled by the <code>infiniteScrollOffset</code> property.
218-
* @event sap.ui.webcomponents.main.Carousel#load-more
219-
* @public
220-
* @since 1.0.0-rc.8
221-
*/
222-
"load-more": {},
223202
},
224203
};
225204

@@ -330,9 +309,8 @@ class Carousel extends UI5Element {
330309
}
331310

332311
validateSelectedIndex() {
333-
if (!this.isIndexInRange(this.selectedIndex)) {
334-
this.selectedIndex = 0;
335-
console.warn(`The "selectedIndex" is out of range, changed to: ${0}`); // eslint-disable-line
312+
if (!this.isIndexInRange(this._selectedIndex)) {
313+
this._selectedIndex = 0;
336314
}
337315
}
338316

@@ -352,9 +330,9 @@ class Carousel extends UI5Element {
352330
return;
353331
}
354332

355-
if (this.selectedIndex > this.pagesCount - 1) {
356-
this.selectedIndex = this.pagesCount - 1;
357-
this.fireEvent("navigate", { selectedIndex: this.selectedIndex });
333+
if (this._selectedIndex > this.pagesCount - 1) {
334+
this._selectedIndex = this.pagesCount - 1;
335+
this.fireEvent("navigate", { selectedIndex: this._selectedIndex });
358336
}
359337
}
360338

@@ -397,43 +375,50 @@ class Carousel extends UI5Element {
397375
navigateLeft() {
398376
this._resizing = false;
399377

400-
const previousSelectedIndex = this.selectedIndex;
378+
const previousSelectedIndex = this._selectedIndex;
401379

402-
if (this.selectedIndex - 1 < 0) {
380+
if (this._selectedIndex - 1 < 0) {
403381
if (this.cyclic) {
404-
this.selectedIndex = this.pagesCount - 1;
382+
this._selectedIndex = this.pagesCount - 1;
405383
}
406384
} else {
407-
--this.selectedIndex;
385+
--this._selectedIndex;
408386
}
409387

410-
if (previousSelectedIndex !== this.selectedIndex) {
411-
this.fireEvent("navigate", { selectedIndex: this.selectedIndex });
388+
if (previousSelectedIndex !== this._selectedIndex) {
389+
this.fireEvent("navigate", { selectedIndex: this._selectedIndex });
412390
}
413391
}
414392

415393
navigateRight() {
416394
this._resizing = false;
417395

418-
const previousSelectedIndex = this.selectedIndex;
396+
const previousSelectedIndex = this._selectedIndex;
419397

420-
if (this.selectedIndex + 1 > this.pagesCount - 1) {
398+
if (this._selectedIndex + 1 > this.pagesCount - 1) {
421399
if (this.cyclic) {
422-
this.selectedIndex = 0;
400+
this._selectedIndex = 0;
423401
} else {
424402
return;
425403
}
426404
} else {
427-
++this.selectedIndex;
405+
++this._selectedIndex;
428406
}
429407

430-
if (previousSelectedIndex !== this.selectedIndex) {
431-
this.fireEvent("navigate", { selectedIndex: this.selectedIndex });
408+
if (previousSelectedIndex !== this._selectedIndex) {
409+
this.fireEvent("navigate", { selectedIndex: this._selectedIndex });
432410
}
411+
}
433412

434-
if (this.pagesCount - this.selectedIndex <= this.infiniteScrollOffset + 1) {
435-
this.fireEvent("load-more");
436-
}
413+
/**
414+
* Changes the currently displayed page.
415+
* @param {Integer} itemIndex The index of the target page
416+
* @since 1.0.0-rc.15
417+
* @public
418+
*/
419+
navigateTo(itemIndex) {
420+
this._resizing = false;
421+
this._selectedIndex = itemIndex;
437422
}
438423

439424
/**
@@ -468,7 +453,7 @@ class Carousel extends UI5Element {
468453
}
469454

470455
isItemInViewport(index) {
471-
return index >= this.selectedIndex && index <= this.selectedIndex + this.effectiveItemsPerPage - 1;
456+
return index >= this._selectedIndex && index <= this._selectedIndex + this.effectiveItemsPerPage - 1;
472457
}
473458

474459
isIndexInRange(index) {
@@ -501,7 +486,7 @@ class Carousel extends UI5Element {
501486
get styles() {
502487
return {
503488
content: {
504-
transform: `translateX(${this._isRTL ? "" : "-"}${this.selectedIndex * this._itemWidth}px`,
489+
transform: `translateX(${this._isRTL ? "" : "-"}${this._selectedIndex * this._itemWidth}px`,
505490
},
506491
};
507492
}
@@ -546,7 +531,7 @@ class Carousel extends UI5Element {
546531

547532
for (let index = 0; index < pages; index++) {
548533
dots.push({
549-
active: index === this.selectedIndex,
534+
active: index === this._selectedIndex,
550535
ariaLabel: this.i18nBundle.getText(CAROUSEL_DOT_TEXT, [index + 1], [pages]),
551536
});
552537
}
@@ -564,11 +549,11 @@ class Carousel extends UI5Element {
564549
}
565550

566551
get hasPrev() {
567-
return this.cyclic || this.selectedIndex - 1 >= 0;
552+
return this.cyclic || this._selectedIndex - 1 >= 0;
568553
}
569554

570555
get hasNext() {
571-
return this.cyclic || this.selectedIndex + 1 <= this.pagesCount - 1;
556+
return this.cyclic || this._selectedIndex + 1 <= this.pagesCount - 1;
572557
}
573558

574559
get suppressAnimation() {
@@ -580,15 +565,15 @@ class Carousel extends UI5Element {
580565
}
581566

582567
get selectedIndexToShow() {
583-
return this._isRTL ? this.pagesCount - (this.pagesCount - this.selectedIndex) + 1 : this.selectedIndex + 1;
568+
return this._isRTL ? this.pagesCount - (this.pagesCount - this._selectedIndex) + 1 : this._selectedIndex + 1;
584569
}
585570

586571
get ofText() {
587572
return this.i18nBundle.getText(CAROUSEL_OF_TEXT);
588573
}
589574

590575
get ariaActiveDescendant() {
591-
return this.content.length ? `${this._id}-carousel-item-${this.selectedIndex + 1}` : undefined;
576+
return this.content.length ? `${this._id}-carousel-item-${this._selectedIndex + 1}` : undefined;
592577
}
593578

594579
get nextPageText() {
@@ -599,6 +584,24 @@ class Carousel extends UI5Element {
599584
return this.i18nBundle.getText(CAROUSEL_PREVIOUS_ARROW_TEXT);
600585
}
601586

587+
/**
588+
* The indices of the currently visible items of the component.
589+
* @readonly
590+
* @since 1.0.0-rc.15
591+
* @returns {Integer[]} the indices of the visible items
592+
*/
593+
get visibleItemsIndices() {
594+
const visibleItemsIndices = [];
595+
596+
this.items.forEach((item, index) => {
597+
if (this.isItemInViewport(index)) {
598+
visibleItemsIndices.push(index);
599+
}
600+
});
601+
602+
return visibleItemsIndices;
603+
}
604+
602605
static get dependencies() {
603606
return [
604607
Button,

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

+7-20
Original file line numberDiff line numberDiff line change
@@ -312,7 +312,7 @@
312312
<ui5-button>Button 9</ui5-button>
313313
</ui5-carousel>
314314

315-
<ui5-carousel id="carousel3" selected-index="1" arrows-placement="Navigation">
315+
<ui5-carousel id="carousel3" arrows-placement="Navigation">
316316
<ui5-button>Button 1</ui5-button>
317317
<ui5-button>Button 2</ui5-button>
318318
<ui5-button>Button 3</ui5-button>
@@ -373,19 +373,6 @@
373373
<ui5-button>Button 3</ui5-button>
374374
</ui5-carousel>
375375

376-
<ui5-title>Carousel with out of range index</ui5-title>
377-
<ui5-carousel id="carousel7" items-per-page-s="1" items-per-page-m="4" items-per-page-l="8" selected-index="15">
378-
<ui5-button>Button 1</ui5-button>
379-
<ui5-button>Button 2</ui5-button>
380-
<ui5-button>Button 3</ui5-button>
381-
<ui5-button>Button 4</ui5-button>
382-
<ui5-button>Button 5</ui5-button>
383-
<ui5-button>Button 6</ui5-button>
384-
<ui5-button>Button 7</ui5-button>
385-
<ui5-button>Button 8</ui5-button>
386-
<ui5-button>Button 9</ui5-button>
387-
</ui5-carousel>
388-
389376
<ui5-carousel id="carousel8" items-per-page-m="4" items-per-page-l="4">
390377
<ui5-button>Button 1</ui5-button>
391378
<ui5-button>Button 2</ui5-button>
@@ -399,7 +386,7 @@
399386
<ui5-input id="result"></ui5-input>
400387
<ui5-input id="resultCounter"></ui5-input>
401388

402-
<ui5-carousel id="carousel9" infinite-scroll-offset="2">
389+
<ui5-carousel id="carousel9" items-per-page-m="2">
403390
<ui5-button>Button 1</ui5-button>
404391
<ui5-button>Button 2</ui5-button>
405392
<ui5-button>Button 3</ui5-button>
@@ -411,7 +398,7 @@
411398
<ui5-button>Button 9</ui5-button>
412399
<ui5-button>Button 10</ui5-button>
413400
</ui5-carousel>
414-
<ui5-input id="loadmore-result" value="0"></ui5-input>
401+
<ui5-input id="visible-items" value="0"></ui5-input>
415402

416403
<ui5-title style="margin-top: 2rem;">Carousel with hidden page indicator</ui5-title>
417404
<ui5-label>arrows-placement="Navigation"</ui5-label>
@@ -438,12 +425,12 @@
438425
resultCounter.value = ++counter;
439426
});
440427

441-
var loadMoreConter = 0,
442-
loadMoreInput = document.getElementById("loadmore-result");
428+
var visibleItems = document.getElementById("visible-items");
443429

444-
carousel9.addEventListener("ui5-loadMore", function (event) {
445-
loadMoreInput.value = ++loadMoreConter;
430+
carousel9.addEventListener("ui5-navigate", function (event) {
431+
visibleItems.value = carousel9.visibleItemsIndices;
446432
});
433+
447434
</script>
448435

449436
</html>

0 commit comments

Comments
 (0)