jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-886: changes to get scrolling animation working right

Browse source
This commit is contained in:
Adam Caouette 2023-04-26 14:29:27 -04:00
parent 603be6d206
commit 8af6ec853d
1 changed files with 124 additions and 384 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

508
src/digital-components/date-picker/date-picker.vue
View file

@ -1,70 +1,69 @@
<template> <template>
<div v-if="months" class="date-picker text-center" :class="calendarViewDirection"> <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">selectableDatesData: {{ selectableDatesData }}</p> --> <!-- <p style="text-align: left">months: {{ months }}</p> -->
<!-- <p style="text-align: left">months: {{ months }}</p> --> <fieldset id="date-picker-fieldset" ref="datePickerFieldset">
<fieldset id="date-picker-fieldset" ref="datePickerFieldset"> <legend class="sr-only">Date Picker</legend>
<legend class="sr-only">Date Picker</legend> <!-- <h4 id="tracker" ref="tracker">currentScrollTop: {{ currentScrollTop }}</h4> -->
<!-- <h4 id="tracker" ref="tracker">currentScrollTop: {{ currentScrollTop }}</h4> --> <div
<div v-for="month in months"
v-for="month in months" :key="`${month.monthLabel}-${month.yearNum?.toString()}`"
:key="`${month.monthLabel}-${month.yearNum?.toString()}`" :id="`${month.monthLabel}-${month.yearNum?.toString()}`"
:id="`${month.monthLabel}-${month.yearNum?.toString()}`" class="calendar-grid-container position-relative"
class="calendar-grid-container position-relative" :class="[
:class="[ isInitialView === true ? 'initial-view' : '',
isInitialView === true ? 'initial-view' : '', month.monthClass,
month.monthClass, isAddingNewMonth === true ? 'is-adding-new-month' : '',
isAddingNewMonth === true ? 'is-adding-new-month' : '', ]">
]"> <div class="month-year body-small d-flex align-items-center small">
<div class="month-year body-small d-flex align-items-center small"> {{ month.monthLabel }} {{ month.yearNum?.toString() }}
{{ month.monthLabel }} {{ month.yearNum?.toString() }} </div>
</div> <div
<div v-if="calendarViewDirection === 'future'"
v-if="calendarViewDirection === 'future'" class="legend caption d-flex align-items-center justify-content-end">
class="legend caption d-flex align-items-center justify-content-end"> <span class="legend-circle me-1"></span> &equals; Available
<span class="legend-circle me-1"></span> &equals; Available </div>
</div> <div class="separator-line"></div>
<div class="separator-line"></div> <div class="nav-back ps-3"><button></button></div>
<div class="nav-back ps-3"><button></button></div> <div class="nav-forward pe-3"><button></button></div>
<div class="nav-forward pe-3"><button></button></div> <!-- Do the days of the weeek need to be read? -->
<!-- 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">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">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">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">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">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">Friday</span>F</div> <div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
<div class="grid-item caption"><span class="sr-only">Saturday</span>S</div> <div
<div v-for="date in month.dates"
v-for="date in month.dates" :key="`${month.monthLabel}-${date.dateNum.toString()}-${months.length}`"
:key="`${month.monthLabel}-${date.dateNum.toString()}-${months.length}`" class="grid-item radio-wrapper"
class="grid-item radio-wrapper" :class="[
:class="[ date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '', date.dayClasses,
date.dayClasses, ]">
]"> <input
<input :disabled="!isSelectableDate(date.inputValue)"
:disabled="!isSelectableDate(date.inputValue)" type="radio"
type="radio" name="day-of-month"
name="day-of-month" v-model="selectedDate"
v-model="selectedDate" :value="date.inputValue"
:value="date.inputValue" :id="`${month.monthLabel}-${date.dateNum.toString()}`" />
:id="`${month.monthLabel}-${date.dateNum.toString()}`" /> <label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
<label :for="`${month.monthLabel}-${date.dateNum.toString()}`"> <span>{{ date.dateNum.toString() }}</span>
<span>{{ date.dateNum.toString() }}</span> </label>
</label> </div>
</div> </div>
</div> <div id="bottom-spacer"></div>
<!-- <div id="bottom-spacer"></div> --> </fieldset>
</fieldset> <button
<button v-if="calendarViewDirection === 'future'"
v-if="calendarViewDirection === 'future'" type="button"
type="button" class="btn btn-link"
class="btn btn-link" @click="goForward">
@click="goForward"> View more dates
View more dates </button>
</button> </div>
</div>
</template> </template>
<script> <script>
@ -80,7 +79,6 @@ export default {
name: "datePicker", name: "datePicker",
data() { data() {
return { return {
// calendarData: [],
monthsBeforeToLoadOffset: 0, monthsBeforeToLoadOffset: 0,
monthsAfterToLoadOffset: 12, monthsAfterToLoadOffset: 12,
selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based) selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
@ -88,19 +86,14 @@ export default {
initialViewRowsToShow: 5, initialViewRowsToShow: 5,
initialViewRowsTally: 0, initialViewRowsTally: 0,
isAddingNewMonth: false, isAddingNewMonth: false,
savedHeight: 0,
newestMonthId: "",
currentScrollTop: 0, currentScrollTop: 0,
months: null, // NEW months: null,
}; };
}, },
mounted() { mounted() {
this.setCalendarData(); this.setCalendarData();
// this.$nextTick(() => { // this.trackScrollTop(); // TODO - THIS FUNCTION IS TEMPORARY; REMOVE WHEN SCROLLING WORK IS DONE
this.trackScrollTop();
// });
}, },
props: { props: {
@ -114,18 +107,14 @@ export default {
modelValue: { modelValue: {
type: Object, type: Object,
}, },
// selectableDates: {
// type: Array,
// },
todayOverrideDateString: { todayOverrideDateString: {
// only used for unit tests to override today's date // keep for use in unit tests to override today's date
type: String, type: String,
default: null, default: null,
}, },
customSelectableDatesCallback: { customSelectableDatesCallback: {
type: Function, type: Function,
default() { default() {
// console.log(" running default...")
return []; return [];
}, },
}, },
@ -136,13 +125,6 @@ export default {
? new Date(this.todayOverrideDateString) ? new Date(this.todayOverrideDateString)
: new Date(); : new Date();
}, },
// months() {
// if (this.calendarData?.length < 1) {
// this.setCalendarData();
// }
// console.log("( ( (( ( ()))))) MONTHS READY")
// return this.calendarData;
// },
calendarViewDirection() { calendarViewDirection() {
if (this.selectableDatesSetting === "past") return "past"; if (this.selectableDatesSetting === "past") return "past";
if (this.selectableDatesSetting === "custom") return "future"; if (this.selectableDatesSetting === "custom") return "future";
@ -158,37 +140,20 @@ export default {
}, },
}, },
methods: { methods: {
// setMonths() { /// NEW, ONLY RUN ON MOUNTED? // trackScrollTop() { // TODO - THIS FUNCTION IS TEMPORARY; REMOVE WHEN SCROLLING WORK IS DONE
// if (this.months?.length < 1) { // DO I NEED THIS CHECK, IF ONLY TRIGGERED WITH MOUNTED HOOK NOW? // setInterval(() => {
// this.setCalendarData(); // this.currentScrollTop = this.$refs.datePickerFieldset?.scrollTop.toString();
// } // }, 250);
// // this.months = this.calendarData;
// }, // },
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) { scrollToElement(elementId, speed, easing) {
const TIMINGFUNC_MAP = { const TIMINGFUNC_MAP = {
"linear": t => t, linear: (t) => t,
"ease-in": t => t * t, "ease-in": (t) => t * t,
"ease-out": t => t * ( 2 - t ), "ease-out": (t) => t * (2 - t),
"ease-in-out": t => ( t < .5 ? 2 * t * t : -1 + ( 4 - 2 * t ) * t ) "ease-in-out": (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
}; };
const BUFFER_OFFSET = 10; 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 initY = wrapper.scrollTop;
const wrapperRect = wrapper.getBoundingClientRect(); const wrapperRect = wrapper.getBoundingClientRect();
// console.log("wrapperRect: ", wrapperRect) // console.log("wrapperRect: ", wrapperRect)
@ -197,18 +162,17 @@ export default {
const targetY = targetRect.top - wrapperRect.top - BUFFER_OFFSET; const targetY = targetRect.top - wrapperRect.top - BUFFER_OFFSET;
// console.log("targetY: ", targetY) // console.log("targetY: ", targetY)
const timingFunc = TIMINGFUNC_MAP[timingName];
const timingFunc = TIMINGFUNC_MAP[ timingName ];
let start = null; let start = null;
const step = ( timestamp ) => { const step = (timestamp) => {
start = start || timestamp; start = start || timestamp;
const progress = timestamp - start, const progress = timestamp - start,
// Growing from 0 to 1 // 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 distanceToGo = targetY; // 592 is the goal for June-2023 targetY
let thisDistance = percentageNew * distanceToGo; let thisDistance = percentageNew * distanceToGo;
@ -218,15 +182,14 @@ export default {
// console.log(" ", progress.toFixed(2), " - thisDistance: ", thisDistance.toFixed(2)) // console.log(" ", progress.toFixed(2), " - thisDistance: ", thisDistance.toFixed(2))
// console.log(" ") // console.log(" ")
wrapper.scrollTo( 0, initY + thisDistance ); wrapper.scrollTo(0, initY + thisDistance);
if (percentageNew < 1) {
if ( percentageNew < 1 ) { window.requestAnimationFrame(step);
window.requestAnimationFrame( step );
} }
}; };
window.requestAnimationFrame( step ); window.requestAnimationFrame(step);
} }
// scrollTopSmooth( window.scrollY, 300, "ease-in-out" ); // scrollTopSmooth( window.scrollY, 300, "ease-in-out" );
@ -237,176 +200,25 @@ export default {
// get Target // get Target
let targetMonth = document.getElementById(elementId); 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() { goForward() {
const fieldset = document.querySelector("#date-picker-fieldset"); const fieldset = document.querySelector("#date-picker-fieldset");
if (this.isInitialView) { if (this.isInitialView) {
const monthToScrollTo = document.querySelector(
const monthToScrollTo = document.querySelector(".initial-view:not(.current-month):not(.month-hidden)"); ".initial-view:not(.current-month):not(.month-hidden)"
);
// console.log(" monthToScrollTo.id ", monthToScrollTo.id) // console.log(" monthToScrollTo.id ", monthToScrollTo.id)
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(() => { 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); this.scrollToElement(monthToScrollTo.id);
// fieldset.scrollTop = 211;
}, 0.01); }, 0.01);
}); });
this.isInitialView = false; // 1st click removes hidden styling this.isInitialView = false; // 1st click removes hidden styling
} else { } 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 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() { async setCalendarData() {
@ -495,14 +307,16 @@ export default {
} }
const todayDayIndex = this.todayDate.getDay(); // get day of week index of today (0-6) 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 const monthEndDate = new Date(yearNum, monthIndex + 1, 0); // BOTH
let monthEndDateNum = monthEndDate.getDate(); // BOTH let monthEndDateNum = monthEndDate.getDate(); // BOTH
currentWeekEndDateNum = todayDateNum + 6 - todayDayIndex; // PAST, aka Sat. (ok if it's larger than the month end?) currentWeekEndDateNum = todayDateNum + 6 - todayDayIndex; // PAST, aka Sat. (ok if it's larger than the month end?)
if (offset === 0 && direction === "past" && monthEndDateNum > currentWeekEndDateNum) { if (offset === 0 && direction === "past" && monthEndDateNum > currentWeekEndDateNum) {
monthEndDateNum = currentWeekEndDateNum; // PAST 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 monthStartDate = new Date(yearNum, monthIndex, monthStartDateNum); // BOTH
const startDateDayIndex = monthStartDate.getDay(); // FUTURE const startDateDayIndex = monthStartDate.getDay(); // FUTURE
const endDateDayIndex = monthEndDate.getDay(); // PAST const endDateDayIndex = monthEndDate.getDay(); // PAST
@ -555,8 +369,8 @@ export default {
if (Math.abs(offset) > 1) { if (Math.abs(offset) > 1) {
monthClass = monthClass + " month-hidden"; monthClass = monthClass + " month-hidden";
} }
} else {
} else { // TODO REMOVE THIS BLOCK? NO LONGER NEEDED? // TODO REMOVE THIS BLOCK? NO LONGER NEEDED?
monthClass = monthClass + " new-month"; monthClass = monthClass + " new-month";
} }
@ -573,24 +387,29 @@ export default {
}; };
// get available dates // get available dates
await this.updateSelectableDates(monthStart, monthEnd); // v v v v v v 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) { function forceTwoDigitString(monthNum) {
let newString = monthNum.toString(); let newString = monthNum.toString();
return (newString.length === 1) ? "0" + newString : newString; return newString.length === 1 ? "0" + newString : newString;
} }
// populate datesArray // populate datesArray
for (let i = monthStartDateNum; i <= monthEndDateNum; i++) { for (let i = monthStartDateNum; i <= monthEndDateNum; i++) {
let dayClasses = ""; let dayClasses = "";
const thisDate = { const thisDate = {
// NOTE: uses monthNum (1-based), NOT monthIndex (0-based) // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
year: yearNum, year: yearNum,
month: monthIndex + 1, month: monthIndex + 1,
date: i, date: i,
dateString: yearNum.toString() + "-" + forceTwoDigitString(monthIndex + 1) + "-" + forceTwoDigitString(i), dateString:
yearNum.toString() +
"-" +
forceTwoDigitString(monthIndex + 1) +
"-" +
forceTwoDigitString(i),
}; };
let isSelectableDate = this.isSelectableDate(thisDate); let isSelectableDate = this.isSelectableDate(thisDate);
if (offset === 0 && i === todayDateNum) { if (offset === 0 && i === todayDateNum) {
@ -612,12 +431,7 @@ export default {
// console.log(" ! ! ! FOUND ONE! A SELECTABLE DATE ! ! ! ! ") // console.log(" ! ! ! FOUND ONE! A SELECTABLE DATE ! ! ! ! ")
dayClasses += " selectable-day"; dayClasses += " selectable-day";
} }
// // TEMP CHECK
// if (offset === 0 && todayDateNum === 21 || offset === 0 && todayDateNum === 26) {
// console.log("dayClasses are: ", dayClasses)
// }
// =====
const dateObject = { const dateObject = {
dateNum: i, dateNum: i,
dayClasses: dayClasses, dayClasses: dayClasses,
@ -638,26 +452,27 @@ export default {
// TODO: CHANGE NAME OF MONTH AND DATE's "___String" to "_____Id"; it's better // 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; return monthToAdd;
}, },
async showAnotherMonth() { async showAnotherMonth() {
let monthToShow; let monthToShow;
if (this.calendarViewDirection === "future") { 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") { if (this.calendarViewDirection === "past") {
// TODO: UPDATE THIS WITH CORRECT PAST LOOKING LOGIC // 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 // 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", ""); monthToShow.monthClass = monthToShow.monthClass.replace(" month-hidden", "");
@ -669,36 +484,19 @@ export default {
this.scrollToElement(monthToShow.monthString); this.scrollToElement(monthToShow.monthString);
}, 0.01); }, 0.01);
}); });
}, },
isSelectableDate(thisDate) { isSelectableDate(thisDate) {
const testForDate = (dateInArray) => { const testForDate = (dateInArray) => {
// console.log(" running isSelectableDate/testForDate... thisDate.month: ", thisDate.month, " / thisDate.date: ", thisDate.date) // 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) // console.log(" running isSelectableDate/testForDate... dateInArray.month: ", dateInArray.month, " / dateInArray.date: ", dateInArray.date)
// debugger; // eslint-disable-line no-debugger // debugger; // eslint-disable-line no-debugger
return ( return dateInArray.dateString === thisDate.dateString;
dateInArray.dateString === thisDate.dateString
);
}; };
// function testForDateNEW(dateInArray) { const isSelectable =
this.selectableDatesData.findIndex(testForDate) > -1 ? true : false;
// console.log(" running isSelectableDate/testForDate... thisDate.month: ", thisDate.month, " / thisDate.date: ", thisDate.date) // debugger; // eslint-disable-line no-debugger
// console.log(" running isSelectableDate/testForDate... dateInArray.month: ", dateInArray.month, " / dateInArray.date: ", dateInArray.date) // console.log("running isSelectableDate... thisDate: ", thisDate, " / isSelectable: ", isSelectable)
// // 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)
return isSelectable; return isSelectable;
}, },
@ -719,10 +517,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.hidden-for-real {
visibility: hidden !important;
max-height: 0 !important;
}
#tracker { #tracker {
position: absolute; position: absolute;
top: 5px; top: 5px;
@ -735,63 +530,18 @@ export default {
text-align: left; text-align: left;
padding: 5px; padding: 5px;
// display: none; display: none;
} }
.date-picker { .date-picker {
// == ATTEMPT 3 // == ATTEMPT 3
overflow: hidden; overflow: hidden;
max-height: 62vh; // max-height: 60vh; max-height: 60vh; // IS THIS NEEDED EVEN?
position: relative; 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 { fieldset {
// == ATTEMPT 3
//overflow-y: auto;
overflow-y: scroll; overflow-y: scroll;
height: 54vh; // 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;
}
} }
.calendar-grid-container { .calendar-grid-container {
margin: 0 auto 2rem auto; margin: 0 auto 2rem auto;
@ -806,8 +556,6 @@ export default {
align-items: center; align-items: center;
padding: 0 0.75rem; padding: 0 0.75rem;
// background: url("https://i.imgur.com/ncwmc2l.png") repeat;
.grid-item { .grid-item {
text-align: center; text-align: center;
margin: 10px 3px; margin: 10px 3px;
@ -872,7 +620,6 @@ export default {
height: 2rem; height: 2rem;
opacity: 1; opacity: 1;
transition: ease all 250ms; transition: ease all 250ms;
// transition: ease all 1250ms;
input[type="radio"] { input[type="radio"] {
position: absolute; //override bootstrap position: absolute; //override bootstrap
@ -1096,24 +843,17 @@ export default {
} }
} }
.new-month { .new-month {
// max-height: 550px;
opacity: 1; opacity: 1;
// background: lime !important;
} }
} }
.btn-link { .btn-link {
// == ATTEMPT 3
display: block; display: block;
position: relative; position: relative;
height: 3rem; height: 3rem;
// display: flex;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
background: transparent; background: transparent;
border: none; border: none;
// position: absolute;
// bottom: 2rem;
font-weight: 500; font-weight: 500;
text-underline-offset: 4px; text-underline-offset: 4px;
z-index: 2; z-index: 2;