From 0268a524540ff36bf007744eff6709dfcdedec96 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 17 Sep 2024 18:43:26 -0400
Subject: from last

---
 .../views/collections/CollectionCarouselView.tsx   | 42 ++++++++++++----------
 1 file changed, 23 insertions(+), 19 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index d9a99f47f..91a7c6514 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -89,6 +89,10 @@ export class CollectionCarouselView extends CollectionSubView() {
         .filter(doc => !this.practiceMode || (BoolCast(doc?._layout_isFlashcard) && doc[this.practiceField] !== practiceVal.CORRECT))// show only cards that aren't marked as correct
     } // prettier-ignore
 
+    /**
+     * Move forward or backward the specified number of Docs
+     * @param dir signed number indicating Docs to move forward or backward
+     */
     move = action((dir: number) => {
         this._last_index = this.carouselIndex;
         this.layoutDoc._carousel_index = this.carouselItems.length ? (this.carouselIndex + dir + this.carouselItems.length) % this.carouselItems.length : 0;
@@ -111,9 +115,9 @@ export class CollectionCarouselView extends CollectionSubView() {
     };
 
     /*
-     * Stars the document when the star button is pressed.
+     * Toggles whether the 'star' metadata field is set on the current Doc
      */
-    star = (e: React.MouseEvent) => {
+    toggleStar = (e: React.MouseEvent) => {
         e.stopPropagation();
         const curDoc = this.carouselItems[this.carouselIndex];
         curDoc && (curDoc[this.starField] = curDoc[this.starField] ? undefined : true);
@@ -129,6 +133,16 @@ export class CollectionCarouselView extends CollectionSubView() {
         this.advance(e);
     };
 
+    /**
+     * Sets the practice mode answer style for flashcards
+     * @param mode practiceMode or undefined for no practice
+     */
+    setPracticeMode = (mode: practiceMode | undefined) => {
+        this.layoutDoc.practiceMode = mode;
+        this.carouselItems?.map(doc => (doc[this.practiceField] = undefined));
+        if (mode === practiceMode.QUIZ) this.carouselItems?.map(doc => (doc[this.sideField] = undefined));
+    };
+
     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
         const childValue = doc?.['caption_' + property] ? this._props.styleProvider?.(doc, captionProps, property) : undefined;
@@ -138,13 +152,6 @@ export class CollectionCarouselView extends CollectionSubView() {
     onContentDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick);
     onContentClick = () => ScriptCast(this.layoutDoc.onChildClick);
     captionWidth = () => this._props.PanelWidth() - 2 * this.marginX;
-
-    setPracticeMode = (mode: practiceMode | undefined) => {
-        this.layoutDoc.practiceMode = mode;
-        this.carouselItems?.map(doc => (doc[this.practiceField] = undefined));
-        if (mode === practiceMode.QUIZ) this.carouselItems?.map(doc => (doc[this.sideField] = undefined));
-    };
-
     contentScreentToLocalXf = () => this._props.ScreenToLocalTransform().translate(-NumCast(this.layoutDoc.xMargin), -NumCast(this.layoutDoc.yMargin));
 
     contentPanelWidth = () => this._props.PanelWidth() - 2 * NumCast(this.layoutDoc.xMargin);
@@ -264,7 +271,7 @@ export class CollectionCarouselView extends CollectionSubView() {
             <>
                 <div>
                     <Tooltip title="star">
-                        <div key="star" className="carouselView-star" onClick={this.star}>
+                        <div key="star" className="carouselView-star" onClick={this.toggleStar}>
                             <FontAwesomeIcon icon="star" color={this.carouselItems[this.carouselIndex]?.[this.starField] ? 'yellow' : 'gray'} size="1x" />
                         </div>
                     </Tooltip>
@@ -298,7 +305,7 @@ export class CollectionCarouselView extends CollectionSubView() {
         );
     }
 
-    togglePracticeMode = (mode: practiceMode) => this.setPracticeMode(mode === this.layoutDoc.practiceMode ? undefined : mode);
+    togglePracticeMode = (mode: practiceMode) => this.setPracticeMode(mode === this.practiceMode ? undefined : mode);
     toggleFilterMode = () => Doc.setDocFilter(this.Document, 'star', true, 'match', true);
     setColor = (mode: practiceMode | cardMode, which: string) => { return which === mode ? 'white' : 'light gray'}; //prettier-ignore
 
@@ -314,12 +321,12 @@ export class CollectionCarouselView extends CollectionSubView() {
                 <div className="carouselView-practiceModes" style={{ display: BoolCast(curDoc?._layout_isFlashcard) ? undefined : 'none' }}>
                     <Tooltip title="Practice flashcards using GPT">
                         <div key="back" className="carouselView-quiz" onClick={e => this.togglePracticeMode(practiceMode.QUIZ)}>
-                            <FontAwesomeIcon icon="file-pen" color={this.setColor(practiceMode.QUIZ, StrCast(this.layoutDoc.practiceMode))} size="1x" />
+                            <FontAwesomeIcon icon="file-pen" color={this.setColor(practiceMode.QUIZ, StrCast(this.practiceMode))} size="1x" />
                         </div>
                     </Tooltip>
-                    <Tooltip title={this.layoutDoc.practiceMode === practiceMode.PRACTICE ? 'Exit practice mode' : 'Practice flashcards manually'}>
+                    <Tooltip title={this.practiceMode === practiceMode.PRACTICE ? 'Exit practice mode' : 'Practice flashcards manually'}>
                         <div key="back" className="carouselView-practice" onClick={e => this.togglePracticeMode(practiceMode.PRACTICE)}>
-                            <FontAwesomeIcon icon="check" color={this.setColor(practiceMode.PRACTICE, StrCast(this.layoutDoc.practiceMode))} size="1x" />
+                            <FontAwesomeIcon icon="check" color={this.setColor(practiceMode.PRACTICE, StrCast(this.practiceMode))} size="1x" />
                         </div>
                     </Tooltip>
                 </div>
@@ -342,13 +349,10 @@ export class CollectionCarouselView extends CollectionSubView() {
                     <p
                         className="message"
                         onClick={e => {
-                            if (this.filterMessage) {
-                                this.layoutDoc.practiceMode = undefined;
+                            if (this.filterMessage || this.practiceMessage) {
+                                this.setPracticeMode(undefined);
                                 Doc.setDocFilter(this.layoutDoc, 'star', undefined, 'remove');
                             }
-                            this.childDocs.forEach(item => {
-                                item[this.practiceField] = undefined;
-                            });
                         }}>
                         {this.filterMessage || this.practiceMessage}
                     </p>
-- 
cgit v1.2.3-70-g09d2