glib-web 0.8.3 → 0.8.4

package/components/mixins/list/autoload.js

@@ -9,13 +9,13 @@ export default {
       infiniteScroll: null
     };
   },
-  computed: {
-    bottomAnchorStyles() {
-      return {
-        display: this.infiniteScroll && this.nextPageUrl ? "block" : "none"
-      };
-    }
-  },
+  // computed: {
+  //   bottomAnchorStyles() {
+  //     return {
+  //       display: this.infiniteScroll && this.nextPageUrl ? "block" : "none"
+  //     };
+  //   }
+  // },
   methods: {
     enableInfiniteScrollIfApplicable: function() {
       this.$removeViewportChangeListeners(this.topScrollHandler);
@@ -24,23 +24,8 @@ export default {
       const prevPage = this.spec.prevPage || {};
       const nextPage = this.spec.nextPage || {};
 
-      // const infiniteScroll = nextPage.autoload == "asNeeded";
-      // // const infiniteScroll = nextPage.autoLoad;
-      // if (infiniteScroll) {
-      //   const nextPageUrl = nextPage.url;
-      //   const onScrollToBottom = this.spec.onScrollToBottom;
-      //   if (nextPageUrl || onScrollToBottom) {
-      //     this._registerBottomScroll(nextPageUrl, onScrollToBottom);
-      //   }
-
-      //   const prevPageUrl = prevPage.url;
-      //   const onScrollToTop = this.spec.onScrollToTop;
-      //   if (prevPageUrl || onScrollToTop) {
-      //     this._registerTopScroll(prevPageUrl, onScrollToTop);
-      //   }
-      // }
-
-      this.infiniteScroll = nextPage.autoload == "asNeeded";
+      this.infiniteScroll =
+        nextPage.autoload == "asNeeded" || prevPage.autoload == "asNeeded";
       const onScrollToBottom = this.spec.onScrollToBottom;
       const onScrollToTop = this.spec.onScrollToTop;
 
@@ -49,16 +34,18 @@ export default {
         this.prevPageUrl = prevPage.url;
       }
 
-      if (this.nextPageUrl || onScrollToBottom) {
-        this._registerBottomScroll(onScrollToBottom);
-      }
+      // Avoid executing the scroll actions on page load.
+      setTimeout(() => {
+        if (this.nextPageUrl || onScrollToBottom) {
+          this._registerBottomScroll(onScrollToBottom);
+        }
 
-      if (this.prevPageUrl || onScrollToTop) {
-        this._registerTopScroll(onScrollToTop);
-      }
+        if (this.prevPageUrl || onScrollToTop) {
+          this._registerTopScroll(onScrollToTop);
+        }
+      }, 1000);
     },
     _registerTopScroll(onScrollToTop) {
-      // TODO: Consider adding support for prevPageUrl
       this.topScrollHandler = this.$onVisibilityChange(
         this.$refs.topAnchor,
         (el, visible) => {
@@ -71,6 +58,39 @@ export default {
       this.$addViewportChangeListeners(this.topScrollHandler);
     },
     _handleTopScroll(onScrollToTop) {
+      if (this.prevPageUrl) {
+        this.request = Utils.http.execute(
+          { url: this.prevPageUrl },
+          "GET",
+          this,
+          response => {
+            const prevPage = response.prevPage;
+            if (this.$type.isObject(prevPage)) {
+              this.prevPageUrl = response.prevPage.url;
+            } else {
+              this.prevPageUrl = null;
+            }
+
+            for (const [
+              index,
+              prependedSection
+            ] of response.sections.entries()) {
+              const section = this.sections[index];
+
+              Utils.type.ifArray(prependedSection.rows, rows => {
+                for (const row of rows) {
+                  section.rows.unshift(row);
+                }
+              });
+
+              // TODO: scroll back to where the position was before the prepending.
+              // https://stackoverflow.com/questions/54765451/preserve-scroll-position-on-dom-update-in-vue-js
+            }
+            Utils.history.updatePage();
+          }
+        );
+      }
+
       GLib.action.execute(onScrollToTop, this);
     },
     _registerBottomScroll(onScrollToBottom) {

package/components/panels/list.vue

@@ -5,7 +5,11 @@
     class="py-0"
     :style="genericStyles()"
   >
-    <div ref="topAnchor"></div>
+    <div ref="topAnchor">
+      <div v-if="prevPageUrl" class="py-3 px-4">
+        Loading...
+      </div>
+    </div>
 
     <template v-for="(section, sectionIndex) in sections">
       <div :key="`section${sectionIndex}`">
@@ -46,8 +50,10 @@
       </div>
     </template>
 
-    <div ref="bottomAnchor" class="py-3 px-4" :style="bottomAnchorStyles">
-      Loading...
+    <div ref="bottomAnchor">
+      <div v-if="nextPageUrl" class="py-3 px-4">
+        Loading...
+      </div>
     </div>
   </v-list>
 </template>

package/extensions/array.js

@@ -7,6 +7,10 @@ Array.prototype.remove = function(element) {
   return false;
 };
 
+Array.prototype.prepend = function(element) {
+  this.unshift(element);
+};
+
 Array.prototype.clear = function() {
   this.length = 0;
 };

package/nav/drawer.vue

@@ -13,7 +13,7 @@
     :mini-variant.sync="mini"
     @input="updateState"
   >
-    <template v-slot:prepend>
+    <template v-if="mini" v-slot:prepend>
       <v-list-item>
         <v-list-item-icon>
           <v-icon v-if="!mini">mdi-chevron-left</v-icon>
@@ -167,6 +167,7 @@ export default {
   },
   methods: {
     $ready() {
+      this.mini = !this.cssClasses.includes("maxi");
       this.updateNavigationStyle(window.location);
 
       // this.$el.addEventListener('drawers/clickButton', () => { this.updateState(false) }, false)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "",
   "main": "index.js",
   "scripts": {