Skip to content
Snippets Groups Projects
Commit 12f8d5ea authored by permcu's avatar permcu
Browse files

Move to internal currentDate state and update hash fragment on idle

Updating the hash fragment causes a small delay while scrolling.
=> Update only after user finished scrolling.
Uses requestIdleCallback
which is not ready for prime time in Safari. But should work elsewhere.
parent d3fd2b7d
No related tags found
No related merge requests found
Pipeline #181042 failed
......@@ -78,7 +78,7 @@
<coursebook-loader />
<date-select-footer
:value="$route.hash.substring(1)"
:value="currentDate"
@input="gotoDate"
@prev="gotoPrev"
@next="gotoNext"
......@@ -157,6 +157,8 @@ export default {
incomplete: false,
ready: false,
initDate: false,
currentDate: "",
hashUpdater: false,
};
},
apollo: {
......@@ -205,12 +207,13 @@ export default {
resetDate() {
// Assure current date
console.log('Resetting date range', this.$route.hash);
if (!this.$route.hash) {
this.currentDate = this.$route.hash?.substring(1);
if (!this.currentDate) {
console.log('Set default date');
this.setDate(DateTime.now().toISODate());
}
const date = DateTime.fromISO(this.$route.hash.substring(1));
const date = DateTime.fromISO(this.currentDate);
this.initDate = date;
this.dateStart = date.minus({ days: 3 }).toISODate();
this.dateEnd = date.plus({ days: 4 }).toISODate();
......@@ -273,8 +276,14 @@ export default {
});
},
setDate(date) {
if (!(this.$route.hash.substring(1) === date)) {
this.$router.replace({ hash: date })
this.currentDate = date;
if (!this.hashUpdater) {
this.hashUpdater = window.requestIdleCallback(() => {
if (!(this.$route.hash.substring(1) === this.currentDate)) {
this.$router.replace({ hash: this.currentDate })
}
this.hashUpdater = false;
});
}
},
fixScrollPos(height, top) {
......@@ -343,20 +352,18 @@ export default {
},
// TODO: Disable navigation while loading!
gotoPrev() {
const current = this.$route.hash.substring(1);
const pref = this.$refs.days
.map((day) => day.date.toISODate())
.sort()
.reverse()
.find((date) => date < current);
.find((date) => date < this.currentDate);
this.gotoDate(pref);
},
gotoNext() {
const current = this.$route.hash.substring(1);
const next = this.$refs.days
.map((day) => day.date.toISODate())
.sort()
.find((date) => date > current);
.find((date) => date > this.currentDate);
this.gotoDate(next);
},
},
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment