diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index 26f02e4d1..45fcf2160 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -2,6 +2,7 @@
+
Date Picker @@ -11,9 +12,8 @@ :id="`${month.monthLabel}-${month.yearNum?.toString()}`" class="calendar-grid-container position-relative" :class="[ - isInitialView === true ? 'initial-view' : '', + hasPartialMonthInitialView === true ? 'partial-month-initial-view' : '', month.monthClass, - isAddingNewMonth === true ? 'is-adding-new-month' : '', ]">
{{ month.monthLabel }} {{ month.yearNum?.toString() }} @@ -74,6 +74,21 @@ const SelectableDaysOptions = Object.freeze({ PAST: "past", }); +const requiredParameter = () => { throw new Error('parameter is required'); }; + +function forceTwoDigitString(monthNum) { // TODO : MOVE THIS SOMEWHERE ELSE; A UTILITIES MIXIN? + let newString = monthNum.toString(); + return newString.length === 1 ? "0" + newString : newString; +} + +const TIMINGFUNC_MAP = { // TODO : MOVE THIS SOMEWHERE ELSE; A CONSTANT? + 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; + export default { name: "datePicker", data() { @@ -81,7 +96,7 @@ export default { monthsBeforeToLoadOffset: 0, monthsAfterToLoadOffset: 12, selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based) - isInitialView: true, + hasPartialMonthInitialView: true, initialViewRowsToShow: 5, initialViewRowsTally: 0, isAddingNewMonth: false, @@ -145,13 +160,7 @@ export default { // }, 250); // }, 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 < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t), - }; - const BUFFER_OFFSET = 10; + function scrollTopSmooth(wrapper, target, duration = 300, timingName = "linear") { const initY = wrapper.scrollTop; const wrapperRect = wrapper.getBoundingClientRect(); @@ -204,26 +213,24 @@ export default { goForward() { const fieldset = document.querySelector("#date-picker-fieldset"); - if (this.isInitialView) { + if (this.hasPartialMonthInitialView) { + const monthToScrollTo = document.querySelector( - ".initial-view:not(.current-month):not(.month-hidden)" + ".partial-month-initial-view:not(.current-month):not(.month-hidden)" ); - // console.log(" monthToScrollTo.id ", monthToScrollTo.id) this.$nextTick(() => { setTimeout(() => { this.scrollToElement(monthToScrollTo.id); }, 0.01); }); - this.isInitialView = false; // 1st click removes hidden styling + this.hasPartialMonthInitialView = false; // 1st click removes hidden styling } else { this.showAnotherMonth(); // 2nd click adds 1 month data } + }, async setCalendarData() { - // console.log(" running setCalendarData.") - // this.selectableDatesData = this.selectableDates; // POPULATE DATA FROM PROP - // GENERATE MONTHS AND PUSH THEM INTO ARRAY const months = []; if (this.calendarViewDirection === "future") { @@ -242,11 +249,9 @@ export default { // months.push(this.getMonthDataPAST(i)); // } } - // this.calendarData = months; this.months = months; - // console.log(" MONTHS are done ") }, - async getMonthData(offset) { + async getMonthData(offset = requiredParameter()) { const direction = this.calendarViewDirection; // "past" or "future" let yearNum; let monthIndex; @@ -259,55 +264,24 @@ export default { const datesArray = []; const todayDateNum = this.todayDate.getDate(); - if (typeof offset !== "undefined") { - // offset only passed during initial setup with setCalendarData - yearNum = this.todayDate.getFullYear(); - monthIndex = this.todayDate.getMonth() + offset; + yearNum = this.todayDate.getFullYear(); + monthIndex = this.todayDate.getMonth() + offset; - if (direction === "future" && offset > 0) { - while (monthIndex > 11) { - monthIndex = monthIndex - 12; - yearNum++; - } - } else if (direction === "past" && offset < 0) { - while (monthIndex < 0) { - monthIndex = 12 + monthIndex; - yearNum--; - } + if (direction === "future" && offset > 0) { + while (monthIndex > 11) { + monthIndex = monthIndex - 12; + yearNum++; } - } else { - // TODO ? I THINK THIS IS NEVER USED NOW - // used only when adding an additional month - - if (direction === "future") { - // get last day of current calendar data - const lastMonthInCalendarData = this.months[this.months.length - 1]; - - if (lastMonthInCalendarData.monthIndex === 11) { - monthIndex = 0; - yearNum = lastMonthInCalendarData.yearNum + 1; - } else { - monthIndex = lastMonthInCalendarData.monthIndex + 1; - yearNum = lastMonthInCalendarData.yearNum; - } - } - if (direction === "past") { - // get last day of current calendar data - const firstMonthInCalendarData = this.months[0]; - - if (firstMonthInCalendarData.monthIndex === 0) { - monthIndex = 11; - yearNum = firstMonthInCalendarData.yearNum - 1; - } else { - monthIndex = firstMonthInCalendarData.monthIndex - 1; - yearNum = firstMonthInCalendarData.yearNum; - } + } else if (direction === "past" && offset < 0) { + while (monthIndex < 0) { + monthIndex = 12 + monthIndex; + yearNum--; } } const todayDayIndex = this.todayDate.getDay(); // get day of week index of today (0-6) currentWeekStartDateNum = - todayDayIndex > todayDateNum ? 1 : todayDateNum - todayDayIndex; // FUTURE + 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?) @@ -320,58 +294,57 @@ export default { const startDateDayIndex = monthStartDate.getDay(); // FUTURE const endDateDayIndex = monthEndDate.getDay(); // PAST - if (typeof offset !== "undefined") { - if (offset === 0 && direction === "future") { - firstMonthDayTally = monthStartDateNum - startDateDayIndex; // FUTURE (starts low, counts up) - monthClass = monthClass + " current-month"; - } - if (offset === 0 && direction === "past") { - firstMonthDayTally = currentWeekEndDateNum; // PAST (starts high, counts down) - monthClass = monthClass + " current-month"; - } - - while ( - direction === "future" && - offset === 0 && - firstMonthDayTally <= monthEndDateNum - ) { - // FUTURE - firstMonthDayTally = firstMonthDayTally + 7; - this.initialViewRowsTally++; - } - - while ( - direction === "past" && - offset === 0 && - firstMonthDayTally >= monthStartDateNum - ) { - // PAST - firstMonthDayTally = firstMonthDayTally - 7; - this.initialViewRowsTally++; - } - - if (Math.abs(offset) === 1) { - if (this.initialViewRowsTally < this.initialViewRowsToShow) { - initialViewEndDate = 6 - startDateDayIndex + monthStartDateNum; // FUTURE - initialViewStartDate = monthEndDateNum - endDateDayIndex; // PAST - this.initialViewRowsTally++; - } else { - monthClass = monthClass + " initial-month-hidden"; - } - - while (this.initialViewRowsTally < this.initialViewRowsToShow) { - initialViewEndDate = initialViewEndDate + 7; - initialViewStartDate = initialViewStartDate - 7; - this.initialViewRowsTally++; - } - } - if (Math.abs(offset) > 1) { - monthClass = monthClass + " month-hidden"; - } - } else { - // TODO REMOVE THIS BLOCK? NO LONGER NEEDED? - monthClass = monthClass + " new-month"; + if (offset === 0 && direction === "future") { + firstMonthDayTally = monthStartDateNum - startDateDayIndex; // FUTURE (starts low, counts up) + monthClass = monthClass + " current-month"; } + if (offset === 0 && direction === "past") { + firstMonthDayTally = currentWeekEndDateNum; // PAST (starts high, counts down) + monthClass = monthClass + " current-month"; + } + + while ( + direction === "future" && + offset === 0 && + firstMonthDayTally <= monthEndDateNum + ) { + // FUTURE + firstMonthDayTally = firstMonthDayTally + 7; + this.initialViewRowsTally++; + } + + while ( + direction === "past" && + offset === 0 && + firstMonthDayTally >= monthStartDateNum + ) { + // PAST + firstMonthDayTally = firstMonthDayTally - 7; + this.initialViewRowsTally++; + } + + if (Math.abs(offset) === 1) { + if (this.initialViewRowsTally < this.initialViewRowsToShow) { // INDICATES A SPLIT-MONTH INITIAL VIEW + initialViewEndDate = 6 - startDateDayIndex + monthStartDateNum; // FUTURE + initialViewStartDate = monthEndDateNum - endDateDayIndex; // PAST + this.initialViewRowsTally++; + } else { // INDICATES AN INITIAL VIEW SHOWING ONLY ONE MONTH + // monthClass = monthClass + " initial-month-hidden"; + monthClass = monthClass + " month-hidden"; + this.hasPartialMonthInitialView = false; + } + + while (this.initialViewRowsTally < this.initialViewRowsToShow) { + initialViewEndDate = initialViewEndDate + 7; + initialViewStartDate = initialViewStartDate - 7; + this.initialViewRowsTally++; + } + } + + if (Math.abs(offset) > 1) { + monthClass = monthClass + " month-hidden"; + } + if (this.selectableDatesSetting === "custom") { const monthStart = { @@ -389,11 +362,6 @@ export default { // MAKE API CALL, ADDS NEW DATES TO this.selectableDatesData } - function forceTwoDigitString(monthNum) { - let newString = monthNum.toString(); - return newString.length === 1 ? "0" + newString : newString; - } - // populate datesArray for (let i = monthStartDateNum; i <= monthEndDateNum; i++) { let dayClasses = ""; @@ -427,7 +395,6 @@ export default { dayClasses += "day-hidden"; } if (this.selectableDatesSetting === "custom" && isSelectableDate) { - // console.log(" ! ! ! FOUND ONE! A SELECTABLE DATE ! ! ! ! ") dayClasses += " selectable-day"; } @@ -436,6 +403,7 @@ export default { dayClasses: dayClasses, inputValue: thisDate, }; + // console.log("dateObject: ", dateObject) datesArray.push(dateObject); } @@ -466,6 +434,7 @@ export default { month.monthClass.includes("month-hidden") ); } + // console.log("monthToShow: ", monthToShow); // make new API call with this month's start and end dates await this.updateSelectableDates( @@ -532,9 +501,7 @@ export default { } .date-picker { - // == ATTEMPT 3 overflow: hidden; - //max-height: 60vh; // IS THIS NEEDED EVEN? position: relative; height: 100%; @@ -545,9 +512,6 @@ export default { .calendar-grid-container { margin: 0 auto 2rem auto; max-width: 414px; - //max-height: 500px; - //overflow: hidden; - // transition: all ease 1s; transition: height ease 2s, opacity ease 2s; display: grid; grid-template-columns: repeat(7, 1fr); @@ -751,25 +715,14 @@ export default { } } - &.initial-view { - &.initial-month-hidden { - visibility: hidden; - max-height: 0; - } + &.partial-month-initial-view { .day-hidden { opacity: 0; - // height: 0; overflow: hidden; display: flex; margin: 0; } } - &.is-adding-new-month { - &.new-month { - // max-height: 0; - opacity: 0; - } - } &.month-hidden { opacity: 0; max-height: 0; @@ -844,9 +797,6 @@ export default { } } } - .new-month { - opacity: 1; - } } .btn-link { display: block;