feat: remove HammerJs dependency preferring a custom directive to man…

…age swipe events #218 Signed-off-by: Stefano Cappa <stefano.cappa.ks89@gmail.com>
Ks89 · Jul 8, 2023 · 7cca1c2 · 7cca1c2
1 parent c5199a9
commit 7cca1c2
Show file tree

Hide file tree

Showing 34 changed files with 137 additions and 90 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# 11.0.0
+
+### Features
+
+- remove `hammerjs` dependency (because deprecated) to mange swipe events preferring a custom directive
+
+
 # 10.0.1
 
 ### Bugfixes

diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2017-2022 Stefano Cappa (Ks89)
+Copyright (c) 2017-2023 Stefano Cappa (Ks89)
 Copyright (c) 2016 vimalavinisha
 
 Permission is hereby granted, free of charge, to any person obtaining a copy

diff --git a/README.md b/README.md
@@ -170,17 +170,20 @@ You can use all default features without font-awesome. For more info, check offi
 | Angular 13 |         &gt;= 9.0.0         | optional     |
 | Angular 14 |         &gt;= 9.0.0         | optional     |
 | Angular 15 |        &gt;= 10.0.0         | optional     |
+| Angular 16 |        &gt;= 11.0.0         | optional     |
 
 *Version 8.0.0 requires at least Angular 12.*
 *Version 9.0.0 requires at least Angular 13.*
 *Version 10.0.0 requires at least Angular 15.*
+*Version 11.0.0 requires at least Angular 16.*
 
 <br>
 
 ## :fire: News :fire:
 
 **More than 100 releases in two years**, and more to come... :)
 
+- ??/??/2023 - 11.0.0 - @ks89/angular-modal-gallery - [HERE](https://github.com/Ks89/angular-modal-gallery/releases)
 - 11/18/2022 - 10.0.1 - @ks89/angular-modal-gallery - [HERE](https://github.com/Ks89/angular-modal-gallery/releases)
 - 11/17/2022 - 10.0.0 - @ks89/angular-modal-gallery - [HERE](https://github.com/Ks89/angular-modal-gallery/releases)
 - 08/03/2022 - 10.0.0-rc.1 - @ks89/angular-modal-gallery - [HERE](https://github.com/Ks89/angular-modal-gallery/releases)
@@ -262,7 +265,7 @@ In this way, [prettier](https://prettier.io/) will run using my configuration, a
 
 The MIT License (MIT)
 
-Copyright (c) 2017-2022 Stefano Cappa (Ks89)
+Copyright (c) 2017-2023 Stefano Cappa (Ks89)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/examples/angular-cli-15/angular.json b/examples/angular-cli-15/angular.json
@@ -34,8 +34,7 @@
             ],
             "scripts": [],
             "allowedCommonJsDependencies": [
-              "mousetrap",
-              "hammerjs"
+              "mousetrap"
             ]
           },
           "configurations": {

diff --git a/examples/angular-cli-15/package-lock.json b/examples/angular-cli-15/package-lock.json
diff --git a/examples/angular-cli-15/package.json b/examples/angular-cli-15/package.json
@@ -23,7 +23,6 @@
     "@angular/router": "^15.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.1.2",
     "@fortawesome/free-solid-svg-icons": "^6.1.2",
-    "hammerjs": "^2.0.8",
     "mousetrap": "^1.6.5",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
@@ -33,7 +32,6 @@
     "@angular-devkit/build-angular": "^15.0.0",
     "@angular/cli": "~15.0.0",
     "@angular/compiler-cli": "^15.0.0",
-    "@types/hammerjs": "^2.0.41",
     "@types/jasmine": "~4.3.0",
     "@types/mousetrap": "^1.6.9",
     "@types/node": "^18.11.9",

diff --git a/examples/angular-cli-15/src/app/app.module.ts b/examples/angular-cli-15/src/app/app.module.ts
@@ -36,7 +36,6 @@ import { HomeComponent } from './home/home.component';
 import { IntroHeaderComponent } from './intro-header/intro-header.component';
 
 // ********************** angular-modal-gallery *****************************
-import 'hammerjs'; // Mandatory for angular-modal-gallery 3.x.x or greater (`npm i --save hammerjs`)
 import 'mousetrap'; // Mandatory for angular-modal-gallery 3.x.x or greater (`npm i --save mousetrap`)
 import { GalleryModule } from '@ks89/angular-modal-gallery'; // <----------------- angular-modal-gallery library import
 // **************************************************************************

diff --git a/examples/angular-cli-material/angular.json b/examples/angular-cli-material/angular.json
@@ -35,8 +35,7 @@
             ],
             "scripts": [],
             "allowedCommonJsDependencies": [
-              "mousetrap",
-              "hammerjs"
+              "mousetrap"
             ]
           },
           "configurations": {

diff --git a/examples/angular-cli-material/package.json b/examples/angular-cli-material/package.json
@@ -24,7 +24,6 @@
     "@angular/router": "^15.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.1.2",
     "@fortawesome/free-solid-svg-icons": "^6.1.2",
-    "hammerjs": "^2.0.8",
     "mousetrap": "^1.6.5",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
@@ -34,7 +33,6 @@
     "@angular-devkit/build-angular": "^15.0.0",
     "@angular/cli": "~15.0.0",
     "@angular/compiler-cli": "^15.0.0",
-    "@types/hammerjs": "^2.0.41",
     "@types/jasmine": "~4.3.0",
     "@types/mousetrap": "^1.6.9",
     "@types/node": "^18.11.9",

diff --git a/examples/angular-cli-material/src/app/app.module.ts b/examples/angular-cli-material/src/app/app.module.ts
@@ -37,7 +37,6 @@ import { HomeComponent } from './home/home.component';
 import { IntroHeaderComponent } from './intro-header/intro-header.component';
 
 // ********************** angular-modal-gallery *****************************
-import 'hammerjs'; // Mandatory for angular-modal-gallery 3.x.x or greater (`npm i --save hammerjs`)
 import 'mousetrap'; // Mandatory for angular-modal-gallery 3.x.x or greater (`npm i --save mousetrap`)
 import { GalleryModule } from '@ks89/angular-modal-gallery'; // <----------------- angular-modal-gallery library import
 // **************************************************************************

diff --git a/examples/universal/angular.json b/examples/universal/angular.json
@@ -33,8 +33,7 @@
               "src/styles.scss"
             ],
             "allowedCommonJsDependencies": [
-              "mousetrap",
-              "hammerjs"
+              "mousetrap"
             ]
           },
           "configurations": {

diff --git a/examples/universal/package.json b/examples/universal/package.json
@@ -32,7 +32,6 @@
     "@nguniversal/express-engine": "^15.0.0",
     "domino": "^2.1.5",
     "express": "^4.15.2",
-    "hammerjs": "^2.0.8",
     "mousetrap": "^1.6.5",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
@@ -44,7 +43,6 @@
     "@angular/compiler-cli": "^15.0.0",
     "@nguniversal/builders": "^15.0.0",
     "@types/express": "^4.17.13",
-    "@types/hammerjs": "^2.0.41",
     "@types/jasmine": "~4.3.0",
     "@types/mousetrap": "^1.6.9",
     "@types/node": "^18.11.9",

diff --git a/examples/universal/src/main.ts b/examples/universal/src/main.ts
@@ -3,7 +3,6 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
 
 // ************************ dependencies ************************
-import 'hammerjs'; // Mandatory for angular-modal-gallery 3.x.x or greater (`npm i --save hammerjs`)
 import 'mousetrap'; // Mandatory for angular-modal-gallery 3.x.x or greater (`npm i --save mousetrap`)
 // **************************************************************
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-modal-gallery",
-  "version": "10.0.1",
+  "version": "11.0.0",
   "description": "Image gallery for Angular",
   "license": "MIT",
   "author": "Stefano Cappa",

diff --git a/projects/ks89/angular-modal-gallery/package.json b/projects/ks89/angular-modal-gallery/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ks89/angular-modal-gallery",
-  "version": "10.0.1",
+  "version": "11.0.0",
   "description": "Image gallery for Angular",
   "license": "MIT",
   "author": "Stefano Cappa",
@@ -17,7 +17,6 @@
     "@angular/common": ">=15.0.0",
     "@angular/core": ">=15.0.0",
     "@angular/cdk": ">=15.0.0",
-    "hammerjs": ">=2.0.8",
     "mousetrap": ">=1.6.5",
     "rxjs": ">=7.5.0"
   },

diff --git a/projects/ks89/angular-modal-gallery/src/lib/components/accessible.component.spec.ts b/projects/ks89/angular-modal-gallery/src/lib/components/accessible.component.spec.ts
@@ -16,7 +16,6 @@
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import 'hammerjs';
 import 'mousetrap';
 import { AccessibleComponent } from './accessible.component';
 import {

diff --git a/...gallery/src/lib/components/carousel/carousel-previews/carousel-previews.component.spec.ts b/...gallery/src/lib/components/carousel/carousel-previews/carousel-previews.component.spec.ts
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import 'hammerjs';
 import 'mousetrap';
 
 import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';

diff --git a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.component.spec.ts b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.component.spec.ts
@@ -19,7 +19,6 @@ import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, TestBed, tick
 import { DebugElement, SimpleChanges } from '@angular/core';
 import { By } from '@angular/platform-browser';
 
-import 'hammerjs';
 import 'mousetrap';
 
 import { CarouselComponent } from './carousel.component';

diff --git a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.component.ts b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.component.ts
@@ -178,16 +178,6 @@ export class CarouselComponent extends AccessibleComponent implements OnInit, Af
    */
   private stop$ = new Subject<void>();
 
-  /**
-   * Private object without type to define all swipe actions used by hammerjs.
-   */
-  private SWIPE_ACTION = {
-    LEFT: 'swipeleft',
-    RIGHT: 'swiperight',
-    UP: 'swipeup',
-    DOWN: 'swipedown'
-  };
-
   /**
    * Listener to stop the gallery when the mouse pointer is over the current image.
    */
@@ -462,10 +452,10 @@ export class CarouselComponent extends AccessibleComponent implements OnInit, Af
   }
 
   /**
-   * Method used by Hammerjs to support touch gestures (you can also invert the swipe direction with configCurrentImage.invertSwipe).
+   * Method used by SwipeDirective to support touch gestures (you can also invert the swipe direction with configCurrentImage.invertSwipe).
    * @param action String that represent the direction of the swipe action. 'swiperight' by default.
    */
-  swipe(action = this.SWIPE_ACTION.RIGHT): void {
+  swipe(action = 'swiperight'): void {
     if (this.id === null || this.id === undefined) {
       throw new Error('Internal library error - id must be defined');
     }
@@ -475,14 +465,14 @@ export class CarouselComponent extends AccessibleComponent implements OnInit, Af
     }
     const configCurrentImageCarousel: CarouselImageConfig = libConfig.carouselImageConfig;
     switch (action) {
-      case this.SWIPE_ACTION.RIGHT:
+      case 'swiperight':
         if (configCurrentImageCarousel.invertSwipe) {
           this.prevImage(Action.SWIPE);
         } else {
           this.nextImage(Action.SWIPE);
         }
         break;
-      case this.SWIPE_ACTION.LEFT:
+      case 'swipeleft':
         if (configCurrentImageCarousel.invertSwipe) {
           this.nextImage(Action.SWIPE);
         } else {

diff --git a/...89/angular-modal-gallery/src/lib/components/current-image/current-image.component.spec.ts b/...89/angular-modal-gallery/src/lib/components/current-image/current-image.component.spec.ts
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import 'hammerjs';
 import 'mousetrap';
 
 import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';

diff --git a/...ts/ks89/angular-modal-gallery/src/lib/components/current-image/current-image.component.ts b/...ts/ks89/angular-modal-gallery/src/lib/components/current-image/current-image.component.ts
@@ -46,7 +46,6 @@ import { Subject, timer } from 'rxjs';
 import { filter, map, switchMap, takeUntil } from 'rxjs/operators';
 
 import { AccessibleComponent } from '../accessible.component';
-
 import { AccessibilityConfig } from '../../model/accessibility.interface';
 import { Action } from '../../model/action.enum';
 import { DescriptionStrategy } from '../../model/description.interface';
@@ -55,7 +54,6 @@ import { InternalLibImage } from '../../model/image-internal.class';
 import { Keyboard } from '../../model/keyboard.enum';
 import { KeyboardConfig } from '../../model/keyboard-config.interface';
 import { SlideConfig } from '../../model/slide-config.interface';
-
 import { NEXT, PREV } from '../../utils/user-input.util';
 import { getIndex } from '../../utils/image.util';
 import { CurrentImageConfig } from '../../model/current-image-config.interface';
@@ -184,16 +182,6 @@ export class CurrentImageComponent extends AccessibleComponent implements OnInit
    */
   loading = true;
 
-  /**
-   * Private object without type to define all swipe actions used by hammerjs.
-   */
-  private SWIPE_ACTION = {
-    LEFT: 'swipeleft',
-    RIGHT: 'swiperight',
-    UP: 'swipeup',
-    DOWN: 'swipedown'
-  };
-
   // use public ChangeDetectorRef to be able to call it from spec files to trigger change detection
   // tslint:disable-next-line:no-any
   constructor(@Inject(PLATFORM_ID) private platformId: any, private ngZone: NgZone,
@@ -513,22 +501,22 @@ export class CurrentImageComponent extends AccessibleComponent implements OnInit
   }
 
   /**
-   * Method used by Hammerjs to support touch gestures (you can also invert the swipe direction with configCurrentImage.invertSwipe).
+   * Method used by SwipeDirective to support touch gestures (you can also invert the swipe direction with configCurrentImage.invertSwipe).
    * @param action String that represent the direction of the swipe action. 'swiperight' by default.
    */
-  swipe(action = this.SWIPE_ACTION.RIGHT): void {
+  swipe(action = 'swiperight'): void {
     if (!this.currentImageConfig) {
       throw new Error('Internal library error - currentImageConfig must be defined');
     }
     switch (action) {
-      case this.SWIPE_ACTION.RIGHT:
+      case 'swiperight':
         if (this.currentImageConfig.invertSwipe) {
           this.prevImage(Action.SWIPE);
         } else {
           this.nextImage(Action.SWIPE);
         }
         break;
-      case this.SWIPE_ACTION.LEFT:
+      case 'swipeleft':
         if (this.currentImageConfig.invertSwipe) {
           this.nextImage(Action.SWIPE);
         } else {

diff --git a/projects/ks89/angular-modal-gallery/src/lib/components/current-image/current-image.html b/projects/ks89/angular-modal-gallery/src/lib/components/current-image/current-image.html
@@ -47,8 +47,9 @@
          [tabIndex]="0" role="img"
          (load)="onImageLoad($event)"
          (click)="onImageEvent($event, clickAction)" (keyup)="onImageEvent($event, keyboardAction)"
-         (swipeleft)="swipe($event.type)"
-         (swiperight)="swipe($event.type)"/>
+         ksSwipe
+         (swipeLeft)="swipe('swipeleft')"
+         (swipeRight)="swipe('swiperight')"/>
     <figcaption *ngIf="getDescriptionToDisplay() !== ''"
                 class="inside description"
                 ksDescription [description]="currentImageConfig?.description"

diff --git a/...allery/src/lib/components/current-image/loading-spinner/loading-spinner.component.spec.ts b/...allery/src/lib/components/current-image/loading-spinner/loading-spinner.component.spec.ts
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import 'hammerjs';
 import 'mousetrap';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';

diff --git a/projects/ks89/angular-modal-gallery/src/lib/components/dots/dots.component.spec.ts b/projects/ks89/angular-modal-gallery/src/lib/components/dots/dots.component.spec.ts
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import 'hammerjs';
 import 'mousetrap';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';

diff --git a/...89/angular-modal-gallery/src/lib/components/modal-gallery/modal-gallery.component.spec.ts b/...89/angular-modal-gallery/src/lib/components/modal-gallery/modal-gallery.component.spec.ts
@@ -22,7 +22,6 @@
  SOFTWARE.
  */
 
-import 'hammerjs';
 import 'mousetrap';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';

diff --git a/...89/angular-modal-gallery/src/lib/components/plain-gallery/plain-gallery.component.spec.ts b/...89/angular-modal-gallery/src/lib/components/plain-gallery/plain-gallery.component.spec.ts
@@ -20,7 +20,6 @@
 // --------------------------------------------------
 // --------------------------------------------------
 
-import 'hammerjs';
 import 'mousetrap';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';

diff --git a/projects/ks89/angular-modal-gallery/src/lib/components/previews/previews.component.spec.ts b/projects/ks89/angular-modal-gallery/src/lib/components/previews/previews.component.spec.ts
@@ -17,7 +17,6 @@
 import { Component, DebugElement, SimpleChanges, TemplateRef, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import 'hammerjs';
 import 'mousetrap';
 import { KS_DEFAULT_ACCESSIBILITY_CONFIG } from '../../components/accessibility-default';
 import { FallbackImageDirective } from '../../directives/fallback-image.directive';

diff --git a/...89/angular-modal-gallery/src/lib/components/upper-buttons/upper-buttons.component.spec.ts b/...89/angular-modal-gallery/src/lib/components/upper-buttons/upper-buttons.component.spec.ts
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import 'hammerjs';
 import 'mousetrap';
 
 import { DebugElement } from '@angular/core';

diff --git a/projects/ks89/angular-modal-gallery/src/lib/directives/click-outside.directive.ts b/projects/ks89/angular-modal-gallery/src/lib/directives/click-outside.directive.ts
@@ -46,7 +46,7 @@ export class ClickOutsideDirective {
 
   /**
    * Method called by Angular itself every click thanks to `@HostListener`.
-   * @param MouseEvent event payload received evey click
+   * @param MouseEvent event payload received on click
    */
   @HostListener('click', ['$event'])
   onClick(event: MouseEvent): void {