glib-web 0.8.2 → 0.9.0

package/components/component.vue

@@ -104,6 +104,7 @@ import ColumnPanel from "./panels/column";
 import ResponsivePanel from "./panels/responsive";
 import UlPanel from "./panels/ul";
 import WebPanel from "./panels/web";
+import GridPanel from "./panels/grid";
 
 import MultimediaVideo from "./multimedia/video";
 
@@ -189,6 +190,7 @@ export default {
     "panels-column": ColumnPanel,
     "panels-ul": UlPanel,
     "panels-web": WebPanel,
+    "panels-grid": GridPanel,
 
     "multimedia-video": MultimediaVideo,
 

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/grid.vue

@@ -0,0 +1,43 @@
+<template>
+  <div :class="$classes()" :style="cssStyles">
+    <template v-for="(item, index) in spec.childViews">
+      <div :key="index">
+        <ui-component :spec="item" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  computed: {
+    cssStyles: function() {
+      const styles = this.$styles();
+
+      styles["display"] = "grid";
+      Utils.type.ifNumber(
+        this.spec.columnGap,
+        columnGap => (styles["columnGap"] = `${columnGap}px`)
+      );
+      Utils.type.ifNumber(
+        this.spec.rowGap,
+        rowGap => (styles["rowGap"] = `${rowGap}px`)
+      );
+      const boxMaxWidth = this.spec.boxMaxWidth
+        ? `${this.spec.boxMaxWidth}px`
+        : "1fr";
+
+      styles[
+        "gridTemplateColumns"
+      ] = `repeat(auto-fit, minmax(${this.spec.boxMinWidth}px, ${boxMaxWidth}))`;
+
+      return styles;
+    }
+  }
+};
+</script>
+
+<style scoped></style>

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.2",
+  "version": "0.9.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/templates/comment.vue

@@ -13,9 +13,15 @@
           class="font-weight-bold body-2 subtitle"
           >{{ spec.title }}</v-card-title
         >
-        <div v-if="mode !== 'system'" class="comment-bubble pa-2">
+        <!-- eslint-disable vue/no-v-html -->
+        <div
+          v-if="mode !== 'system'"
+          class="comment-bubble pa-2"
+          v-html="compiledText"
+        >
           {{ spec.subtitle }}
         </div>
+        <!--eslint-enable-->
         <img
           v-if="spec.image"
           :src="spec.image"
@@ -51,6 +57,11 @@ export default {
       chips: []
     };
   },
+  computed: {
+    compiledText() {
+      return Utils.format.markdown(this.spec.subtitle);
+    }
+  },
   methods: {
     $ready() {
       const template = this.spec.template;