more refactoring to of collection flashcards into CollectioSubView to simplify using it in diferent collection views.

1 files changed, 16 insertions, 56 deletions

diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index 3bcf3450f..9ccac0e0f 100644
--- a/src/client/views/collections/CollectionCarousel3DView.tsx
+++ b/src/client/views/collections/CollectionCarousel3DView.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, makeObservable, observable } from 'mobx';
+import { computed, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { returnZero } from '../../../ClientUtils';
@@ -15,26 +15,19 @@ import { DocumentView } from '../nodes/DocumentView';
 import { FocusViewOptions } from '../nodes/FocusViewOptions';
 import './CollectionCarousel3DView.scss';
 import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
-import { FlashcardPracticeUI } from './FlashcardPracticeUI';
 
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 const { CAROUSEL3D_CENTER_SCALE, CAROUSEL3D_SIDE_SCALE, CAROUSEL3D_TOP } = require('../global/globalCssVariables.module.scss');
 
 @observer
 export class CollectionCarousel3DView extends CollectionSubView() {
-    @computed get scrollSpeed() {
-        return this.layoutDoc._autoScrollSpeed ? NumCast(this.layoutDoc._autoScrollSpeed) : 1000; // default scroll speed
-    }
-    _sideBtnWidth = 35;
-    @observable _filterFunc: ((doc: Doc) => boolean) | undefined = undefined;
+    private _dropDisposer?: DragManager.DragDropDisposer;
 
     constructor(props: SubCollectionViewProps) {
         super(props);
         makeObservable(this);
     }
 
-    private _dropDisposer?: DragManager.DragDropDisposer;
-
     componentWillUnmount() {
         this._dropDisposer?.();
     }
@@ -46,8 +39,11 @@ export class CollectionCarousel3DView extends CollectionSubView() {
         }
     };
 
+    @computed get scrollSpeed() {
+        return this.layoutDoc._autoScrollSpeed ? NumCast(this.layoutDoc._autoScrollSpeed) : 1000; // default scroll speed
+    }
     @computed get carouselItems() {
-        return this.childLayoutPairs.filter(pair => pair.layout.type !== DocumentType.LINK).filter(pair => !this._filterFunc?.(pair.layout));
+        return this.childLayoutPairs.filter(pair => !pair.layout.layout_isSvg);
     }
 
     centerScale = Number(CAROUSEL3D_CENTER_SCALE);
@@ -86,11 +82,11 @@ export class CollectionCarousel3DView extends CollectionSubView() {
 
     @computed get content() {
         const currentIndex = NumCast(this.layoutDoc._carousel_index);
-        const displayDoc = (childPair: { layout: Doc; data: Doc }, dxf: () => Transform) => (
+        const displayDoc = (child: Doc, dxf: () => Transform) => (
             <DocumentView
                 {...this._props}
-                Document={childPair.layout}
-                TemplateDataDocument={childPair.data}
+                Document={child}
+                TemplateDataDocument={undefined}
                 // suppressSetHeight={true}
                 NativeWidth={returnZero}
                 NativeHeight={returnZero}
@@ -109,9 +105,9 @@ export class CollectionCarousel3DView extends CollectionSubView() {
             />
         );
 
-        return this.carouselItems.map((childPair, index) => (
-            <div key={childPair.layout[Id]} className={`collectionCarousel3DView-item${index === currentIndex ? '-active' : ''} ${index}`} style={{ width: this.panelWidth() }}>
-                {displayDoc(childPair, index < currentIndex ? this.childScreenLeftToLocal : index === currentIndex ? this.childCenterScreenToLocal : this.childScreenRightToLocal)}
+        return this.carouselItems.map((child, index) => (
+            <div key={child.layout[Id]} className={`collectionCarousel3DView-item${index === currentIndex ? '-active' : ''} ${index}`} style={{ width: this.panelWidth() }}>
+                {displayDoc(child.layout, index < currentIndex ? this.childScreenLeftToLocal : index === currentIndex ? this.childCenterScreenToLocal : this.childScreenRightToLocal)}
             </div>
         ));
     }
@@ -191,35 +187,14 @@ export class CollectionCarousel3DView extends CollectionSubView() {
         return this.panelWidth() * (1 - index);
     }
 
-    /**
-     * How much the content of the carousel view is being scaled based on its nesting and its fit-to-width settings
-     */
-    @computed get contentScaling() { return this.ScreenToLocalBoxXf().Scale * (this._props.NativeDimScaling?.() ?? 1); } // prettier-ignore
-
-    /**
-     * The maximum size a UI widget can be scaled so that it won't be bigger in screen pixels than its normal 35 pixel size.
-     */
-    @computed get maxWidgetScale() {
-        const maxWidgetSize = Math.min(this._sideBtnWidth * this.contentScaling, 0.1 * NumCast(this.layoutDoc.width, 1));
-        return Math.max(maxWidgetSize / this._sideBtnWidth, 1);
-    }
-    /**
-     * How much to reactively scale a UI element so that it is as big as it can be (up to its normal 35pixel size) without being too big for the Doc content
-     */
-    @computed get uiBtnScaleTransform() {  return this.maxWidgetScale * Math.min(1, this.contentScaling); } // prettier-ignore
-    screenXPadding = () => (this.uiBtnScaleTransform * this._sideBtnWidth - NumCast(this.layoutDoc.xMargin)) / this._props.ScreenToLocalTransform().Scale;
-
+    curDoc = () => this.carouselItems[NumCast(this.layoutDoc._carousel_index)]?.layout;
+    answered = (correct: boolean) => (!correct || !this.curDoc()) && this.changeSlide(1);
     docViewProps = () => ({
         ...this._props, //
         isDocumentActive: this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this._props.isContentActive,
         isContentActive: this.isChildContentActive,
         ScreenToLocalTransform: this.contentScreenToLocalXf,
     });
-    carouselItemsFunc = () => this.carouselItems.map(pair => pair.layout);
-    @action setFilterFunc = (func?: (doc: Doc) => boolean) => { this._filterFunc = func; }; // prettier-ignore
-    answered = (correct: boolean) => (!correct || !this.curDoc()) && this.changeSlide(1);
-    curDoc = () => this.carouselItems[NumCast(this.layoutDoc._carousel_index)]?.layout;
-
     render() {
         return (
             <div
@@ -233,25 +208,10 @@ export class CollectionCarousel3DView extends CollectionSubView() {
                     {this.content}
                 </div>
                 {this.buttons}
-                <div className="dot-bar" style={{ transform: `scale(${this.uiBtnScaleTransform})` }}>
+                <div className="dot-bar" style={{ transform: `scale(${this.uiBtnScaling})` }}>
                     {this.dots}
                 </div>
-                <FlashcardPracticeUI
-                    setFilterFunc={this.setFilterFunc}
-                    fieldKey={this.fieldKey}
-                    sideBtnWidth={this._sideBtnWidth}
-                    carouselItems={this.carouselItemsFunc}
-                    childDocs={this.childDocs}
-                    advance={this.answered}
-                    curDoc={this.curDoc}
-                    practiceBtnOffset={this._sideBtnWidth * 4}
-                    layoutDoc={this.layoutDoc}
-                    maxWidgetScale={this.maxWidgetScale}
-                    uiBtnScaleTransform={this.uiBtnScaleTransform}
-                    ScreenToLocalBoxXf={this.ScreenToLocalBoxXf}
-                    renderDepth={this._props.renderDepth}
-                    docViewProps={this.docViewProps}
-                />
+                {this.flashCardUI(this.curDoc, this.docViewProps, this.answered)}
             </div>
         );
     }