refactor(carousel): add ListenersService and missing pause prop, add IntersectionService

Author: xidedix

projects/coreui-angular/src/lib/carousel/carousel/carousel.component.ts

@@ -1,9 +1,9 @@
 import {
   AfterContentInit,
   Component,
+  ElementRef,
   EventEmitter,
   HostBinding,
-  HostListener,
   Inject,
   Input,
   OnDestroy,
@@ -12,15 +12,19 @@ import {
 } from '@angular/core';
 import { Subscription } from 'rxjs';
 
+import { IntersectionService } from '../intersection.service';
+import { IListenersConfig, ListenersService } from '../../services/listeners.service';
+
 import { CarouselState } from '../carousel-state';
 import { CarouselService } from '../carousel.service';
 import { CarouselConfig } from '../carousel.config';
+import { Triggers } from '../../coreui.types';
 
 @Component({
   selector: 'c-carousel',
-  template: `<ng-content></ng-content>`,
+  template: '<ng-content></ng-content>',
   styleUrls: ['./carousel.component.scss'],
-  providers: [CarouselService, CarouselState, CarouselConfig]
+  providers: [CarouselService, CarouselState, CarouselConfig, IntersectionService, ListenersService]
 })
 export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
   /**
@@ -46,8 +50,14 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
   /**
    * The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
    * @type number
+   * @default 0
    */
   @Input() interval = 0;
+  /**
+   * Sets which event handlers you’d like provided to your pause prop. You can specify one trigger or an array of them.
+   * @type {'hover' | 'focus' | 'click'}
+   */
+  @Input() pause: Triggers | Triggers[] | false = 'hover';
   /**
    * Set type of the transition.
    * @type {'slide' | 'crossfade'}
@@ -72,24 +82,16 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
 
   private carouselIndexSubscription?: Subscription;
   private timerId!: any;
-
-  @HostListener('mouseenter', ['$event'])
-  @HostListener('mousedown', ['$event'])
-  public onMouseenter($event: MouseEvent): void {
-    this.resetTimer();
-  }
-
-  @HostListener('mouseleave', ['$event'])
-  @HostListener('mouseup', ['$event'])
-  public onMouseleave($event: MouseEvent): void {
-    this.setTimer();
-  }
+  private intersectingSubscription?: Subscription;
   private activeItemInterval = 0;
 
   constructor(
     @Inject(CarouselConfig) private config: CarouselConfig,
+    private hostElement: ElementRef,
     private carouselService: CarouselService,
-    private carouselState: CarouselState
+    private carouselState: CarouselState,
+    private intersectionService: IntersectionService,
+    private listenersService: ListenersService
   ) {
     Object.assign(this, config);
   }
@@ -99,11 +101,34 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
   }
 
   ngOnDestroy(): void {
+    this.clearListeners();
     this.carouselStateSubscribe(false);
+    this.intersectionServiceSubscribe(false);
   }
 
   ngAfterContentInit(): void {
+    this.intersectionService.createIntersectionObserver(this.hostElement);
+    this.intersectionServiceSubscribe();
     this.carouselState.state = { activeItemIndex: this.activeIndex, animate: this.animate };
+    this.setListeners();
+  }
+
+  private setListeners(): void {
+    const config: IListenersConfig = {
+      hostElement: this.hostElement,
+      trigger: this.pause || [],
+      callbackOff: () => {
+        this.setTimer();
+      },
+      callbackOn: () => {
+        this.resetTimer();
+      }
+    };
+    this.listenersService.setListeners(config);
+  }
+
+  private clearListeners(): void {
+    this.listenersService.clearListeners();
   }
 
   set visible(value) {
@@ -142,4 +167,15 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
       this.carouselIndexSubscription?.unsubscribe();
     }
   }
+
+  private intersectionServiceSubscribe(subscribe: boolean = true): void {
+    if (subscribe) {
+      this.intersectingSubscription = this.intersectionService.intersecting$.subscribe(isIntersecting => {
+        this.visible = isIntersecting;
+        isIntersecting ? this.setTimer() : this.resetTimer();
+      });
+    } else {
+      this.intersectingSubscription?.unsubscribe();
+    }
+  }
 }

projects/coreui-angular/src/lib/services/listeners.service.spec.ts

@@ -1,7 +1,6 @@
-import { Component, DebugElement, Renderer2, Type } from '@angular/core';
+import { Renderer2 } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 
-
 import { ListenersService } from './listeners.service';
 
 describe('ListenersService', () => {