aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/collections/CollectionCarousel3DView.tsx
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2021-04-21 09:49:01 -0400
committerbobzel <zzzman@gmail.com>2021-04-21 09:49:01 -0400
commit3c6fd425c1273f87dc2142038a9ddc48d6159b1b (patch)
tree67c4a7a0f9b730f36ce08bcbc0c7695c82439576 /src/client/views/collections/CollectionCarousel3DView.tsx
parenteb7a6f091419318bd85e75787067ef5f036e2659 (diff)
parent45a43e9f0417d6929a6f351fea0cf97fe11b0ef0 (diff)
Fixed errors merging with master
Diffstat (limited to 'src/client/views/collections/CollectionCarousel3DView.tsx')
-rw-r--r--src/client/views/collections/CollectionCarousel3DView.tsx34
1 files changed, 7 insertions, 27 deletions
diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index b2ae441d6..2251b60e5 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" >
@@ -167,7 +143,11 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
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>