Skip to content

Commit e13a4c9

Browse files
georgimkvgeorgimkv
authored
feat(ui5-carousel): add property hide-page-indicator (#3268)
The page indicator can now be hidden by setting the property `hide-page-indicator` on the ui5-carousel element. Closes: #3158
1 parent b3b42f6 commit e13a4c9

File tree

5 files changed

+109
-37
lines changed

5 files changed

+109
-37
lines changed

‎packages/main/src/Carousel.hbs

+16-14
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
@mouseout="{{_onmouseout}}"
88
@mouseover="{{_onmouseover}}"
99
>
10-
<div class="ui5-carousel-viewport {{classes.viewport}}">
10+
<div class="{{classes.viewport}}">
1111
<div class="{{classes.content}}" style="{{styles.content}}">
1212
{{#each items}}
1313
<div id="{{id}}"
@@ -30,25 +30,27 @@
3030
</div>
3131
{{/if}}
3232

33-
{{#if hasManyPages}}
33+
{{#if renderNavigation}}
3434
<div class="{{classes.navigation}}">
3535
{{#if arrows.navigation}}
3636
{{> arrow-back}}
3737
{{/if}}
3838

3939
<div class="ui5-carousel-navigation">
40-
{{#if isPageTypeDots}}
41-
{{#each dots}}
42-
<div
43-
role="img"
44-
aria-label="{{ariaLabel}}"
45-
?active="{{active}}"
46-
class="ui5-carousel-navigation-dot"
47-
></div>
48-
{{/each}}
49-
{{else}}
50-
<ui5-label>{{selectedIndexToShow}}&nbsp;{{ofText}}&nbsp;{{pagesCount}}</ui5-label>
51-
{{/if}}
40+
{{#unless hidePageIndicator}}
41+
{{#if isPageTypeDots}}
42+
{{#each dots}}
43+
<div
44+
role="img"
45+
aria-label="{{ariaLabel}}"
46+
?active="{{active}}"
47+
class="ui5-carousel-navigation-dot"
48+
></div>
49+
{{/each}}
50+
{{else}}
51+
<ui5-label>{{selectedIndexToShow}}&nbsp;{{ofText}}&nbsp;{{pagesCount}}</ui5-label>
52+
{{/if}}
53+
{{/unless}}
5254
</div>
5355

5456
{{#if arrows.navigation}}

‎packages/main/src/Carousel.js

+50-11
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,17 @@ const metadata = {
9494
type: Boolean,
9595
},
9696

97+
/**
98+
* If set to true the page indicator is hidden.
99+
* @type {boolean}
100+
* @since 1.0.0-rc.15
101+
* @defaultvalue false
102+
* @public
103+
*/
104+
hidePageIndicator: {
105+
type: Boolean,
106+
},
107+
97108
/**
98109
* Defines the index of the initially selected item.
99110
* @type {Integer}
@@ -277,6 +288,10 @@ class Carousel extends UI5Element {
277288
}
278289

279290
onBeforeRendering() {
291+
if (this.arrowsPlacement === CarouselArrowsPlacement.Navigation) {
292+
this._visibleNavigationArrows = true;
293+
}
294+
280295
this.validateSelectedIndex();
281296
}
282297

@@ -347,17 +362,21 @@ class Carousel extends UI5Element {
347362
}
348363

349364
_onmouseout() {
350-
this._visibleNavigationArrows = false;
365+
if (this.arrowsPlacement === CarouselArrowsPlacement.Content) {
366+
this._visibleNavigationArrows = false;
367+
}
351368
}
352369

353370
_onmouseover() {
354-
this._visibleNavigationArrows = true;
371+
if (this.arrowsPlacement === CarouselArrowsPlacement.Content) {
372+
this._visibleNavigationArrows = true;
373+
}
355374
}
356375

357376
navigateLeft() {
358377
this._resizing = false;
359378

360-
const peviousSelectedIndex = this.selectedIndex;
379+
const previousSelectedIndex = this.selectedIndex;
361380

362381
if (this.selectedIndex - 1 < 0) {
363382
if (this.cyclic) {
@@ -367,15 +386,15 @@ class Carousel extends UI5Element {
367386
--this.selectedIndex;
368387
}
369388

370-
if (peviousSelectedIndex !== this.selectedIndex) {
389+
if (previousSelectedIndex !== this.selectedIndex) {
371390
this.fireEvent("navigate", { selectedIndex: this.selectedIndex });
372391
}
373392
}
374393

375394
navigateRight() {
376395
this._resizing = false;
377396

378-
const peviousSelectedIndex = this.selectedIndex;
397+
const previousSelectedIndex = this.selectedIndex;
379398

380399
if (this.selectedIndex + 1 > this.pagesCount - 1) {
381400
if (this.cyclic) {
@@ -387,7 +406,7 @@ class Carousel extends UI5Element {
387406
++this.selectedIndex;
388407
}
389408

390-
if (peviousSelectedIndex !== this.selectedIndex) {
409+
if (previousSelectedIndex !== this.selectedIndex) {
391410
this.fireEvent("navigate", { selectedIndex: this.selectedIndex });
392411
}
393412

@@ -435,6 +454,25 @@ class Carousel extends UI5Element {
435454
return index >= 0 && index <= this.pagesCount - 1;
436455
}
437456

457+
/**
458+
* @private
459+
*/
460+
get renderNavigation() {
461+
if (!this.hasManyPages) {
462+
return false;
463+
}
464+
465+
if (this.arrowsPlacement === CarouselArrowsPlacement.Navigation && !this.hideNavigationArrows) {
466+
return true;
467+
}
468+
469+
if (this.hidePageIndicator) {
470+
return false;
471+
}
472+
473+
return true;
474+
}
475+
438476
get hasManyPages() {
439477
return this.pagesCount > 1;
440478
}
@@ -450,17 +488,18 @@ class Carousel extends UI5Element {
450488
get classes() {
451489
return {
452490
viewport: {
491+
"ui5-carousel-viewport": true,
453492
"ui5-carousel-viewport--single": this.pagesCount === 1,
454493
},
455494
content: {
456495
"ui5-carousel-content": true,
457-
"ui5-carousel-content-no-animation": this.supressAimation,
458-
"ui5-carousel-content-has-navigation": this.hasManyPages,
459-
"ui5-carousel-content-has-navigation-and-buttons": this.hasManyPages && this.arrowsPlacement === CarouselArrowsPlacement.Navigation,
496+
"ui5-carousel-content-no-animation": this.suppressAnimation,
497+
"ui5-carousel-content-has-navigation": this.renderNavigation,
498+
"ui5-carousel-content-has-navigation-and-buttons": this.renderNavigation && this.arrowsPlacement === CarouselArrowsPlacement.Navigation && !this.hideNavigationArrows,
460499
},
461500
navigation: {
462501
"ui5-carousel-navigation-wrapper": true,
463-
"ui5-carousel-navigation-with-buttons": this.hasManyPages && (this.arrowsPlacement === CarouselArrowsPlacement.Navigation && !this.hideNavigationArrows),
502+
"ui5-carousel-navigation-with-buttons": this.renderNavigation && this.arrowsPlacement === CarouselArrowsPlacement.Navigation && !this.hideNavigationArrows,
464503
},
465504
navPrevButton: {
466505
"ui5-carousel-navigation-button--hidden": !this.hasPrev,
@@ -511,7 +550,7 @@ class Carousel extends UI5Element {
511550
return this.cyclic || this.selectedIndex + 1 <= this.pagesCount - 1;
512551
}
513552

514-
get supressAimation() {
553+
get suppressAnimation() {
515554
return this._resizing || getAnimationMode() === AnimationMode.None;
516555
}
517556

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

+2-6
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,7 @@
5050
}
5151

5252
.ui5-carousel-content.ui5-carousel-content-has-navigation {
53-
height: calc(100% - 2.75rem);
54-
}
55-
56-
.ui5-carousel-content.ui5-carousel-content-has-navigation.ui5-carousel-content-has-navigation-and-buttons {
57-
height: calc(100% - 3.5rem);
53+
height: calc(100% - 1rem);
5854
}
5955

6056
.ui5-carousel-item {
@@ -137,7 +133,7 @@
137133

138134
.ui5-carousel-navigation-dot[active] {
139135
width: .5rem;
140-
height: .5rem;;
136+
height: .5rem;
141137
margin: 0 .25rem;
142138
background-color: var(--sapSelectedColor);
143139
border: var(--ui5_carousel_dot_border);

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

+17-1
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" arrows-placement="Navigation">
315+
<ui5-carousel id="carousel3" selected-index="1" arrows-placement="Navigation">
316316
<ui5-button>Button 1</ui5-button>
317317
<ui5-button>Button 2</ui5-button>
318318
<ui5-button>Button 3</ui5-button>
@@ -413,6 +413,22 @@
413413
</ui5-carousel>
414414
<ui5-input id="loadmore-result" value="0"></ui5-input>
415415

416+
<ui5-title style="margin-top: 2rem;">Carousel with hidden page indicator</ui5-title>
417+
<ui5-label>arrows-placement="Navigation"</ui5-label>
418+
<ui5-carousel id="carouselHiddenPageIndicator" arrows-placement="Navigation" hide-page-indicator>
419+
<ui5-button>Button 1</ui5-button>
420+
<ui5-button>Button 2</ui5-button>
421+
<ui5-button>Button 3</ui5-button>
422+
</ui5-carousel>
423+
424+
<ui5-title style="margin-top: 2rem;">Carousel with hidden page indicator and hidden navigation arrows</ui5-title>
425+
<ui5-label>arrows-placement="Navigation"</ui5-label>
426+
<ui5-carousel id="carouselHiddenPageIndicatorHiddenArrows" arrows-placement="Navigation" hide-page-indicator hide-navigation-arrows>
427+
<ui5-button>Button 1</ui5-button>
428+
<ui5-button>Button 2</ui5-button>
429+
<ui5-button>Button 3</ui5-button>
430+
</ui5-carousel>
431+
416432
</body>
417433

418434
<script>

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

+24-5
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,23 @@ describe("Carousel general interaction", () => {
5151
assert.ok(navigation.isExisting(), "Navigation is rendered");
5252
});
5353

54-
it("Buttons are rendered in the navigation(arrows-placement)", () => {
55-
const carousel = browser.$("#carousel3");
54+
it("Buttons are rendered in the content only when hovering (arrows-placement)", () => {
55+
const carousel = browser.$("#carousel2");
5656
carousel.scrollIntoView();
57+
58+
// show both arrows by navigating to the right and focus the button
59+
const carouselNextButton = carousel.shadow$(".ui5-carousel-navigation-button[arrow-forward]");
60+
carouselNextButton.click();
5761
carousel.moveTo();
58-
const buttons = carousel.shadow$$(".ui5-carousel-navigation-wrapper ui5-button");
62+
63+
const buttons = carousel.shadow$$(".ui5-carousel-navigation-arrows .ui5-carousel-navigation-button:not(.ui5-carousel-navigation-button--hidden)");
64+
assert.strictEqual(buttons.length, 2, "Navigation is rendered");
65+
});
66+
67+
it("Buttons are rendered in the navigation without hovering (arrows-placement)", () => {
68+
const carousel = browser.$("#carousel3");
69+
carousel.scrollIntoView();
70+
const buttons = carousel.shadow$$(".ui5-carousel-navigation-wrapper .ui5-carousel-navigation-button:not(.ui5-carousel-navigation-button--hidden)");
5971

6072
assert.strictEqual(buttons.length, 2, "Navigation is rendered");
6173
});
@@ -149,7 +161,7 @@ describe("Carousel general interaction", () => {
149161
const navigationArrowForward = carousel.shadow$("ui5-button[arrow-forward]");
150162
const navigationArrowsBack = carousel.shadow$("ui5-button[arrow-back]");
151163

152-
// using the navigtion arrows
164+
// using the navigation arrows
153165
navigationArrowForward.click(); // forward
154166
assert.strictEqual(selectedIndex.getProperty("value"), "1", "The selectedIndex is correct.");
155167
assert.strictEqual(eventCounter.getProperty("value"), "1", "The navigate event is fired.");
@@ -181,7 +193,7 @@ describe("Carousel general interaction", () => {
181193
assert.strictEqual(eventCounter.getProperty("value"), "6", "The navigate event is not fired as no previous item.");
182194
});
183195

184-
it("loadMore event is fired only when neccessary", () => {
196+
it("loadMore event is fired only when necessary", () => {
185197
const carousel = browser.$("#carousel9");
186198
const eventCounter = browser.$("#loadmore-result");
187199
carousel.scrollIntoView();
@@ -203,4 +215,11 @@ describe("Carousel general interaction", () => {
203215

204216
assert.strictEqual(eventCounter.getProperty("value"), "3", "loadMore event is fired 3 times");
205217
});
218+
219+
it("hide-page-indicator property", () => {
220+
const carousel = browser.$("#carouselHiddenPageIndicator");
221+
carousel.scrollIntoView();
222+
223+
assert.strictEqual(carousel.shadow$$(".ui5-carousel-navigation > *").length, 0, "carousel has not rendered a page indicator")
224+
})
206225
});

0 commit comments

Comments
 (0)