From fe6d0739d4fc8d0ca2fe32ee032a17be13e938a2 Mon Sep 17 00:00:00 2001
From: Michael Bauer <michael-bauer@posteo.de>
Date: Wed, 20 Mar 2024 15:30:25 +0100
Subject: [PATCH] Show current day in url hash fragment
It's important to keep the date out of computed gqlQueryArgs to not resend query.
---
.../components/coursebook/Coursebook.vue | 43 +++++++++++++++++--
1 file changed, 39 insertions(+), 4 deletions(-)
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
index 9f2469f6d..25557793a 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
@@ -20,8 +20,9 @@
v-for="day in groupDocsByDay(items)"
two-line
:key="'day-' + day[0]"
+ :id="'documentation_' + day[0].toISODate()"
>
- <v-list-item-content :id="'documentation_' + day[0].toISODate()">
+ <v-list-item-content>
<v-subheader class="text-h6">{{
$d(day[0], "dateWithWeekday")
}}</v-subheader>
@@ -112,7 +113,6 @@ export default {
computed: {
gqlQueryArgs() {
console.log('computing gqlQueryArgs');
- const date = this.$route.hash.substring(1)
return {
own: this.filterType === "all" ? false : true,
objId: this.objId ? Number(this.objId) : undefined,
@@ -171,6 +171,38 @@ export default {
.sort()
.map((key) => byDay[key]);
},
+ debounce(fn, delay) {
+ let timer;
+ return () => {
+ console.log('debounce');
+ clearTimeout(timer);
+ timer = setTimeout(fn, delay);
+ }
+ },
+ // Adapted from
+ // https://github.com/vuejs/vuepress/blob/38e98634af117f83b6a32c8ff42488d91b66f663/packages/%40vuepress/plugin-active-header-links/clientRootMixin.js
+ setCurrentDay() {
+ const days = Array.from(document.querySelectorAll("[id^='documentation_']"));
+
+ const scrollTop = Math.max(
+ window.pageYOffset,
+ document.documentElement.scrollTop,
+ document.body.scrollTop
+ );
+
+ for (let i = 0; i < days.length; i++) {
+ const day = days[i];
+ const nextDay =days[i + 1];
+
+ if ((scrollTop >= day.offsetTop + 10 || i == 0) && (!nextDay || scrollTop < nextDay.offsetTop - 10)) {
+ const date = day.id.split("_")[1];
+ if (date !== this.$route.hash.substring(1)) {
+ this.gotoDate(date);
+ }
+ return
+ }
+ }
+ },
/**
* @param {"prev"|"next"} direction
*/
@@ -234,7 +266,7 @@ export default {
},
gotoDate(date, scroll) {
// show
- this.$router.push({ hash: date.toISODate() })
+ this.$router.replace({ hash: date })
console.log('hash', this.$route.hash);
// assure
// scroll
@@ -245,8 +277,11 @@ export default {
console.log('mounted with hash', this.$route.hash);
if (!this.$route.hash) {
console.log('initialized hash');
- this.$router.push({ hash: DateTime.now().toISODate() })
+ this.$router.replace({ hash: DateTime.now().toISODate() })
}
+ this.dateStart = this.$route.hash.substring(1);
+ this.dateEnd = DateTime.fromISO(this.dateStart).plus({ weeks: 1 }).toISODate()
+ window.addEventListener('scroll', this.debounce(this.setCurrentDay, 300));
},
};
</script>
--
GitLab