diff options
| author | usodhi <61431818+usodhi@users.noreply.github.com> | 2021-05-13 01:40:40 -0400 |
|---|---|---|
| committer | usodhi <61431818+usodhi@users.noreply.github.com> | 2021-05-13 01:40:40 -0400 |
| commit | fdd5ab800536a8f1dd8acff284bd3a956a4a17ff (patch) | |
| tree | 62ad87dc41cd8fec6e5d7005e616e6f1f44d242a /src/client/views/collections/CollectionCarousel3DView.tsx | |
| parent | a97cd98786ff5572547430fff6c9a46117423bb1 (diff) | |
| parent | 66f120531a7e86a7a6bfac30e9c966c3baaed99d (diff) | |
merging
Diffstat (limited to 'src/client/views/collections/CollectionCarousel3DView.tsx')
| -rw-r--r-- | src/client/views/collections/CollectionCarousel3DView.tsx | 41 |
1 files changed, 10 insertions, 31 deletions
diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index b2ae441d6..3c66faf0c 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -13,6 +13,7 @@ import { DragManager } from '../../util/DragManager'; import { DocumentView } from '../nodes/DocumentView'; import "./CollectionCarousel3DView.scss"; import { CollectionSubView } from './CollectionSubView'; +import { StyleProp } from '../StyleProvider'; type Carousel3DDocument = makeInterface<[typeof documentSchema, typeof collectionSchema]>; const Carousel3DDocument = makeInterface(documentSchema, collectionSchema); @@ -40,11 +41,8 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume @computed get content() { const currentIndex = NumCast(this.layoutDoc._itemIndex); const displayDoc = (childPair: { layout: Doc, data: Doc }) => { - const script = ScriptField.MakeScript("this._showCaption = 'caption'", { this: Doc.name }); - const onChildClick = script && (() => script); - return <DocumentView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit} + return <DocumentView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "childLayoutTemplate", "childLayoutString"]).omit} onDoubleClick={this.onChildDoubleClick} - onClick={onChildClick} renderDepth={this.props.renderDepth + 1} LayoutTemplate={this.props.childLayoutTemplate} LayoutTemplateString={this.props.childLayoutString} @@ -52,7 +50,6 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume DataDoc={childPair.data} PanelWidth={this.panelWidth} PanelHeight={this.panelHeight} - ScreenToLocalTransform={this.props.ScreenToLocalTransform} bringToFront={returnFalse} />; }; @@ -104,27 +101,6 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume }, 1500); } - _downX = 0; - _downY = 0; - onPointerDown = (e: React.PointerEvent) => { - this._downX = e.clientX; - this._downY = e.clientY; - document.addEventListener("pointerup", this.onpointerup); - } - private _lastTap: number = 0; - private _doubleTap = false; - onpointerup = (e: PointerEvent) => { - 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; - } - } - @computed get buttons() { if (!this.props.isContentActive()) return null; return <div className="arrow-buttons" > @@ -157,17 +133,20 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume } @computed get dots() { - return (this.childLayoutPairs.map((_child, index) => { - return <div key={Utils.GenerateGuid()} className={`dot${index === NumCast(this.layoutDoc._itemIndex) ? "-active" : ""}`} - onClick={() => this.layoutDoc._itemIndex = index} />; - })); + return (this.childLayoutPairs.map((_child, index) => + <div key={Utils.GenerateGuid()} className={`dot${index === NumCast(this.layoutDoc._itemIndex) ? "-active" : ""}`} + onClick={() => this.layoutDoc._itemIndex = index} />)); } render() { const index = NumCast(this.layoutDoc._itemIndex); const translateX = this.panelWidth() * (1 - index); - return <div className="collectionCarousel3DView-outer" onClick={this.onClick} onPointerDown={this.onPointerDown} ref={this.createDashEventsTarget}> + return <div className="collectionCarousel3DView-outer" ref={this.createDashEventsTarget} + style={{ + background: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor), + color: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color), + }} > <div className="carousel-wrapper" style={{ transform: `translateX(${translateX}px)` }}> {this.content} </div> |
