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

CSR-886: animate new months to fade in

Browse source
This commit is contained in:
Adam Caouette 2023-03-21 16:32:40 -04:00
parent f35f530e4a
commit c1badf70f2
2 changed files with 93 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,62 +3,65 @@
<fieldset v-if="months"> <fieldset v-if="months">
<legend class="sr-only">Date Picker</legend> <legend class="sr-only">Date Picker</legend>
<div <div
class="test-div" v-for="month in months"
:class="[isActive ? '' : 'active']" :key="`${month.monthLabel}-${month.yearNum.toString()}-${months.length}`">
v-for="month in months" <div
:key="`${month.monthLabel}-${month.yearNum.toString()}-${months.length}`"> class="calendar-grid-container position-relative"
<div :class="[
class="calendar-grid-container" isInitialView === true ? 'initial-view' : '',
:class="[isInitialView === true ? 'initial-view' : '', month.monthClass, isAddingNewMonth === true ? 'is-adding-new-month' : '']"> month.monthClass,
<div class="month-year body-small d-flex align-items-center ps-3 small"> isAddingNewMonth === true ? 'is-adding-new-month' : '',
{{ month.monthLabel }} {{ month.yearNum.toString() }} ]">
<div class="month-year body-small d-flex align-items-center ps-3 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="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> </div>
<div </fieldset>
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="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> <button
</div> v-if="calendarViewDirection === 'future'"
</fieldset> type="button"
class="btn-link"
</div> @click="
<button goForward();
v-if="calendarViewDirection === 'future'" ">
type="button" View more dates
class="btn-link" </button>
@click="goForward(); toggleClass()">
View more dates
</button>
</template> </template>
<script> <script>
@ -74,7 +77,6 @@ export default {
name: "datePicker", name: "datePicker",
data() { data() {
return { return {
isActive: false,
calendarData: [], calendarData: [],
monthsBeforeToLoadOffset: 0, monthsBeforeToLoadOffset: 0,
monthsAfterToLoadOffset: 1, monthsAfterToLoadOffset: 1,
@ -111,8 +113,8 @@ export default {
computed: { computed: {
todayDate() { todayDate() {
return this.todayOverrideDateString return this.todayOverrideDateString
? new Date(this.todayOverrideDateString) ? new Date(this.todayOverrideDateString)
: new Date(); : new Date();
}, },
months() { months() {
if (this.calendarData?.length < 1) { if (this.calendarData?.length < 1) {
@ -135,9 +137,6 @@ export default {
}, },
}, },
methods: { methods: {
toggleClass: function (event) {
this.isActive = !this.isActive;
},
goForward() { goForward() {
if (this.isInitialView) { if (this.isInitialView) {
this.isInitialView = false; // 1st click removes hidden styling this.isInitialView = false; // 1st click removes hidden styling
@ -226,23 +225,23 @@ 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 = currentWeekStartDateNum =
todayDayIndex > todayDateNum ? 1 : todayDateNum - todayDayIndex; // FUTURE 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 = const monthStartDateNum =
offset === 0 && direction === "future" ? currentWeekStartDateNum : 1; // FUTURE 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
if (typeof offset !== "undefined") { if (typeof offset !== "undefined") {
if (offset === 0 && direction === "future") if (offset === 0 && direction === "future")
firstMonthDayTally = monthStartDateNum - startDateDayIndex; // FUTURE (starts low, counts up) firstMonthDayTally = monthStartDateNum - startDateDayIndex; // FUTURE (starts low, counts up)
if (offset === 0 && direction === "past") if (offset === 0 && direction === "past")
firstMonthDayTally = currentWeekEndDateNum; // PAST (starts high, counts down) firstMonthDayTally = currentWeekEndDateNum; // PAST (starts high, counts down)
while ( while (
direction === "future" && direction === "future" &&
@ -280,8 +279,7 @@ export default {
} }
} }
} else { } else {
debugger; // eslint-disable-line no-debugger monthClass = monthClass + " new-month";
monthClass = monthClass + ' new-month';
} }
if (this.selectableDates === "custom") { if (this.selectableDates === "custom") {
@ -346,26 +344,23 @@ export default {
return monthToAdd; return monthToAdd;
}, },
addMonthData() { addMonthData() {
//this.isAddingNewMonth = true; this.isAddingNewMonth = true;
const oldMonth = document.querySelector(".new-month");
oldMonth?.classList.remove("new-month");
debugger; // eslint-disable-line no-debugger
const monthToAdd = this.getMonthData(); const monthToAdd = this.getMonthData();
if (this.calendarViewDirection === "future") { if (this.calendarViewDirection === "future") {
let month = this.calendarData[this.calendarData.length - 1];
month.monthClass = month.monthClass.replace("new-month", "");
this.calendarData.push(monthToAdd); this.calendarData.push(monthToAdd);
} }
if (this.calendarViewDirection === "past") { if (this.calendarViewDirection === "past") {
let month = this.calendarData[0];
month.monthClass = month.monthClass.replace("new-month", "");
this.calendarData.unshift(monthToAdd); this.calendarData.unshift(monthToAdd);
} }
let newMonth;
this.$nextTick(() => {
debugger; // eslint-disable-line no-debugger
newMonth = document.querySelector(".new-month");
newMonth.classList.add("is-adding-new-month");
});
setTimeout(() => { setTimeout(() => {
newMonth.classList.remove("is-adding-new-month"); this.isAddingNewMonth = false;
}, .025); }, 0.010);
}, },
isSelectableDate(thisDate) { isSelectableDate(thisDate) {
const testForDate = (dateInArray) => { const testForDate = (dateInArray) => {
@ -376,16 +371,16 @@ export default {
); );
}; };
const isSelectable = const isSelectable =
this.selectableDatesData.findIndex(testForDate) > -1 ? true : false; this.selectableDatesData.findIndex(testForDate) > -1 ? true : false;
return isSelectable; return isSelectable;
}, },
updateSelectableDates(monthStart, monthEnd) { updateSelectableDates(monthStart, monthEnd) {
this.customSelectableDatesCallback(monthStart, monthEnd)?.forEach((newObj) => { this.customSelectableDatesCallback(monthStart, monthEnd)?.forEach((newObj) => {
const index = this.selectableDatesData.findIndex( const index = this.selectableDatesData.findIndex(
(obj) => (obj) =>
obj.year === newObj.year && obj.year === newObj.year &&
obj.month === newObj.month && obj.month === newObj.month &&
obj.date === newObj.date obj.date === newObj.date
); );
if (index === -1) this.selectableDatesData.push(newObj); if (index === -1) this.selectableDatesData.push(newObj);
}); });
@ -397,14 +392,16 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.date-picker { .date-picker {
.calendar-grid-container { .calendar-grid-container {
margin: 0 auto; margin: 4px auto;
max-width: 414px; max-width: 414px;
max-height: 500px; max-height: 500px;
overflow: hidden;
transition: all ease 1s;
display: grid; display: grid;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 4px; padding: 0;
.grid-item { .grid-item {
text-align: center; text-align: center;
@ -439,6 +436,14 @@ export default {
text-transform: uppercase; text-transform: uppercase;
font-weight: 300; font-weight: 300;
letter-spacing: 0.75px; letter-spacing: 0.75px;
&:after {
content: '';
position: absolute;
width: 100%;
margin: 6rem 0 4.2rem 0;
border-bottom: 1px solid $gray-300;
}
} }
.legend { .legend {
grid-area: 1 / 5 / 2 / 8; grid-area: 1 / 5 / 2 / 8;
@ -610,8 +615,6 @@ export default {
&.is-adding-new-month { &.is-adding-new-month {
&.new-month { &.new-month {
max-height: 0; max-height: 0;
overflow: hidden;
transition: all ease 2s;
} }
} }
} }
@ -677,9 +680,7 @@ export default {
margin-top: 2rem; margin-top: 2rem;
} }
.new-month { .new-month {
max-height: 500px; max-height: 550px;
overflow: hidden;
transition: all ease 10s;
} }
} }
</style> </style>

4
src/layouts/demo-date-picker/demo-date-picker.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<div class="select-car"> <div class="">
<div class="select-car-form rounded text-center"> <div class="rounded text-center">
<div class="fade-on-route-transition"> <div class="fade-on-route-transition">
<date-picker <date-picker
selectableDates="custom" selectableDates="custom"