From ced0c14ea8410eeedcbdc8eba4e0227840c488b5 Mon Sep 17 00:00:00 2001
From: Melissa Zhang <mzhang19096@gmail.com>
Date: Tue, 2 Jun 2020 20:08:06 -0700
Subject: arrows bug fix

---
 .../views/collections/CollectionCarousel3DView.tsx | 27 +++++++++++++---------
 1 file changed, 16 insertions(+), 11 deletions(-)

(limited to 'src/client/views/collections/CollectionCarousel3DView.tsx')

diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index bad3096c8..097bbb7b3 100644
--- a/src/client/views/collections/CollectionCarousel3DView.tsx
+++ b/src/client/views/collections/CollectionCarousel3DView.tsx
@@ -71,15 +71,29 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
     }
 
     changeSlide = (direction: number) => {
+        console.log("old", NumCast(this.layoutDoc._itemIndex), direction);
         this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) + direction + this.childLayoutPairs.length) % this.childLayoutPairs.length;
+        console.log("new", NumCast(this.layoutDoc._itemIndex));
+    }
+
+    startScroll = (direction: number) => {
+        this.layoutDoc.scrollInterval = 500;
+        this.interval = window.setInterval(() => {
+            this.changeSlide(direction);
+        }, this.layoutDoc.scrollInterval);
     }
 
     timer?: number;
     interval?: number;
     onArrowDown = (e: React.PointerEvent, direction: number) => {
+        console.log("onArrowDown", direction);
         e.stopPropagation;
-        document.removeEventListener("pointerup", () => this.onArrowRelease(direction));
-        document.addEventListener("pointerup", () => this.onArrowRelease(direction));
+
+        const listener = () => { // is able to pass in the direction parameter and then correctly remove the listener
+            this.onArrowRelease(direction);
+            document.removeEventListener("pointerup", listener);
+        };
+        document.addEventListener("pointerup", listener);
 
         this.layoutDoc.startScrollTimeout = 1500;
         this.timer = window.setTimeout(() => { // if arrow is held down long enough, activate automatic scrolling
@@ -89,16 +103,7 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
         }, this.layoutDoc.startScrollTimeout);
     }
 
-    startScroll = (direction: number) => {
-        this.layoutDoc.scrollInterval = 500;
-        this.interval = window.setInterval(() => {
-            this.changeSlide(direction);
-        }, this.layoutDoc.scrollInterval);
-    }
-
     onArrowRelease = (direction: number) => {
-        document.removeEventListener("pointerup", () => this.onArrowRelease(direction));
-
         if (this.timer) {
             this.changeSlide(direction); // if click wasn't long enough to activate autoscroll, only advance/go back 1 slide
             window.clearTimeout(this.timer);
-- 
cgit v1.2.3-70-g09d2

