Introduce fixScrollPos, making upwarts loading keep scroll position

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();