From 80182369424e92ecc5c4b5b4c4cb4bd0346bfb77 Mon Sep 17 00:00:00 2001 From: Daniel Idem <36500470+dinirichard@users.noreply.github.com> Date: Wed, 4 Sep 2024 19:19:59 +0100 Subject: [PATCH] Bugfix/fix carousel component (#3709) * Fix carousel component * Update changelog --- CHANGELOG.md | 1 + .../src/app/pages/landing/landing-page.html | 2 +- .../lib/carousel/carousel-item.directive.ts | 12 +--- .../src/lib/carousel/carousel.component.html | 7 +- .../ui/src/lib/carousel/carousel.component.ts | 64 +++---------------- 5 files changed, 13 insertions(+), 73 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5427d6a3..d598db05 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fixed an issue in the view mode toggle of the holdings tab on the home page (experimental) - Fixed an issue on the portfolio activities page by loading the data only once +- Fixed an issue in the carousel component for the testimonial section on the landing page ## 2.105.0 - 2024-08-21 diff --git a/apps/client/src/app/pages/landing/landing-page.html b/apps/client/src/app/pages/landing/landing-page.html index 72de38c2..f726a602 100644 --- a/apps/client/src/app/pages/landing/landing-page.html +++ b/apps/client/src/app/pages/landing/landing-page.html @@ -331,7 +331,7 @@
@for (testimonial of testimonials; track testimonial) { -
+
) {} - - public focus() { - this.element.nativeElement.focus({ preventScroll: true }); - } } diff --git a/libs/ui/src/lib/carousel/carousel.component.html b/libs/ui/src/lib/carousel/carousel.component.html index 27d94dfd..9cf34fe0 100644 --- a/libs/ui/src/lib/carousel/carousel.component.html +++ b/libs/ui/src/lib/carousel/carousel.component.html @@ -11,12 +11,7 @@ } -
+
diff --git a/libs/ui/src/lib/carousel/carousel.component.ts b/libs/ui/src/lib/carousel/carousel.component.ts index 7f93297d..8b766aa6 100644 --- a/libs/ui/src/lib/carousel/carousel.component.ts +++ b/libs/ui/src/lib/carousel/carousel.component.ts @@ -1,24 +1,18 @@ -import { FocusKeyManager } from '@angular/cdk/a11y'; -import { LEFT_ARROW, RIGHT_ARROW, TAB } from '@angular/cdk/keycodes'; import { - AfterContentInit, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, - ContentChildren, + contentChildren, ElementRef, HostBinding, Inject, Input, Optional, - QueryList, ViewChild } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations'; -import { CarouselItem } from './carousel-item.directive'; - @Component({ changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule], @@ -28,9 +22,7 @@ import { CarouselItem } from './carousel-item.directive'; styleUrls: ['./carousel.component.scss'], templateUrl: './carousel.component.html' }) -export class GfCarouselComponent implements AfterContentInit { - @ContentChildren(CarouselItem) public items!: QueryList; - +export class GfCarouselComponent { @HostBinding('class.animations-disabled') public readonly animationsDisabled: boolean; @@ -38,11 +30,11 @@ export class GfCarouselComponent implements AfterContentInit { @ViewChild('list') public list!: ElementRef; + public items = contentChildren('carouselItem', { read: ElementRef }); public showPrevArrow = false; public showNextArrow = true; private index = 0; - private keyManager!: FocusKeyManager; private position = 0; public constructor( @@ -51,12 +43,8 @@ export class GfCarouselComponent implements AfterContentInit { this.animationsDisabled = animationsModule === 'NoopAnimations'; } - public ngAfterContentInit() { - this.keyManager = new FocusKeyManager(this.items); - } - public next() { - for (let i = this.index; i < this.items.length; i++) { + for (let i = this.index; i < this.items().length; i++) { if (this.isOutOfView(i)) { this.index = i; this.scrollToActiveItem(); @@ -65,31 +53,6 @@ export class GfCarouselComponent implements AfterContentInit { } } - public onKeydown({ keyCode }: KeyboardEvent) { - const manager = this.keyManager; - const previousActiveIndex = manager.activeItemIndex; - - if (keyCode === LEFT_ARROW) { - manager.setPreviousItemActive(); - } else if (keyCode === RIGHT_ARROW) { - manager.setNextItemActive(); - } else if (keyCode === TAB && !manager.activeItem) { - manager.setFirstItemActive(); - } - - if ( - manager.activeItemIndex != null && - manager.activeItemIndex !== previousActiveIndex - ) { - this.index = manager.activeItemIndex; - this.updateItemTabIndices(); - - if (this.isOutOfView(this.index)) { - this.scrollToActiveItem(); - } - } - } - public previous() { for (let i = this.index; i > -1; i--) { if (this.isOutOfView(i)) { @@ -101,8 +64,7 @@ export class GfCarouselComponent implements AfterContentInit { } private isOutOfView(index: number, side?: 'start' | 'end') { - const { offsetWidth, offsetLeft } = - this.items.toArray()[index].element.nativeElement; + const { offsetWidth, offsetLeft } = this.items()[index].nativeElement; if ((!side || side === 'start') && offsetLeft - this.position < 0) { return true; @@ -120,33 +82,23 @@ export class GfCarouselComponent implements AfterContentInit { return; } - const itemsArray = this.items.toArray(); let targetItemIndex = this.index; if (this.index > 0 && !this.isOutOfView(this.index - 1)) { targetItemIndex = - itemsArray.findIndex((_, i) => !this.isOutOfView(i)) + 1; + this.items().findIndex((_, i) => !this.isOutOfView(i)) + 1; } - this.position = - itemsArray[targetItemIndex].element.nativeElement.offsetLeft; + this.position = this.items()[targetItemIndex].nativeElement.offsetLeft; this.list.nativeElement.style.transform = `translateX(-${this.position}px)`; this.showPrevArrow = this.index > 0; this.showNextArrow = false; - for (let i = itemsArray.length - 1; i > -1; i--) { + for (let i = this.items().length - 1; i > -1; i--) { if (this.isOutOfView(i, 'end')) { this.showNextArrow = true; break; } } } - - private updateItemTabIndices() { - this.items.forEach((item: CarouselItem) => { - if (this.keyManager != null) { - item.tabindex = item === this.keyManager.activeItem ? '0' : '-1'; - } - }); - } }