From 01db98ebdd02729729222bdd20ab65b57cbbe94c Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 9 Oct 2024 13:27:56 -0400
Subject: more refactoring to of collection flashcards into CollectioSubView to
 simplify using it in diferent collection views.

---
 .../views/collections/CollectionCarouselView.tsx   | 53 +++-------------------
 1 file changed, 6 insertions(+), 47 deletions(-)

(limited to 'src/client/views/collections/CollectionCarouselView.tsx')

diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index 64ddaac79..538eba356 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -5,7 +5,6 @@ import * as React from 'react';
 import { StopEvent, returnOne, returnZero } from '../../../ClientUtils';
 import { Doc, Opt } from '../../../fields/Doc';
 import { BoolCast, DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
-import { DocumentType } from '../../documents/DocumentTypes';
 import { DragManager } from '../../util/DragManager';
 import { StyleProp } from '../StyleProp';
 import { DocumentView } from '../nodes/DocumentView';
@@ -13,15 +12,12 @@ import { FieldViewProps } from '../nodes/FieldView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import './CollectionCarouselView.scss';
 import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
-import { FlashcardPracticeUI } from './FlashcardPracticeUI';
 
 @observer
 export class CollectionCarouselView extends CollectionSubView() {
     private _dropDisposer?: DragManager.DragDropDisposer;
 
     _fadeTimer: NodeJS.Timeout | undefined;
-    _sideBtnWidth = 35;
-    @observable _filterFunc: ((doc: Doc) => boolean) | undefined = undefined;
     @observable _last_index = this.carouselIndex;
     @observable _last_opacity = 1;
 
@@ -43,28 +39,7 @@ export class CollectionCarouselView extends CollectionSubView() {
 
     @computed get captionMarginX(){ return NumCast(this.layoutDoc.caption_xMargin, 50); } // prettier-ignore
     @computed get carouselIndex() { return NumCast(this.layoutDoc._carousel_index) % this.carouselItems.length; } // prettier-ignore
-    @computed get carouselItems() { return this.childDocs
-        .filter(doc => doc.type !== DocumentType.LINK)
-        .filter(doc => !this._filterFunc?.(doc))
-    } // prettier-ignore
-
-    /**
-     * 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;
+    @computed get carouselItems() { return this.childLayoutPairs.filter(pair => !pair.layout.layout_isSvg); } // prettier-ignore
 
     /**
      * Move forward or backward the specified number of Docs
@@ -91,7 +66,7 @@ export class CollectionCarouselView extends CollectionSubView() {
         this.move(-1);
     };
 
-    curDoc = () => this.carouselItems[this.carouselIndex];
+    curDoc = () => this.carouselItems[this.carouselIndex]?.layout;
 
     captionStyleProvider = (doc: Doc | undefined, captionProps: Opt<FieldViewProps>, property: string) => {
         // first look for properties on the document in the carousel, then fallback to properties on the container
@@ -153,7 +128,7 @@ export class CollectionCarouselView extends CollectionSubView() {
      */
     @computed get overlay() {
         const fadeTime = 500;
-        const lastDoc = this.carouselItems?.[this._last_index];
+        const lastDoc = this.carouselItems?.[this._last_index]?.layout;
         return !lastDoc || this.carouselIndex === this._last_index ? null : (
             <div className="collectionCarouselView-image" style={{ opacity: this._last_opacity, transition: `opacity ${fadeTime}ms` }}>
                 {this.renderDoc(
@@ -211,10 +186,10 @@ export class CollectionCarouselView extends CollectionSubView() {
     @computed get navButtons() {
         return this.Document._chromeHidden || !this.curDoc() ? null : (
             <>
-                <div key="back" className="carouselView-back" style={{ transform: `scale(${this.uiBtnScaleTransform})` }} onClick={this.goback}>
+                <div key="back" className="carouselView-back" style={{ transform: `scale(${this.uiBtnScaling})` }} onClick={this.goback}>
                     <FontAwesomeIcon icon="chevron-left" size="2x" />
                 </div>
-                <div key="fwd" className="carouselView-fwd" style={{ transform: `scale(${this.uiBtnScaleTransform})` }} onClick={this.advance}>
+                <div key="fwd" className="carouselView-fwd" style={{ transform: `scale(${this.uiBtnScaling})` }} onClick={this.advance}>
                     <FontAwesomeIcon icon="chevron-right" size="2x" />
                 </div>
             </>
@@ -227,9 +202,7 @@ export class CollectionCarouselView extends CollectionSubView() {
         isContentActive: this.isChildContentActive,
         ScreenToLocalTransform: this.contentScreenToLocalXf,
     });
-    carouselItemsFunc = () => this.carouselItems;
     answered = () => this.advance();
-    @action setFilterFunc = (func?: (doc: Doc) => boolean) => { this._filterFunc = func; }; // prettier-ignore
 
     render() {
         return (
@@ -245,21 +218,7 @@ export class CollectionCarouselView extends CollectionSubView() {
                     top: NumCast(this.layoutDoc._yMargin),
                 }}>
                 {this.content}
-                <FlashcardPracticeUI
-                    setFilterFunc={this.setFilterFunc}
-                    fieldKey={this.fieldKey}
-                    sideBtnWidth={this._sideBtnWidth}
-                    carouselItems={this.carouselItemsFunc}
-                    childDocs={this.childDocs}
-                    advance={this.answered}
-                    curDoc={this.curDoc}
-                    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)}
                 {this.navButtons}
             </div>
         );
-- 
cgit v1.2.3-70-g09d2