From 8af6ec853d236bfe85df8ba5c173d20507ad1e17 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 26 Apr 2023 14:29:27 -0400
Subject: [PATCH] CSR-886: changes to get scrolling animation working right

---
 .../date-picker/date-picker.vue               | 508 +++++-------------
 1 file changed, 124 insertions(+), 384 deletions(-)

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 25819761a..6e775dfde 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -1,70 +1,69 @@
 <template>
-        <div v-if="months" class="date-picker text-center" :class="calendarViewDirection">
-            <!-- <p style="text-align: left">savedHeight: {{ savedHeight }}</p> -->
-            <!-- <p style="text-align: left">selectableDatesData: {{ selectableDatesData }}</p> -->
-            <!-- <p style="text-align: left">months: {{ months }}</p> -->
-            <fieldset id="date-picker-fieldset" ref="datePickerFieldset">
-                <legend class="sr-only">Date Picker</legend>
-                <!-- <h4 id="tracker" ref="tracker">currentScrollTop: {{ currentScrollTop }}</h4> -->
-                    <div
-                        v-for="month in months"
-                        :key="`${month.monthLabel}-${month.yearNum?.toString()}`"
-                        :id="`${month.monthLabel}-${month.yearNum?.toString()}`"
-                        class="calendar-grid-container position-relative"
-                        :class="[
-                            isInitialView === true ? 'initial-view' : '',
-                            month.monthClass,
-                            isAddingNewMonth === true ? 'is-adding-new-month' : '',
-                        ]">
-                        <div class="month-year body-small d-flex align-items-center small">
-                            {{ month.monthLabel }} {{ month.yearNum?.toString() }}
-                        </div>
-                        <div
-                            v-if="calendarViewDirection === 'future'"
-                            class="legend caption d-flex align-items-center justify-content-end">
-                            <span class="legend-circle me-1"></span> &equals; Available
-                        </div>
-                        <div class="separator-line"></div>
-                        <div class="nav-back ps-3"><button></button></div>
-                        <div class="nav-forward pe-3"><button></button></div>
-                        <!-- Do the days of the weeek need to be read? -->
-                        <div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
-                        <div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
-                        <div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
-                        <div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
-                        <div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
-                        <div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
-                        <div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
-                        <div
-                            v-for="date in month.dates"
-                            :key="`${month.monthLabel}-${date.dateNum.toString()}-${months.length}`"
-                            class="grid-item radio-wrapper"
-                            :class="[
-                                date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
-                                date.dayClasses,
-                            ]">
-                            <input
-                                :disabled="!isSelectableDate(date.inputValue)"
-                                type="radio"
-                                name="day-of-month"
-                                v-model="selectedDate"
-                                :value="date.inputValue"
-                                :id="`${month.monthLabel}-${date.dateNum.toString()}`" />
-                            <label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
-                                <span>{{ date.dateNum.toString() }}</span>
-                            </label>
-                        </div>
-                    </div>
-                <!-- <div id="bottom-spacer"></div> -->
-            </fieldset>
-            <button
-                v-if="calendarViewDirection === 'future'"
-                type="button"
-                class="btn btn-link"
-                @click="goForward">
-                View more dates
-            </button>
-        </div>
+    <div v-if="months" class="date-picker text-center" :class="calendarViewDirection">
+        <!-- <p style="text-align: left">selectableDatesData: {{ selectableDatesData }}</p> -->
+        <!-- <p style="text-align: left">months: {{ months }}</p> -->
+        <fieldset id="date-picker-fieldset" ref="datePickerFieldset">
+            <legend class="sr-only">Date Picker</legend>
+            <!-- <h4 id="tracker" ref="tracker">currentScrollTop: {{ currentScrollTop }}</h4> -->
+            <div
+                v-for="month in months"
+                :key="`${month.monthLabel}-${month.yearNum?.toString()}`"
+                :id="`${month.monthLabel}-${month.yearNum?.toString()}`"
+                class="calendar-grid-container position-relative"
+                :class="[
+                    isInitialView === true ? 'initial-view' : '',
+                    month.monthClass,
+                    isAddingNewMonth === true ? 'is-adding-new-month' : '',
+                ]">
+                <div class="month-year body-small d-flex align-items-center small">
+                    {{ month.monthLabel }} {{ month.yearNum?.toString() }}
+                </div>
+                <div
+                    v-if="calendarViewDirection === 'future'"
+                    class="legend caption d-flex align-items-center justify-content-end">
+                    <span class="legend-circle me-1"></span> &equals; Available
+                </div>
+                <div class="separator-line"></div>
+                <div class="nav-back ps-3"><button></button></div>
+                <div class="nav-forward pe-3"><button></button></div>
+                <!-- Do the days of the weeek need to be read? -->
+                <div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
+                <div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
+                <div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
+                <div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
+                <div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
+                <div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
+                <div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
+                <div
+                    v-for="date in month.dates"
+                    :key="`${month.monthLabel}-${date.dateNum.toString()}-${months.length}`"
+                    class="grid-item radio-wrapper"
+                    :class="[
+                        date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
+                        date.dayClasses,
+                    ]">
+                    <input
+                        :disabled="!isSelectableDate(date.inputValue)"
+                        type="radio"
+                        name="day-of-month"
+                        v-model="selectedDate"
+                        :value="date.inputValue"
+                        :id="`${month.monthLabel}-${date.dateNum.toString()}`" />
+                    <label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
+                        <span>{{ date.dateNum.toString() }}</span>
+                    </label>
+                </div>
+            </div>
+            <div id="bottom-spacer"></div>
+        </fieldset>
+        <button
+            v-if="calendarViewDirection === 'future'"
+            type="button"
+            class="btn btn-link"
+            @click="goForward">
+            View more dates
+        </button>
+    </div>
 </template>
 
 <script>
@@ -80,7 +79,6 @@ export default {
     name: "datePicker",
     data() {
         return {
-            // calendarData: [],
             monthsBeforeToLoadOffset: 0,
             monthsAfterToLoadOffset: 12,
             selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
@@ -88,19 +86,14 @@ export default {
             initialViewRowsToShow: 5,
             initialViewRowsTally: 0,
             isAddingNewMonth: false,
-
-            savedHeight: 0,
-            newestMonthId: "",
             currentScrollTop: 0,
-            months: null, // NEW
+            months: null,
         };
     },
 
     mounted() {
         this.setCalendarData();
-        // this.$nextTick(() => {
-            this.trackScrollTop();
-        // });
+        // this.trackScrollTop();  // TODO - THIS FUNCTION IS TEMPORARY; REMOVE WHEN SCROLLING WORK IS DONE
     },
 
     props: {
@@ -114,18 +107,14 @@ export default {
         modelValue: {
             type: Object,
         },
-        // selectableDates: {
-        //     type: Array,
-        // },
         todayOverrideDateString: {
-            // only used for unit tests to override today's date
+            // keep for use in unit tests to override today's date
             type: String,
             default: null,
         },
         customSelectableDatesCallback: {
             type: Function,
             default() {
-                // console.log(" running default...")
                 return [];
             },
         },
@@ -136,13 +125,6 @@ export default {
                 ? new Date(this.todayOverrideDateString)
                 : new Date();
         },
-        // months() {
-        //     if (this.calendarData?.length < 1) {
-        //         this.setCalendarData();
-        //     }
-        //     console.log("( ( (( ( ())))))   MONTHS READY")
-        //     return this.calendarData;
-        // },
         calendarViewDirection() {
             if (this.selectableDatesSetting === "past") return "past";
             if (this.selectableDatesSetting === "custom") return "future";
@@ -158,37 +140,20 @@ export default {
         },
     },
     methods: {
-        // setMonths() { /// NEW, ONLY RUN ON MOUNTED?
-        //     if (this.months?.length < 1) { // DO I NEED THIS CHECK, IF ONLY TRIGGERED WITH MOUNTED HOOK NOW?
-        //         this.setCalendarData();
-        //     }
-        //     // this.months = this.calendarData;
+        // trackScrollTop() { // TODO - THIS FUNCTION IS TEMPORARY; REMOVE WHEN SCROLLING WORK IS DONE
+        //     setInterval(() => {
+        //         this.currentScrollTop = this.$refs.datePickerFieldset?.scrollTop.toString();
+        //     }, 250);
         // },
-        trackScrollTop() {
-
-            // this.$nextTick(() => {
-            //     setTimeout(() => {
-            //         // const outputSlot = document.querySelector("#tracker");
-            //         // const fieldset = document.querySelector("#date-picker-fieldset");
-            //         // console.log("fieldset: ", fieldset)
-
-                    setInterval(() => {
-                        this.currentScrollTop = this.$refs.datePickerFieldset?.scrollTop.toString();
-                    }, 250);
-            //     }, 500);
-            // });
-            
-            
-        },
         scrollToElement(elementId, speed, easing) {
             const TIMINGFUNC_MAP = {
-                "linear": t => t,
-                "ease-in": t => t * t,
-                "ease-out": t => t * ( 2 - t ),
-                "ease-in-out": t => ( t < .5 ? 2 * t * t : -1 + ( 4 - 2 * t ) * t )
+                linear: (t) => t,
+                "ease-in": (t) => t * t,
+                "ease-out": (t) => t * (2 - t),
+                "ease-in-out": (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
             };
             const BUFFER_OFFSET = 10;
-            function scrollTopSmooth( wrapper, target, duration = 300, timingName = "linear" ) { 
+            function scrollTopSmooth(wrapper, target, duration = 300, timingName = "linear") {
                 const initY = wrapper.scrollTop;
                 const wrapperRect = wrapper.getBoundingClientRect();
                 // console.log("wrapperRect: ", wrapperRect)
@@ -197,18 +162,17 @@ export default {
                 const targetY = targetRect.top - wrapperRect.top - BUFFER_OFFSET;
                 // console.log("targetY: ", targetY)
 
-
-                const timingFunc = TIMINGFUNC_MAP[ timingName ];
+                const timingFunc = TIMINGFUNC_MAP[timingName];
 
                 let start = null;
 
-                const step = ( timestamp ) => {
+                const step = (timestamp) => {
                     start = start || timestamp;
                     const progress = timestamp - start,
                         // Growing from 0 to 1
-                        time = Math.min( 1, ( ( timestamp - start ) / duration ) );
+                        time = Math.min(1, (timestamp - start) / duration);
 
-                    let percentageNew = timingFunc( time );
+                    let percentageNew = timingFunc(time);
                     let distanceToGo = targetY; // 592 is the goal for June-2023 targetY
                     let thisDistance = percentageNew * distanceToGo;
 
@@ -218,15 +182,14 @@ export default {
                     // console.log("               ", progress.toFixed(2), " - thisDistance: ", thisDistance.toFixed(2))
                     // console.log(" ")
 
-                    wrapper.scrollTo( 0, initY + thisDistance );
+                    wrapper.scrollTo(0, initY + thisDistance);
 
-
-                    if ( percentageNew < 1 ) {
-                        window.requestAnimationFrame( step );
+                    if (percentageNew < 1) {
+                        window.requestAnimationFrame(step);
                     }
                 };
 
-                window.requestAnimationFrame( step );  
+                window.requestAnimationFrame(step);
             }
 
             // scrollTopSmooth( window.scrollY, 300, "ease-in-out" );
@@ -237,176 +200,25 @@ export default {
             // get Target
             let targetMonth = document.getElementById(elementId);
 
-            scrollTopSmooth( wrapper, targetMonth, 800, "ease-in-out" );
-
+            scrollTopSmooth(wrapper, targetMonth, 800, "ease-in-out");
         },
-        // scrollToElementOLD(elementId, speed, easing) {
-        //     const wrapper = document.getElementById("date-picker-fieldset");
-        //     const element = document.getElementById(elementId);
-        //     const elementRect = element.getBoundingClientRect();
-        //     const wrapperRect = wrapper.getBoundingClientRect();
-        //     const offset = elementRect.top - (wrapperRect.top + 200);
-        //     const distance = Math.abs(offset);
-        //     const duration = distance / speed;
-        //     const easingFactor = easing || 1;
-        //     const easingFunction = (t) => Math.pow(t, easingFactor);
-
-        //     // console.log("elementRect: ", elementRect);
-        //     // console.log("wrapperRect: ", wrapperRect);
-        //     // console.log("offset: ", offset);
-        //     // console.log("distance: ", distance);
-        //     // console.log("duration: ", duration);
-
-        //     let start = null;
-
-        //     function step(timestamp) {
-        //         if (!start) start = timestamp;
-        //         const progress = timestamp - start;
-        //         const prePercentage = progress / duration;
-        //         // console.log("progress / duration: ", prePercentage);
-        //         const percentage = Math.min(progress / duration, 1);
-        //         const distanceToMove = easingFunction(percentage) * distance;
-        //         // console.log(
-        //         //     "progress / percentage / distanceToMove: ",
-        //         //     progress,
-        //         //     " / ",
-        //         //     percentage,
-        //         //     " / ",
-        //         //     distanceToMove
-        //         // );
-        //         // debugger; // eslint-disable-line no-debugger
-        //         wrapper.scrollTop += offset > 0 ? distanceToMove : -distanceToMove;
-        //         if (percentage < 1) {
-        //             setTimeout(() => {
-        //                 window.requestAnimationFrame(step);
-        //             }, 50); // slowing it down a bit, less calculations, less smooth
-        //             // window.requestAnimationFrame(step);
-        //         }
-        //     }
-
-        //     window.requestAnimationFrame(step);
-
-        //     const elementRectEnd = element.getBoundingClientRect();
-        //     const wrapperRectEnd = wrapper.getBoundingClientRect();
-
-        //     // console.log("elementRectEnd: ", elementRectEnd);
-        //     // console.log("wrapperRectEnd: ", wrapperRectEnd);
-        // },
-        // scrollToElementOLD2(elementId, speed, easing) {
-        //     const TIMINGFUNC_MAP = {
-        //         "linear": t => t,
-        //         "ease-in": t => t * t,
-        //         "ease-out": t => t * ( 2 - t ),
-        //         "ease-in-out": t => ( t < .5 ? 2 * t * t : -1 + ( 4 - 2 * t ) * t )
-        //     };
-        //     function scrollTopSmooth( el, duration = 300, timingName = "linear" ) { 
-        //         const initY = el.scrollTop;
-        //         const timingFunc = TIMINGFUNC_MAP[ timingName ];
-        //         let start = null;
-
-        //         const step = ( timestamp ) => {
-        //             start = start || timestamp;
-        //             const progress = timestamp - start,
-        //                 // Growing from 0 to 1
-        //                 time = Math.min( 1, ( ( timestamp - start ) / duration ) );
-
-        //             console.log(" ", progress.toFixed(2), " - initY: ", initY.toFixed(2))
-        //             console.log("    ", progress.toFixed(2), " - calc1: ", ( timingFunc( time ) ).toFixed(2))
-        //             console.log("       ", progress.toFixed(2), " - calc2: ", ( timingFunc( time ) * initY ).toFixed(2))
-        //             console.log("          ", progress.toFixed(2), " - scrollTo: ", (initY + ( timingFunc( time ) * initY )).toFixed(2))
-        //             console.log(" ")
-
-        //             el.scrollTo( 0, initY - ( timingFunc( time ) * initY ) );
-
-        //             if ( progress < duration ) {
-        //                 window.requestAnimationFrame( step );
-        //             }
-        //         };
-
-        //         window.requestAnimationFrame( step );  
-        //     }
-
-        //     // scrollTopSmooth( window.scrollY, 300, "ease-in-out" );
-
-        //     // const wrapper = document.getElementById("date-picker-fieldset");
-        //     const wrapper = this.$refs.datePickerFieldset;
-        //     console.log("wrapper.scrollTop: ", wrapper.scrollTop)
-        //     scrollTopSmooth( wrapper, 300, "ease-in-out" );
-        //     // go from: 211 to 592
-
-        //     // function scrollTest() {
-        //     //     wrapper.scrollTo( 0, (wrapper.scrollTop + 20) )
-        //     //     setTimeout(() => {
-        //     //         if (wrapper.scrollTop < 592) {
-        //     //             scrollTest();
-        //     //         }
-        //     //     }, 100);
-        //     // }
-        //     // scrollTest();
-
-        // },
         goForward() {
             const fieldset = document.querySelector("#date-picker-fieldset");
 
             if (this.isInitialView) {
-
-                const monthToScrollTo = document.querySelector(".initial-view:not(.current-month):not(.month-hidden)");
+                const monthToScrollTo = document.querySelector(
+                    ".initial-view:not(.current-month):not(.month-hidden)"
+                );
                 // console.log(" monthToScrollTo.id ", monthToScrollTo.id)
 
                 this.$nextTick(() => {
                     setTimeout(() => {
-                        // document.querySelector("#April-2023")?.scrollIntoView({ behavior: "smooth" });
-
-                        // const targ = document.querySelector("#April-2023").getBoundingClientRect();
-                        // const fs = document.querySelector("fieldset");
-                        // // targ.top is number to scroll to
-                        // fs.scrollBy({
-                        //     top: 100,
-                        //     behavior: "smooth",
-                        // });
-                        // write a javascript function that will get the y value of element firstThing and slowly scroll it in the parent element Wrapper so the top of firstThing is at the top of the Wrapper. Allow a parameter to control speed of the scrolling movement.
-
                         this.scrollToElement(monthToScrollTo.id);
-                        // fieldset.scrollTop = 211;
                     }, 0.01);
                 });
                 this.isInitialView = false; // 1st click removes hidden styling
-                
             } else {
-                // ====== GET CURRENT COORDINATES ==========
-
-                // fieldset.classList.add("crazy");
-
-                // this.savedHeight = fieldset.scrollTop;
-                // console.log("this.savedHeight is: ", this.savedHeight);
-                // =================================
-
                 this.showAnotherMonth(); // 2nd click adds 1 month data
-
-                // ====== RESTORE COORDINATES ==========
-
-                // this.$nextTick(() => {
-                //     // console.log("AFTER 1 fieldset.scrollTop: ", fieldset.scrollTop);
-                //     fieldset.scrollTop = this.savedHeight;
-                //     fieldset.classList.remove("crazy");
-                //     console.log(" BEFORE ANIMATION, this.savedHeight is: ", this.savedHeight)
-                //     console.log(" BEFORE ANIMATION, fieldset.scrollTop is: ", fieldset.scrollTop)
-                //     this.scrollToElement(this.newestMonthId, 0.5, 2);
-                // });
-
-                
-                // debugger; // eslint-disable-line no-debugger
-                //  this.$nextTick(() => {
-                //     this.scrollToElement(this.newestMonthId, 0.5, 0.5);
-                // });
-
-                // this.$nextTick(() => {
-                //     setTimeout(() => {
-                //         this.scrollToElement(this.newestMonthId, 0.1, 2);
-                //     }, 500);
-                // });
-
-                // =================================
             }
         },
         async setCalendarData() {
@@ -495,14 +307,16 @@ export default {
             }
 
             const todayDayIndex = this.todayDate.getDay(); // get day of week index of today (0-6)
-            currentWeekStartDateNum = todayDayIndex > todayDateNum ? 1 : todayDateNum - todayDayIndex; // FUTURE
+            currentWeekStartDateNum =
+                todayDayIndex > todayDateNum ? 1 : todayDateNum - todayDayIndex; // FUTURE
             const monthEndDate = new Date(yearNum, monthIndex + 1, 0); // BOTH
             let monthEndDateNum = monthEndDate.getDate(); // BOTH
             currentWeekEndDateNum = todayDateNum + 6 - todayDayIndex; // PAST, aka Sat. (ok if it's larger than the month end?)
             if (offset === 0 && direction === "past" && monthEndDateNum > currentWeekEndDateNum) {
                 monthEndDateNum = currentWeekEndDateNum; // PAST
             }
-            const monthStartDateNum = (offset === 0 && direction === "future") ? currentWeekStartDateNum : 1; // FUTURE
+            const monthStartDateNum =
+                offset === 0 && direction === "future" ? currentWeekStartDateNum : 1; // FUTURE
             const monthStartDate = new Date(yearNum, monthIndex, monthStartDateNum); // BOTH
             const startDateDayIndex = monthStartDate.getDay(); // FUTURE
             const endDateDayIndex = monthEndDate.getDay(); // PAST
@@ -555,8 +369,8 @@ export default {
                 if (Math.abs(offset) > 1) {
                     monthClass = monthClass + " month-hidden";
                 }
-
-            } else { // TODO REMOVE THIS BLOCK? NO LONGER NEEDED?
+            } else {
+                // TODO REMOVE THIS BLOCK? NO LONGER NEEDED?
                 monthClass = monthClass + " new-month";
             }
 
@@ -573,24 +387,29 @@ export default {
                 };
                 // get available dates
                 await this.updateSelectableDates(monthStart, monthEnd); // v v v v v v
-                                // MAKE API CALL, ADDS NEW DATES TO this.selectableDatesData
+                // MAKE API CALL, ADDS NEW DATES TO this.selectableDatesData
             }
 
             function forceTwoDigitString(monthNum) {
                 let newString = monthNum.toString();
-                return (newString.length === 1) ? "0" + newString : newString;
+                return newString.length === 1 ? "0" + newString : newString;
             }
 
             // populate datesArray
             for (let i = monthStartDateNum; i <= monthEndDateNum; i++) {
                 let dayClasses = "";
-                
+
                 const thisDate = {
                     // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
                     year: yearNum,
                     month: monthIndex + 1,
                     date: i,
-                    dateString: yearNum.toString() + "-" + forceTwoDigitString(monthIndex + 1) + "-" + forceTwoDigitString(i),
+                    dateString:
+                        yearNum.toString() +
+                        "-" +
+                        forceTwoDigitString(monthIndex + 1) +
+                        "-" +
+                        forceTwoDigitString(i),
                 };
                 let isSelectableDate = this.isSelectableDate(thisDate);
                 if (offset === 0 && i === todayDateNum) {
@@ -612,12 +431,7 @@ export default {
                     // console.log("  ! ! ! FOUND ONE! A SELECTABLE DATE  ! ! ! ! ")
                     dayClasses += " selectable-day";
                 }
-                // // TEMP CHECK
-                // if (offset === 0 && todayDateNum === 21 || offset === 0 && todayDateNum === 26) {
-                //     console.log("dayClasses are:  ", dayClasses)
-                // }
 
-                // =====
                 const dateObject = {
                     dateNum: i,
                     dayClasses: dayClasses,
@@ -638,26 +452,27 @@ export default {
 
             // TODO: CHANGE NAME OF MONTH AND DATE's "___String" to "_____Id"; it's better
 
-            // debugger; // eslint-disable-line no-debugger
-
-            // console.log(" mmm mm m mm m m m      MONTH IS READY    mm m m m m  m m m mmmm m mm")
-
             return monthToAdd;
         },
         async showAnotherMonth() {
             let monthToShow;
             if (this.calendarViewDirection === "future") {
-                monthToShow = this.months.find(month => month.monthClass.includes('month-hidden'));
+                monthToShow = this.months.find((month) =>
+                    month.monthClass.includes("month-hidden")
+                );
             }
             if (this.calendarViewDirection === "past") {
                 // TODO: UPDATE THIS WITH CORRECT PAST LOOKING LOGIC
-                monthToShow = this.months.find(month => month.monthClass.includes('month-hidden'));
+                monthToShow = this.months.find((month) =>
+                    month.monthClass.includes("month-hidden")
+                );
             }
-            
-            // console.log("monthToShow: ", monthToShow)
 
             // make new API call with this month's start and end dates
-            await this.updateSelectableDates(monthToShow.dates[0].inputValue.dateString, monthToShow.dates[monthToShow.dates.length - 1].inputValue.dateString);
+            await this.updateSelectableDates(
+                monthToShow.dates[0].inputValue.dateString,
+                monthToShow.dates[monthToShow.dates.length - 1].inputValue.dateString
+            );
 
             monthToShow.monthClass = monthToShow.monthClass.replace(" month-hidden", "");
 
@@ -669,36 +484,19 @@ export default {
                     this.scrollToElement(monthToShow.monthString);
                 }, 0.01);
             });
-
         },
         isSelectableDate(thisDate) {
             const testForDate = (dateInArray) => {
-                
                 // console.log("      running isSelectableDate/testForDate...  thisDate.month: ", thisDate.month, " / thisDate.date: ", thisDate.date)
                 // console.log("              running isSelectableDate/testForDate...  dateInArray.month: ", dateInArray.month, " / dateInArray.date: ", dateInArray.date)
-                
+
                 // debugger; // eslint-disable-line no-debugger
-                return (
-                    dateInArray.dateString === thisDate.dateString
-                );
+                return dateInArray.dateString === thisDate.dateString;
             };
-            // function testForDateNEW(dateInArray) {
-                
-            //     console.log("      running isSelectableDate/testForDate...  thisDate.month: ", thisDate.month, " / thisDate.date: ", thisDate.date)
-            //     console.log("              running isSelectableDate/testForDate...  dateInArray.month: ", dateInArray.month, " / dateInArray.date: ", dateInArray.date)
-                
-            //     // debugger; // eslint-disable-line no-debugger
-            //     return (
-            //         dateInArray.date === thisDate.date &&
-            //         dateInArray.month === thisDate.month &&
-            //         dateInArray.year === thisDate.year
-            //     );
-            // }
-            const midTest = this.selectableDatesData.findIndex(testForDate);
-            // console.log("midTest ", midTest)
-            const isSelectable = (this.selectableDatesData.findIndex(testForDate)) > -1 ? true : false;
-                    // debugger; // eslint-disable-line no-debugger
-                    // console.log("running isSelectableDate...  thisDate: ", thisDate, " / isSelectable: ", isSelectable)
+            const isSelectable =
+                this.selectableDatesData.findIndex(testForDate) > -1 ? true : false;
+            // debugger; // eslint-disable-line no-debugger
+            // console.log("running isSelectableDate...  thisDate: ", thisDate, " / isSelectable: ", isSelectable)
 
             return isSelectable;
         },
@@ -719,10 +517,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.hidden-for-real {
-    visibility: hidden !important;
-    max-height: 0 !important;
-}
+
 #tracker {
     position: absolute;
     top: 5px;
@@ -735,63 +530,18 @@ export default {
     text-align: left;
     padding: 5px;
 
-    // display: none;
+    display: none;
 }
 
 .date-picker {
     // == ATTEMPT 3
     overflow: hidden;
-    max-height: 62vh; // max-height: 60vh;
+    max-height: 60vh; // IS THIS NEEDED EVEN?
     position: relative;
 
-    // == ATTEMPT 2
-    // max-height: 60vh; // TBD
-    // overflow-y: auto;
-
-    // == ATTEMPT 1
-    // position: relative;
-    // display: flex;
-    // width: 100%;
-    // flex-direction: column;
-    // height: 98vh;
-
-    // background: 0% 0%/50% 50% url("https://i.imgur.com/hlMp680.png") repeat;
-
-    // == ATTEMPT 2
-    // IS THIS AFTER EVEN NEEDED?
-    //  &:after {
-    //     content: '';
-    //     display: block;
-    //     width: 100%;
-    //     height: 200px;
-    //     background: rgba(155, 60, 125, 0.5);
-    //     position: absolute;
-    //     bottom: 0;
-    //     // background: linear-gradient(to bottom, rgba(125,185,232,0) 0%,rgba(255,255,255,1) 100%);
-
-    // }
-
     fieldset {
-        // == ATTEMPT 3
-        //overflow-y: auto;
         overflow-y: scroll;
-        height: 54vh; // height: 54vh;
-
-        // height: 9600px; // SB 600px
-
-        // outline: 2px solid red;
-
-        // overflow: auto;
-        // position: relative;
-        // padding-bottom: 1000em;
-
-        // background: 0% 0%/50% 50% url("https://i.imgur.com/MRtUeUs.png") repeat;
-
-        &.crazy {
-            overflow-y: hidden;
-            // outline: 3px dotted orange;
-            // background: orange !important;
-        }
+        height: 54vh;
     }
     .calendar-grid-container {
         margin: 0 auto 2rem auto;
@@ -806,8 +556,6 @@ export default {
         align-items: center;
         padding: 0 0.75rem;
 
-        // background: url("https://i.imgur.com/ncwmc2l.png") repeat;
-
         .grid-item {
             text-align: center;
             margin: 10px 3px;
@@ -872,7 +620,6 @@ export default {
             height: 2rem;
             opacity: 1;
             transition: ease all 250ms;
-            // transition: ease all 1250ms;
 
             input[type="radio"] {
                 position: absolute; //override bootstrap
@@ -1096,24 +843,17 @@ export default {
         }
     }
     .new-month {
-        // max-height: 550px;
         opacity: 1;
-        // background: lime !important;
     }
 }
 .btn-link {
-    // == ATTEMPT 3
     display: block;
     position: relative;
     height: 3rem;
-
-    // display: flex;
     width: 100%;
     justify-content: center;
     background: transparent;
     border: none;
-    // position: absolute;
-    // bottom: 2rem;
     font-weight: 500;
     text-underline-offset: 4px;
     z-index: 2;