From 306def1d7ca720035e00a36d0c7918e7b49f051e Mon Sep 17 00:00:00 2001 From: Daniel Idem Date: Wed, 4 Sep 2024 03:37:09 +0100 Subject: [PATCH] Simplified carousel removed keyboard support --- .../lib/carousel/carousel-item.directive.ts | 10 +-- .../src/lib/carousel/carousel.component.html | 7 +-- .../ui/src/lib/carousel/carousel.component.ts | 61 +++---------------- 3 files changed, 9 insertions(+), 69 deletions(-) diff --git a/libs/ui/src/lib/carousel/carousel-item.directive.ts b/libs/ui/src/lib/carousel/carousel-item.directive.ts index e73810952..eabafeeb9 100644 --- a/libs/ui/src/lib/carousel/carousel-item.directive.ts +++ b/libs/ui/src/lib/carousel/carousel-item.directive.ts @@ -1,16 +1,8 @@ -import { FocusableOption } from '@angular/cdk/a11y'; import { Directive, ElementRef, HostBinding } from '@angular/core'; @Directive({ selector: '[gf-carousel-item]' }) -export class CarouselItem implements FocusableOption { - @HostBinding('attr.role') readonly role = 'listitem'; - @HostBinding('tabindex') tabindex = '-1'; - +export class CarouselItem { public constructor(readonly element: ElementRef) {} - - 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 27d94dfd5..9cf34fe02 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 ac722c47c..525bb1a92 100644 --- a/libs/ui/src/lib/carousel/carousel.component.ts +++ b/libs/ui/src/lib/carousel/carousel.component.ts @@ -1,25 +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], @@ -29,9 +22,8 @@ import { CarouselItem } from './carousel-item.directive'; styleUrls: ['./carousel.component.scss'], templateUrl: './carousel.component.html' }) -export class GfCarouselComponent implements AfterContentInit { - @ContentChildren(CarouselItem) public items!: QueryList; - itemsSignal = contentChildren('carouselItem', { read: ElementRef }); +export class GfCarouselComponent { + public items = contentChildren('carouselItem', { read: ElementRef }); @HostBinding('class.animations-disabled') public readonly animationsDisabled: boolean; @@ -44,7 +36,6 @@ export class GfCarouselComponent implements AfterContentInit { public showNextArrow = true; private index = 0; - private keyManager!: FocusKeyManager; private position = 0; public constructor( @@ -53,12 +44,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.itemsSignal().length; i++) { + for (let i = this.index; i < this.items().length; i++) { if (this.isOutOfView(i)) { this.index = i; this.scrollToActiveItem(); @@ -67,31 +54,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)) { @@ -103,7 +65,7 @@ export class GfCarouselComponent implements AfterContentInit { } private isOutOfView(index: number, side?: 'start' | 'end') { - const { offsetWidth, offsetLeft } = this.itemsSignal()[index].nativeElement; + const { offsetWidth, offsetLeft } = this.items()[index].nativeElement; if ((!side || side === 'start') && offsetLeft - this.position < 0) { return true; @@ -121,32 +83,23 @@ export class GfCarouselComponent implements AfterContentInit { return; } - const itemsArray = this.itemsSignal(); 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].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'; - } - }); - } }