From 706ea391f4b87251f74166e9fe779fafe0002c68 Mon Sep 17 00:00:00 2001
From: Michael Bauer <michael-bauer@posteo.de>
Date: Thu, 18 Apr 2024 16:45:38 +0200
Subject: [PATCH] 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.
---
.../components/coursebook/Coursebook.vue | 25 ++++++++++++-------
1 file changed, 16 insertions(+), 9 deletions(-)
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
index 9dd9e727b..470f36f35 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
@@ -37,7 +37,7 @@
<coursebook-loader />
<date-select-footer
- :value="$route.hash.substring(1)"
+ :value="currentDate"
@input="gotoDate"
@prev="gotoPrev"
@next="gotoNext"
@@ -114,6 +114,8 @@ export default {
incomplete: false,
ready: false,
initDate: false,
+ currentDate: "",
+ hashUpdater: false,
};
},
computed: {
@@ -171,12 +173,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();
@@ -224,8 +227,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) {
@@ -294,20 +303,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);
},
},
--
GitLab