CSR-886: 1st round refactoring/cleanup; focused on scrolling anim
This commit is contained in:
Adam Caouette
parent
4e87b2fd9f
commit
cfb4c73927
1 changed files with 89 additions and 139 deletions
|
|
@ -2,6 +2,7 @@
|
|||
<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> -->
|
||||
<!-- <p style="text-align: left">hasPartialMonthInitialView: {{ hasPartialMonthInitialView }}</p> -->
|
||||
<fieldset id="date-picker-fieldset" ref="datePickerFieldset">
|
||||
<legend class="sr-only">Date Picker</legend>
|
||||
<!-- <h4 id="tracker" ref="tracker">currentScrollTop: {{ currentScrollTop }}</h4> -->
|
||||
|
|
@ -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' : '',
|
||||
]">
|
||||
<div class="month-year body-small d-flex align-items-center small">
|
||||
{{ 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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue