merged with master

1 files changed, 58 insertions, 16 deletions

diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index 00edf71dd..eda8e5684 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -11,26 +11,23 @@ import "./CollectionCarouselView.scss";
 import { CollectionSubView } from './CollectionSubView';
 import { faCaretLeft, faCaretRight } from '@fortawesome/free-solid-svg-icons';
 import { Doc } from '../../../new_fields/Doc';
-import { FormattedTextBox } from '../nodes/FormattedTextBox';
+import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
+import { ContextMenu } from '../ContextMenu';
+import { ObjectField } from '../../../new_fields/ObjectField';
 
 type CarouselDocument = makeInterface<[typeof documentSchema,]>;
 const CarouselDocument = makeInterface(documentSchema);
 
 @observer
 export class CollectionCarouselView extends CollectionSubView(CarouselDocument) {
-    @observable public addMenuToggle = React.createRef<HTMLInputElement>();
     private _dropDisposer?: DragManager.DragDropDisposer;
 
-    componentWillUnmount() {
-        this._dropDisposer && this._dropDisposer();
-    }
+    componentWillUnmount() { this._dropDisposer?.(); }
 
-    componentDidMount() {
-    }
     protected createDashEventsTarget = (ele: HTMLDivElement) => { //used for stacking and masonry view
-        this._dropDisposer && this._dropDisposer();
+        this._dropDisposer?.();
         if (ele) {
-            this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this));
+            this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc);
         }
     }
 
@@ -47,18 +44,27 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument)
     @computed get content() {
         const index = NumCast(this.layoutDoc._itemIndex);
         return !(this.childLayoutPairs?.[index]?.layout instanceof Doc) ? (null) :
-            <div>
-                <div className="collectionCarouselView-image">
+            <>
+                <div className="collectionCarouselView-image" key="image">
                     <ContentFittingDocumentView {...this.props}
+                        renderDepth={this.props.renderDepth + 1}
                         Document={this.childLayoutPairs[index].layout}
                         DataDocument={this.childLayoutPairs[index].data}
                         PanelHeight={this.panelHeight}
                         getTransform={this.props.ScreenToLocalTransform} />
                 </div>
-                <div className="collectionCarouselView-caption" style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }}>
-                    <FormattedTextBox key={index} {...this.props} Document={this.childLayoutPairs[index].layout} DataDoc={undefined} fieldKey={"caption"}></FormattedTextBox>
+                <div className="collectionCarouselView-caption" key="caption"
+                    style={{
+                        background: StrCast(this.layoutDoc._captionBackgroundColor, this.props.backgroundColor?.(this.props.Document)),
+                        color: StrCast(this.layoutDoc._captionColor, StrCast(this.layoutDoc.color)),
+                        borderRadius: StrCast(this.layoutDoc._captionBorderRounding),
+                    }}>
+                    <FormattedTextBox key={index} {...this.props}
+                        xMargin={NumCast(this.layoutDoc["caption-xMargin"])}
+                        yMargin={NumCast(this.layoutDoc["caption-yMargin"])}
+                        Document={this.childLayoutPairs[index].layout} DataDoc={undefined} fieldKey={"caption"}></FormattedTextBox>
                 </div>
-            </div>
+            </>;
     }
     @computed get buttons() {
         return <>
@@ -70,10 +76,46 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument)
             </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
+        if (!e.isPropagationStopped()) {
+            ContextMenu.Instance.addItem({
+                description: "Make Hero Image", event: () => {
+                    const index = NumCast(this.layoutDoc._itemIndex);
+                    (this.dataDoc || Doc.GetProto(this.props.Document)).hero = ObjectField.MakeCopy(this.childLayoutPairs[index].layout.data as ObjectField);
+                }, icon: "plus"
+            });
+        }
+    }
+    _downX = 0;
+    _downY = 0;
+    onPointerDown = (e: React.PointerEvent) => {
+        this._downX = e.clientX;
+        this._downY = e.clientY;
+        console.log("CAROUSEL down");
+        document.addEventListener("pointerup", this.onpointerup);
+    }
+    private _lastTap: number = 0;
+    private _doubleTap = false;
+    onpointerup = (e: PointerEvent) => {
+        console.log("CAROUSEL up");
+        this._doubleTap = (Date.now() - this._lastTap < 300 && e.button === 0 && Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2);
+        this._lastTap = Date.now();
+    }
+
+    onClick = (e: React.MouseEvent) => {
+        if (this._doubleTap) {
+            e.stopPropagation();
+            this.props.Document.isLightboxOpen = true;
+        }
+    }
+
     render() {
-        return <div className="collectionCarouselView-outer" ref={this.createDashEventsTarget}>
+        return <div className="collectionCarouselView-outer" onClick={this.onClick} onPointerDown={this.onPointerDown} ref={this.createDashEventsTarget} onContextMenu={this.onContextMenu}>
             {this.content}
-            {this.buttons}
+            {this.props.Document._chromeStatus !== "replaced" ? this.buttons : (null)}
         </div>;
     }
 }
\ No newline at end of file