Merge pull request #113 from VagrantAI-c/feature/keyboard-navigation

feat: allow to configure keyboard navigation with `allowKeyboardNavigation` option
VagrantAI-c · Dec 3, 2021 · 17e1d57 · 17e1d57
2 parents e2b20a7 + 5c0ae66
commit 17e1d57
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -169,6 +169,11 @@ Possible options:
     recalculateDebounce = 300;
     ```
     Specifies time for which carousel would wait after resize event to recalculate its positions. 0 means no debounce is applied.
+-
+    ```typescript
+    allowKeyboardNavigation = true;
+    ```
+    Whether carousel shoul listen to arrow keypresses and navigate to prev and next slide accordingly after left or right arrow key is pressed.
 
 #### Outputs
 `itemIndexChange`

diff --git a/projects/ng-carousel/src/lib/private/models/carousel-config.ts b/projects/ng-carousel/src/lib/private/models/carousel-config.ts
@@ -86,6 +86,11 @@ export class CompleteCarouselConfig<T = any> {
      * Default: 5
      */
     threshold = 5;
+    /**
+     * Whether carousel is listening to arrow keypresses and navigates to prev and
+     * next slide accordingly after left or right arrow key is pressed
+     */
+    allowKeyboardNavigation = true;
 
     constructor(config?: CarouselConfig<T> | null) {
         this.items = config?.items ?? [];
@@ -99,6 +104,7 @@ export class CompleteCarouselConfig<T = any> {
         this.transitionDuration = extractCoerced(config?.transitionDuration, 600);
         this.shouldRecalculateOnResize = extractCoerced(config?.shouldRecalculateOnResize, true);
         this.recalculateDebounce = extractCoerced(config?.recalculateDebounce, 300);
+        this.allowKeyboardNavigation = extractCoerced(config?.allowKeyboardNavigation, true);
     }
 }
 

diff --git a/projects/ng-carousel/src/lib/private/views/carousel-engine.component.ts b/projects/ng-carousel/src/lib/private/views/carousel-engine.component.ts
@@ -216,18 +216,31 @@ export class CarouselEngineComponent<T> implements OnInit, OnDestroy {
 
             return;
         }
-        this.keyboardListener = this.renderer.listen(
-            this.htmlElement,
-            'keydown',
-            (event: KeyboardEvent) => {
-                const key = event.key.toLowerCase();
-                if (['arrowright', 'right'].includes(key)) {
-                    this.carousel.next();
-                } else if (['arrowleft', 'left'].includes(key)) {
-                    this.carousel.prev();
+        this.carousel.carouselStateChanges()
+            .pipe(
+                map((state: CarouselState<T>) => state.config.allowKeyboardNavigation),
+                distinctUntilChanged(),
+                takeUntil(this.destroyed$),
+            )
+            .subscribe((canListen: boolean) => {
+                this.keyboardListener?.();
+                if (!canListen) {
+
+                    return;
                 }
-            }
-        );
+                this.keyboardListener = this.renderer.listen(
+                    this.htmlElement,
+                    'keydown',
+                    (event: KeyboardEvent) => {
+                        const key = event.key.toLowerCase();
+                        if (['arrowright', 'right'].includes(key)) {
+                            this.carousel.next();
+                        } else if (['arrowleft', 'left'].includes(key)) {
+                            this.carousel.prev();
+                        }
+                    }
+                );
+            });
     }
 
     /**

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -182,6 +182,9 @@ <h2>
                 <mat-checkbox formControlName="shouldRecalculateOnResize">
                     Autoresize
                 </mat-checkbox>
+                <mat-checkbox formControlName="allowKeyboardNavigation">
+                    Keyboard navigation
+                </mat-checkbox>
             </div>
         </form>
     </mat-card>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -27,6 +27,7 @@ export class AppComponent implements OnInit, OnDestroy {
         dragEnabled: true,
         shouldRecalculateOnResize: true,
         recalculateDebounce: 300,
+        allowKeyboardNavigation: true,
     };
     readonly configForm = new FormGroup({
         widthMode: new FormControl(this.config.widthMode),
@@ -39,6 +40,7 @@ export class AppComponent implements OnInit, OnDestroy {
         dragEnabled: new FormControl(this.config.dragEnabled),
         shouldRecalculateOnResize: new FormControl(this.config.shouldRecalculateOnResize),
         recalculateDebounce: new FormControl(this.config.recalculateDebounce),
+        allowKeyboardNavigation: new FormControl(this.config.allowKeyboardNavigation),
     });
     readonly slideWidth$ = this.slideWidthChanges();
     readonly widthMode$ = this.widthModeChanges();