From 210ce6f29e1674d4e2af893a9c5c995506e0c4b7 Mon Sep 17 00:00:00 2001
From: Melissa Zhang <mzhang19096@gmail.com>
Date: Wed, 20 May 2020 23:04:09 -0700
Subject: eliminated prev/next buttons, add caption by clicking on image

---
 src/client/views/.DS_Store                         | Bin 6148 -> 6148 bytes
 .../collections/CollectionCarousel3DView.scss      |   6 +++
 .../views/collections/CollectionCarousel3DView.tsx |  57 ++++++++-------------
 3 files changed, 26 insertions(+), 37 deletions(-)

(limited to 'src')

diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store
index 5008ddfcf..3717a2923 100644
Binary files a/src/client/views/.DS_Store and b/src/client/views/.DS_Store differ
diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss
index 7ae9dd2c6..25d1df2f4 100644
--- a/src/client/views/collections/CollectionCarousel3DView.scss
+++ b/src/client/views/collections/CollectionCarousel3DView.scss
@@ -20,6 +20,8 @@
         bottom: 0;
         margin: auto;
         user-select: none;
+        transition: transform 0.5s;
+        transform-style: preserve-3d;
     }
 
     .collectionCarouselView-prev {
@@ -65,4 +67,8 @@
 .carouselView-back:hover,
 .carouselView-fwd:hover {
     background: lightgray;
+}
+
+.carouselView-fwd:hover~.collectionCarouselView-image {
+    transform: translateX(50px)
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index d957b8749..fd1785641 100644
--- a/src/client/views/collections/CollectionCarousel3DView.tsx
+++ b/src/client/views/collections/CollectionCarousel3DView.tsx
@@ -1,4 +1,3 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { observable, computed } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -31,28 +30,14 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
         }
     }
 
-    advance = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) + 1) % this.childLayoutPairs.length;
-    }
-
-    goback = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length;
-    }
-
     addCaption = (e: React.MouseEvent) => {
         e.stopPropagation();
         const index = NumCast(this.layoutDoc._itemIndex);
-        this.childLayoutPairs[index].layout._showCaption = "caption";
+        if (this.childLayoutPairs[index].layout._showCaption !== "caption") {
+            this.childLayoutPairs[index].layout._showCaption = "caption";
+        }
     }
 
-    // @computed get gobackScript() {
-    //     return ScriptField.MakeScript("this.layoutDoc._itemIndex = index",
-    //         { this: Doc.name, heading: "string", checked: "string", containingTreeView: Doc.name, firstDoc: Doc.name },
-    //         { index: (NumCast(this.layoutDoc._itemIndex) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length });
-    // }
-
     mainPanelWidth = () => this.props.PanelWidth() * 0.6;
     sidePanelWidth = () => this.props.PanelWidth() * 0.3;
     sidePanelHeight = () => this.props.PanelHeight() * 0.5;
@@ -63,12 +48,14 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
         const nextIndex = (index + 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length;
         return !(this.childLayoutPairs?.[index]?.layout instanceof Doc) ? (null) :
             <>
-                <button className="test-button" onClick={this.addCaption}>add caption</button>
-                <div className="collectionCarouselView-prev" onClick={this.goback}>
+                <div className="collectionCarouselView-prev">
                     <ContentFittingDocumentView {...this.props}
                         onDoubleClick={ScriptCast(this.layoutDoc.onChildDoubleClick)}
-                        // onClick={ScriptCast(this.layoutDoc.onChildClick)}
-                        // onClick={this.gobackScript}
+                        onClick={ScriptField.MakeScript(
+                            "collectionLayoutDoc._itemIndex = collectionLayoutDoc[fieldKey].indexOf(self)",
+                            { fieldKey: String.name, collectionLayoutDoc: Doc.name },
+                            { fieldKey: this.props.fieldKey, collectionLayoutDoc: this.layoutDoc }
+                        )}
                         renderDepth={this.props.renderDepth + 1}
                         LayoutTemplate={this.props.ChildLayoutTemplate}
                         LayoutTemplateString={this.props.ChildLayoutString}
@@ -81,10 +68,14 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
                         parentActive={this.props.active}
                     />
                 </div>
-                <div className="collectionCarouselView-next" onClick={this.advance}>
+                <div className="collectionCarouselView-next">
                     <ContentFittingDocumentView {...this.props}
                         onDoubleClick={ScriptCast(this.layoutDoc.onChildDoubleClick)}
-                        // onClick={ScriptCast(this.layoutDoc.onChildClick)}
+                        onClick={ScriptField.MakeScript(
+                            "collectionLayoutDoc._itemIndex = collectionLayoutDoc[fieldKey].indexOf(self)",
+                            { fieldKey: String.name, collectionLayoutDoc: Doc.name },
+                            { fieldKey: this.props.fieldKey, collectionLayoutDoc: this.layoutDoc }
+                        )}
                         renderDepth={this.props.renderDepth + 1}
                         LayoutTemplate={this.props.ChildLayoutTemplate}
                         LayoutTemplateString={this.props.ChildLayoutString}
@@ -100,7 +91,11 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
                 <div className="collectionCarouselView-image" key="image">
                     <ContentFittingDocumentView {...this.props}
                         onDoubleClick={ScriptCast(this.layoutDoc.onChildDoubleClick)}
-                        onClick={ScriptCast(this.layoutDoc.onChildClick)}
+                        onClick={ScriptField.MakeScript(
+                            "child._showCaption = 'caption'",
+                            { child: Doc.name },
+                            { child: this.childLayoutPairs[index].layout }
+                        )}
                         renderDepth={this.props.renderDepth + 1}
                         LayoutTemplate={this.props.ChildLayoutTemplate}
                         LayoutTemplateString={this.props.ChildLayoutString}
@@ -115,17 +110,6 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
                 </div>
             </>;
     }
-    @computed get buttons() {
-        return <>
-            <div key="back" className="carouselView-back" style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} onClick={this.goback}>
-                <FontAwesomeIcon icon={"caret-left"} size={"2x"} />
-            </div>
-            <div key="fwd" className="carouselView-fwd" style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} onClick={this.advance}>
-                <FontAwesomeIcon icon={"caret-right"} size={"2x"} />
-            </div>
-        </>;
-    }
-
 
     onContextMenu = (e: React.MouseEvent): void => {
         // need to test if propagation has stopped because GoldenLayout forces a parallel react hierarchy to be created for its top-level layout
@@ -164,7 +148,6 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
     render() {
         return <div className="collectionCarouselView-outer" onClick={this.onClick} onPointerDown={this.onPointerDown} ref={this.createDashEventsTarget} onContextMenu={this.onContextMenu}>
             {this.content}
-            {this.props.Document._chromeStatus !== "replaced" ? this.buttons : (null)}
         </div>;
     }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2