diff options
| -rw-r--r-- | src/client/views/collections/CollectionCarousel3DView.tsx | 10 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionCarouselView.tsx | 11 | ||||
| -rw-r--r-- | src/client/views/nodes/LinkBox.tsx | 2 |
3 files changed, 16 insertions, 7 deletions
diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 7e484f3df..5454c6f9f 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -38,6 +38,10 @@ export class CollectionCarousel3DView extends CollectionSubView() { } }; + @computed get carouselItems() { + return this.childLayoutPairs.filter(pair => pair.layout.type !== DocumentType.LINK); + } + centerScale = Number(CAROUSEL3D_CENTER_SCALE); panelWidth = () => this._props.PanelWidth() / 3; panelHeight = () => this._props.PanelHeight() * Number(CAROUSEL3D_SIDE_SCALE); @@ -85,7 +89,7 @@ export class CollectionCarousel3DView extends CollectionSubView() { ); }; - return this.childLayoutPairs.map((childPair, index) => { + return this.carouselItems.map((childPair, index) => { return ( <div key={childPair.layout[Id]} className={`collectionCarousel3DView-item${index === currentIndex ? '-active' : ''} ${index}`} style={{ width: this.panelWidth() }}> {displayDoc(childPair)} @@ -96,7 +100,7 @@ export class CollectionCarousel3DView extends CollectionSubView() { changeSlide = (direction: number) => { SelectionManager.DeselectAll(); - this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) + direction + this.childLayoutPairs.length) % this.childLayoutPairs.length; + this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) + direction + this.carouselItems.length) % this.carouselItems.length; }; onArrowClick = (direction: number) => { @@ -154,7 +158,7 @@ export class CollectionCarousel3DView extends CollectionSubView() { } @computed get dots() { - return this.childLayoutPairs.map((_child, index) => <div key={Utils.GenerateGuid()} className={`dot${index === NumCast(this.layoutDoc._carousel_index) ? '-active' : ''}`} onClick={() => (this.layoutDoc._carousel_index = index)} />); + return this.carouselItems.map((_child, index) => <div key={Utils.GenerateGuid()} className={`dot${index === NumCast(this.layoutDoc._carousel_index) ? '-active' : ''}`} onClick={() => (this.layoutDoc._carousel_index = index)} />); } @computed get translateX() { const index = NumCast(this.layoutDoc._carousel_index); diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index dae16bafb..9c370bfbb 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -12,6 +12,7 @@ import { FieldViewProps } from '../nodes/FieldView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import './CollectionCarouselView.scss'; import { CollectionSubView } from './CollectionSubView'; +import { DocumentType } from '../../documents/DocumentTypes'; @observer export class CollectionCarouselView extends CollectionSubView() { @@ -33,13 +34,17 @@ export class CollectionCarouselView extends CollectionSubView() { } }; + @computed get carouselItems() { + return this.childLayoutPairs.filter(pair => pair.layout.type !== DocumentType.LINK); + } + advance = (e: React.MouseEvent) => { e.stopPropagation(); - this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) + 1) % this.childLayoutPairs.length; + this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) + 1) % this.carouselItems.length; }; goback = (e: React.MouseEvent) => { e.stopPropagation(); - this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; + this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) - 1 + this.carouselItems.length) % this.carouselItems.length; }; captionStyleProvider = (doc: Doc | undefined, captionProps: Opt<FieldViewProps>, property: string): any => { // first look for properties on the document in the carousel, then fallback to properties on the container @@ -55,7 +60,7 @@ export class CollectionCarouselView extends CollectionSubView() { captionWidth = () => this._props.PanelWidth() - 2 * this.marginX; @computed get content() { const index = NumCast(this.layoutDoc._carousel_index); - const curDoc = this.childLayoutPairs?.[index]; + const curDoc = this.carouselItems?.[index]; const captionProps = { ...this._props, NativeScaling: returnOne, PanelWidth: this.captionWidth, fieldKey: 'caption', setHeight: undefined, setContentView: undefined }; const carouselShowsCaptions = StrCast(this.layoutDoc._layout_showCaption); return !(curDoc?.layout instanceof Doc) ? null : ( diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx index b3245310f..b5cb7a9ae 100644 --- a/src/client/views/nodes/LinkBox.tsx +++ b/src/client/views/nodes/LinkBox.tsx @@ -120,7 +120,7 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() { const targetAhyperlinks = getAnchor(this.dataDoc.link_anchor_1); const targetBhyperlinks = getAnchor(this.dataDoc.link_anchor_2); - const container = this.DocumentView?.().containerViewPath?.().lastElement().ContentDiv; + const container = this.DocumentView?.().containerViewPath?.().lastElement()?.ContentDiv; const aid = targetAhyperlinks?.find(alink => container?.contains(alink))?.id ?? targetAhyperlinks?.lastElement()?.id; const bid = targetBhyperlinks?.find(blink => container?.contains(blink))?.id ?? targetBhyperlinks?.lastElement()?.id; if (!aid || !bid) { |