diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue index 86ca31a65f659b860811b5af37c4ef79fcd86ebb..f037ce4d4fd6817553435371d9d5cdee7e760294 100644 --- a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue +++ b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue @@ -158,6 +158,8 @@ export default { groups: [], courses: [], incomplete: false, + // TODO: Start with false until main query finished + ready: true, }; }, apollo: { @@ -257,7 +259,7 @@ export default { }); }, // docsByDay: {dt: [dt doc ...] ...} - fetchMore(from, to) { + fetchMore(from, to, then) { console.log('fetching', from, to); this.lastQuery.fetchMore({ variables: { @@ -268,6 +270,7 @@ export default { updateQuery: (previousResult, { fetchMoreResult }) => { console.log('previousResult', previousResult); console.log('fetchMoreResult', fetchMoreResult); + then(); return { items: previousResult.items.concat(fetchMoreResult.items) }; } }); @@ -275,31 +278,52 @@ export default { setDate(date) { this.$router.replace({ hash: date }) }, - intersectHandler(date, idx, lastIdx) { - let waiting = true; - return (entries) => { - const entry = entries[0]; - if (entry.isIntersecting) { + fixScrollPos(height, top) { + console.log('fix @', top, document.documentElement.scrollTop, height, document.documentElement.scrollHeight); + this.$nextTick(() => { + console.log('fix @', top, document.documentElement.scrollTop, height, document.documentElement.scrollHeight); + if (height < document.documentElement.scrollHeight) { + console.log('fixingTop'); + document.documentElement.scrollTop = document.documentElement.scrollHeight - height + top; + this.ready = true; + } else { + // Update top, could have changed in the meantime. + this.fixScrollPos(height, document.documentElement.scrollTop); + } + }); + }, + intersectHandler(date, idx, lastIdx) { + let once = true; + return (entries) => { + const entry = entries[0]; + if (entry.isIntersecting) { - if (entry.boundingClientRect.top <= 0) { - console.log('@', date.toISODate()); - this.setDate(date.toISODate()); - } + if (entry.boundingClientRect.top <= 0) { + console.log('@', date.toISODate()); + this.setDate(date.toISODate()); + } - if (waiting && idx === 0) { - console.log('load up', date.toISODate()); - this.fetchMore(date.minus({ days: 4 }).toISODate(), - date.minus({ days: 1 }).toISODate()); - waiting = false; - } else if (waiting && idx === lastIdx) { - console.log('load down', date.toISODate()); - this.fetchMore(date.plus({ days: 1 }).toISODate(), - date.plus({ days: 5 }).toISODate()); - waiting = false; - } - } - }; - }, + if (once && this.ready && idx === 0) { + console.log('load up', date.toISODate()); + this.ready = false; + this.fetchMore(date.minus({ days: 5 }).toISODate(), + date.minus({ days: 1 }).toISODate(), + () => { + this.fixScrollPos(document.documentElement.scrollHeight, + document.documentElement.scrollTop); + }); + once = false; + } else if (once && this.ready && idx === lastIdx) { + console.log('load down', date.toISODate()); + this.ready = false; + this.fetchMore(date.plus({ days: 1 }).toISODate(), + date.plus({ days: 5 }).toISODate(), + () => { this.ready = true }); + once = false; + } + } + }; + }, }, created() { this.resetDate();