feat: add smoother multi-item navigation WIP

This commit introduces paging-like navigation which takes a desired
index for selection only as a guidance to choose a page, not as absolute
target. This should make it easier for user to orient himself in the
multitude of items and also to spot the end of the list.

Since the actual selection differs a little from the desired index
concept, upon which the gallery was based until now, it probably doesn't
make sense to track the selection anymore. For instance, given 4 items
in total, if a client would call selection with index 3, the gallery can
in the end select index 1 so that the last "page" is full. If tracked by
@output, this would be confusing to the client, so it probably makes
sense to hide it and remove the outgoing triggers. Will be done in next
commit unless I find a reason to keep it.

This commit has the unexpected benefit of solving the fringe flicker as
described in https://trello.com/c/BS2TpM4w. It is also preparation for
the dots component.

The commit doesn't include tests because the Karma test suite has such a
bad DX I didn't want to waste my time with it.

libs/gallery/src/lib/components/viewer/viewer.component.ts

@@ -144,6 +144,9 @@ export class ViewerComponent implements OnChanges, OnInit, AfterViewInit {
 
   ngOnChanges({ visibleItems, items, loop }: SimpleChanges) {
     if (visibleItems) {
+      if (!this.moveByItems && this.visibleItems) {
+        this.moveByItems = this.visibleItems;
+      }
       this.fringeCount = this.getFringeCount();
       this.displayedItems = this.getItemsToBeDisplayed(this.fringeCount);
       this.itemListRef.nativeElement.style.setProperty(
@@ -186,7 +189,7 @@ export class ViewerComponent implements OnChanges, OnInit, AfterViewInit {
     return !!item.src.match(/youtube.*\/embed\//);
   }
 
-  select(index: number) {
+  select(index: number, shortPath = true) {
     if (this.selectedIndex === index) {
       return this.center();
     }
@@ -195,17 +198,37 @@ export class ViewerComponent implements OnChanges, OnInit, AfterViewInit {
       this.stopCurrentVideo();
     }
 
+    // The purpose of the short path here is best understood by the following example: If going from index
+    // 6 (last) to index 0, do not go back over all the middle items, but go 6 -> 0 the short route. This
+    // makes navigating slider smoother. This of course applies in the other direction as well.
+    if (this.visibleItems > 1 && shortPath) {
+      const maxIndex = this.items.length - this.visibleItems;
+      // When going back, in direction over the first item, stop at the slider's beginning at first.
+      if (this.selectedIndex !== 0 && index < 0) {
+        index = 0;
+      } else if (this.selectedIndex < maxIndex) {
+        // Set the desired index or choose the last if it is the slider's last "page".
+        index = Math.min(maxIndex, index);
+      } else if (index > maxIndex) {
+        // Loop to the first item if going over the slider's end. This trick makes the loop cross the
+        // boundary between the last and the first.
+        index = this.items.length;
+      }
+    }
+
     const indexOutOfBounds = !this.items[index];
     const looping = this.loop && indexOutOfBounds;
 
     if (looping) {
       this.loopTo(index);
-    } else {
-      this.selectedIndex = indexOutOfBounds
-        ? this.correctIndexOutOfBounds(index)
-        : index;
-      this.center(); // we center only for this branch since looping does a delayed centering
+      return this.selection.emit(this.selectedIndex);
     }
+
+    this.selectedIndex = indexOutOfBounds
+      ? this.correctIndexOutOfBounds(index)
+      : index;
+
+    this.center(); // we center only for this branch since looping does a delayed centering
     this.selection.emit(this.selectedIndex);
   }
 
@@ -505,7 +528,7 @@ export class ViewerComponent implements OnChanges, OnInit, AfterViewInit {
       ) * -Math.sign(distance);
     const newIndex = this.selectedIndex + indexDelta;
 
-    this.select(newIndex);
+    this.select(newIndex, false);
   }
 
   private shift(delta = 0) {