From 9ff0faefdf23a6d09bdaade5a0643545fdac497e Mon Sep 17 00:00:00 2001
From: Daniel Macak <damacak@cisco.com>
Date: Sun, 3 Sep 2023 19:50:27 +0200
Subject: [PATCH] feat: support navigation by multiple items WIP

This commit goes in the direction of more generic slider rather than
just a gallery. The purpose of this commit is to make making something
like a product carousel, where multiple elements are visible, possible.
---
 apps/demo/src/app/app.component.html                        | 1 +
 .../src/lib/components/gallery/gallery.component.html       | 1 +
 .../gallery/src/lib/components/gallery/gallery.component.ts | 1 +
 .../gallery/src/lib/components/viewer/viewer.component.html | 6 +++---
 libs/gallery/src/lib/components/viewer/viewer.component.ts  | 5 +++++
 5 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/demo/src/app/app.component.html b/apps/demo/src/app/app.component.html
index e043e638..c508b237 100644
--- a/apps/demo/src/app/app.component.html
+++ b/apps/demo/src/app/app.component.html
@@ -71,6 +71,7 @@ <h2 id="demos">Demos</h2>
         [loop]="true"
         loading="lazy"
         [visibleItems]="mobile ? 1.5 : 3"
+        [moveByItems]="mobile ? 1.5 : 3"
       ></gallery>
     </app-showcase>
 
diff --git a/libs/gallery/src/lib/components/gallery/gallery.component.html b/libs/gallery/src/lib/components/gallery/gallery.component.html
index c542e9bf..f34e04a8 100644
--- a/libs/gallery/src/lib/components/gallery/gallery.component.html
+++ b/libs/gallery/src/lib/components/gallery/gallery.component.html
@@ -31,6 +31,7 @@
   [counter]="counter"
   [counterOrientation]="counterOrientation"
   [visibleItems]="visibleItems"
+  [moveByItems]="moveByItems"
   [objectFit]="objectFit"
   [loading]="loading"
   [itemTemplate]="itemTemplate"
diff --git a/libs/gallery/src/lib/components/gallery/gallery.component.ts b/libs/gallery/src/lib/components/gallery/gallery.component.ts
index d6e4644a..c69ba4f8 100644
--- a/libs/gallery/src/lib/components/gallery/gallery.component.ts
+++ b/libs/gallery/src/lib/components/gallery/gallery.component.ts
@@ -48,6 +48,7 @@ export class GalleryComponent {
   @Input() counter = true;
   @Input() counterOrientation: VerticalOrientation = 'bottom';
   @Input() visibleItems = 1;
+  @Input() moveByItems = 1;
   @Input() loading: Loading = 'lazy';
   @Input() loop = false;
   @Input() objectFit: ObjectFit = 'cover';
diff --git a/libs/gallery/src/lib/components/viewer/viewer.component.html b/libs/gallery/src/lib/components/viewer/viewer.component.html
index f045a52e..b2d778f9 100644
--- a/libs/gallery/src/lib/components/viewer/viewer.component.html
+++ b/libs/gallery/src/lib/components/viewer/viewer.component.html
@@ -3,7 +3,7 @@
   aria-label="Previous image"
   class="viewer-arrow viewer-arrow-prev"
   (mousedown)="$event.stopPropagation()"
-  (click)="selectByDelta(-1)"
+  (click)="selectByDelta(-moveByItems)"
 >
   <chevron-icon *ngIf="!arrowTemplate; else arrowTemplate"></chevron-icon>
 </button>
@@ -107,7 +107,7 @@
   aria-label="Next image"
   class="viewer-arrow viewer-arrow-next"
   (mousedown)="$event.stopPropagation()"
-  (click)="selectByDelta(1)"
+  (click)="selectByDelta(moveByItems)"
 >
   <chevron-icon *ngIf="!arrowTemplate; else arrowTemplate"></chevron-icon>
 </button>
@@ -115,7 +115,7 @@
 <counter
   *ngIf="counter && items?.length"
   [itemQuantity]="items?.length"
-  [selectedIndex]="selectedIndex"
+  [selectedIndex]="counterIndex"
   [orientation]="counterOrientation"
 ></counter>
 
diff --git a/libs/gallery/src/lib/components/viewer/viewer.component.ts b/libs/gallery/src/lib/components/viewer/viewer.component.ts
index c4b48556..e4ade8d2 100644
--- a/libs/gallery/src/lib/components/viewer/viewer.component.ts
+++ b/libs/gallery/src/lib/components/viewer/viewer.component.ts
@@ -86,6 +86,7 @@ export class ViewerComponent implements OnChanges, OnInit, AfterViewInit {
   @Input() aria: Aria;
   @Input() loop: boolean;
   @Input() visibleItems: number;
+  @Input() moveByItems: number;
 
   @HostBinding('class.rtl')
   @Input()
@@ -111,6 +112,10 @@ export class ViewerComponent implements OnChanges, OnInit, AfterViewInit {
       : '400ms';
   }
 
+  get counterIndex() {
+    return Math.floor(this.selectedIndex / this.moveByItems);
+  }
+
   get showArrow() {
     return this.arrows && this.items && this.items.length > 1;
   }