hover to show autoscroll button

4 files changed, 100 insertions, 44 deletions

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 04f02c683..7cdf955a1 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -1,5 +1,5 @@
 import { IconProp, library } from '@fortawesome/fontawesome-svg-core';
-import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faTextHeight, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faShare, faStopCircle, faSyncAlt, faTag, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faTextHeight, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faShare, faStopCircle, faSyncAlt, faTag, faTimes, faAngleLeft, faAngleRight, faAngleDoubleLeft, faAngleDoubleRight, faPause } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { action, computed, observable, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
@@ -38,6 +38,11 @@ library.add(faCheckCircle);
 library.add(faCloudUploadAlt);
 library.add(faSyncAlt);
 library.add(faShare);
+library.add(faAngleDoubleLeft);
+library.add(faAngleDoubleRight);
+library.add(faAngleLeft);
+library.add(faAngleRight);
+library.add(faPause);
 
 @observer
 export class DocumentDecorations extends React.Component<{}, { value: string }> {
diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss
index d00a666f8..ff63f4116 100644
--- a/src/client/views/collections/CollectionCarousel3DView.scss
+++ b/src/client/views/collections/CollectionCarousel3DView.scss
@@ -1,4 +1,4 @@
-.collectionCarouselView-outer {
+.collectionCarousel3DView-outer {
     height: 100%;
     position: relative;
     background-color: white;
@@ -11,14 +11,14 @@
     align-items: center;
     transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 
-    .collectionCarouselView-item,
-    .collectionCarouselView-item-active {
+    .collectionCarousel3DView-item,
+    .collectionCarousel3DView-item-active {
         flex: 1;
         transition: opacity 0.3s linear, transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
         pointer-events: none;
     }
 
-    .collectionCarouselView-item-active {
+    .collectionCarousel3DView-item-active {
         pointer-events: unset;
     }
 }
@@ -46,7 +46,44 @@
     }
 }
 
-.carouselView-back,
-.carouselView-forward {
+.carousel3DView-back,
+.carousel3DView-fwd,
+.carousel3DView-back-scroll,
+.carousel3DView-fwd-scroll {
+    position: absolute;
+    display: flex;
+    width: 30;
+    height: 30;
+    align-items: center;
+    border-radius: 5px;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.46);
     cursor: pointer;
+}
+
+.carousel3DView-fwd {
+    top: 50%;
+    right: 0;
+}
+
+.carousel3DView-back {
+    top: 50%;
+    left: 0;
+}
+
+.carousel3DView-fwd-scroll {
+    top: calc(50% - 30px);
+    right: 0;
+}
+
+.carousel3DView-back-scroll {
+    top: calc(50% - 30px);
+    left: 0;
+}
+
+.carousel3DView-back:hover,
+.carousel3DView-fwd:hover,
+.carousel3DView-back-scroll:hover,
+.carousel3DView-fwd-scroll:hover {
+    background: lightgray;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index 2f161e255..1fa96df65 100644
--- a/src/client/views/collections/CollectionCarousel3DView.tsx
+++ b/src/client/views/collections/CollectionCarousel3DView.tsx
@@ -21,6 +21,10 @@ const Carousel3DDocument = makeInterface(documentSchema, collectionSchema);
 
 @observer
 export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocument) {
+    @computed get scrollSpeed() {
+        return this.layoutDoc._autoScrollSpeed ? NumCast(this.layoutDoc._autoScrollSpeed) : 1000; //default scroll speed
+    }
+
     private _dropDisposer?: DragManager.DragDropDisposer;
 
     componentWillUnmount() { this._dropDisposer?.(); }
@@ -74,43 +78,32 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
         this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) + direction + this.childLayoutPairs.length) % this.childLayoutPairs.length;
     }
 
-    startScroll = (direction: number) => {
-        this.layoutDoc.scrollInterval = 500;
-        this.interval = window.setInterval(() => {
-            this.changeSlide(direction);
-        }, this.layoutDoc.scrollInterval);
+    onArrowClick = (e: React.MouseEvent, direction: number) => {
+        e.stopPropagation();
+        this.changeSlide(direction);
     }
 
-    timer?: number;
     interval?: number;
-    onArrowDown = (e: React.PointerEvent, direction: number) => {
-        e.stopPropagation;
+    startAutoScroll = (direction: number) => {
+        this.interval = window.setInterval(() => {
+            this.changeSlide(direction);
+        }, this.scrollSpeed);
+    }
 
-        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);
+    stopAutoScroll = () => {
+        window.clearInterval(this.interval);
+        this.interval = undefined;
+    }
 
-        this.layoutDoc.startScrollTimeout = 500;
-        this.timer = window.setTimeout(() => { // if arrow is held down long enough, activate automatic scrolling
-            window.clearTimeout(this.timer);
-            this.timer = undefined;
-            this.startScroll(direction);
-        }, this.layoutDoc.startScrollTimeout);
+    toggleAutoScroll = (direction: number) => {
+        this.layoutDoc.autoScrollOn = this.layoutDoc.autoScrollOn ? false : true;
+        this.layoutDoc.autoScrollOn ? this.startAutoScroll(direction) : this.stopAutoScroll();
     }
 
-    onArrowRelease = (direction: number) => {
-        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);
-            this.timer = undefined;
-        }
+    showAutoScrollButton = (direction: string) => {
+        // keep pause button visible while autoscroll is on, and don't show the other side's autoscroll button
+        !this.layoutDoc.autoScrollOn && (this.layoutDoc.showScrollButton = direction);
 
-        if (this.interval) {
-            window.clearInterval(this.interval); // stop scrolling
-            this.interval = undefined;
-        }
     }
 
     onContextMenu = (e: React.MouseEvent): void => {
@@ -148,14 +141,35 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
     }
 
     @computed get buttons() {
-        return <>
-            <div key="back" className="carouselView-back" style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }}
-                onPointerDown={(e) => this.onArrowDown(e, -1)}>
-                <FontAwesomeIcon icon={"caret-left"} size={"2x"} />
+        if (!this.props.active()) return null;
+        return <div className="arrow-buttons" onMouseLeave={() => this.showAutoScrollButton("none")}>
+            <div key="back" className="carousel3DView-back" style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }}
+                onClick={(e) => this.onArrowClick(e, -1)}
+                onMouseEnter={() => this.showAutoScrollButton("back")}>
+                <FontAwesomeIcon icon={"angle-left"} size={"2x"} />
             </div>
-            <div key="fwd" className="carouselView-fwd" style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }}
-                onPointerDown={(e) => this.onArrowDown(e, 1)}>
-                <FontAwesomeIcon icon={"caret-right"} size={"2x"} />
+            <div key="fwd" className="carousel3DView-fwd" style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }}
+                onClick={(e) => this.onArrowClick(e, 1)}
+                onMouseEnter={() => this.showAutoScrollButton("fwd")}>
+                <FontAwesomeIcon icon={"angle-right"} size={"2x"} />
+            </div>
+            {this.autoScrollButton}
+        </div>;
+    }
+
+    @computed get autoScrollButton() {
+        const direction = this.layoutDoc.showScrollButton;
+        if (direction !== "back" && direction !== "fwd") return null;
+
+        const offset = (direction === "back") ? -1 : 1;
+        return <>
+            <div className={`carousel3DView-${direction}-scroll`} style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }}
+                onClick={() => this.toggleAutoScroll(offset)}>
+                {this.layoutDoc.autoScrollOn ?
+                    <FontAwesomeIcon icon={"pause"} size={"1x"} /> :
+                    direction === "back" ?
+                        <FontAwesomeIcon icon={"angle-double-left"} size={"1x"} /> :
+                        <FontAwesomeIcon icon={"angle-double-right"} size={"1x"} />}
             </div>
         </>;
     }
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index a0f6ad9c7..82aa3dbd5 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -64,7 +64,7 @@ export enum CollectionViewType {
     Multirow = "multirow",
     Time = "time",
     Carousel = "carousel",
-    Carousel3D = "3D carousel",
+    Carousel3D = "3D Carousel",
     Linear = "linear",
     Staff = "staff",
     Map = "map",