glib-web 0.7.1 → 0.8.4

package/components/component.vue

@@ -113,7 +113,7 @@ import SelectBanner from "./banners/select";
 import LineChart from "./charts/line";
 import ColumnChart from "./charts/column";
 
-import SocialSharing from "./socialSharing";
+import ShareButton from "./shareButton";
 
 export default {
   components: {
@@ -145,7 +145,7 @@ export default {
     "views-map": Map,
     "views-tabBar": TabBar,
     "views-calendar": Calendar,
-    "views-socialSharing": SocialSharing,
+    "views-shareButton": ShareButton,
 
     "fields-hidden": HiddenField,
     "fields-text": TextField,

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/components/{socialSharing.vue → shareButton.vue}

@@ -5,7 +5,7 @@
     :url="spec.url"
     :title="spec.title"
     :description="spec.description"
-    :quote="spec.quote"
+    :quote="spec.facebookQuote"
     :hashtags="spec.hashtags"
     :twitter-user="spec.twitterUser"
   >
@@ -16,6 +16,8 @@
 </template>
 
 <script>
+import Action from "../action";
+
 export default {
   props: {
     spec: { type: Object, required: true }
@@ -23,6 +25,10 @@ export default {
   data() {
     return {
       config: {
+        copy: {
+          icon: "far fah fa-lg fa-copy",
+          color: "#183153"
+        },
         email: {
           icon: "far fah fa-lg fa-envelope",
           color: "#333333"
@@ -85,6 +91,19 @@ export default {
         }
       }
     };
+  },
+  mounted() {
+    if (this.spec.onClick) {
+      const parentElement = this.$el.parentElement;
+      // remove default event listener
+      this.$el.replaceWith(this.$el.cloneNode(true));
+      // manually attach event listener because @click not working
+      parentElement
+        .querySelector(`a.${this.$el.classList[0]}`)
+        .addEventListener("click", () => {
+          Action.execute(this.spec.onClick, this);
+        });
+    }
   }
 };
 </script>

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/index.js

@@ -39,7 +39,7 @@ Vue.use(VueYoutube);
 // })
 
 import VueSocialSharing from "vue-social-sharing";
-Vue.use(VueSocialSharing);
+Vue.use(VueSocialSharing, { networks: { copy: "" } });
 
 import "./extensions/string.js";
 import "./extensions/array.js";

package/nav/dialog.vue

@@ -83,7 +83,7 @@ export default {
           this.message = "";
           this.body = response.body;
           this.footer = response.footer;
-          this.showClose = false;
+          this.showClose = this.spec.showClose || false;
         });
       } else {
         this.title = this.spec.title;

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>
@@ -50,6 +50,75 @@
 import NavDrawerButton from "./drawerButton";
 import NavDrawerLabel from "./drawerLabel";
 
+const activeClass = (element, action) => {
+  let indicator = element.querySelector(".indicator");
+  if (indicator) {
+    indicator.classList[action]("active");
+  }
+  let icon = element.querySelector(".v-list-item__action");
+  if (icon) {
+    icon.classList[action]("active");
+  }
+};
+
+const comparePathname = (hrefPathname, locationPathname) => {
+  let value = 0;
+  const loc = locationPathname.split("/").filter(v => v);
+  const hr = hrefPathname.split("/").filter(v => v);
+
+  if (loc.length == hr.length) value = value + 1;
+
+  loc.forEach((route, index) => {
+    if (!hr[index]) {
+      value = value + 0;
+    } else if (hr[index] == route) {
+      value = value + 1;
+    } else if (hr[index] != route) {
+      value = value - 2;
+    }
+  });
+
+  return value;
+};
+
+const navigationMap = (element, locationPathname) => {
+  return Array.from(element.querySelectorAll(".nav-item")).reduce(
+    (prev, curr) => {
+      let a = curr.querySelector("a");
+      if (a) {
+        let obj = {};
+        obj[new URL(a.href).pathname] = {
+          element: curr,
+          matchValue: comparePathname(
+            new URL(a.href).pathname,
+            locationPathname
+          )
+        };
+        return Object.assign(prev, obj);
+      } else {
+        return prev;
+      }
+    },
+    {}
+  );
+};
+
+const getActiveNav = navigationMap => {
+  let currentRoute = "";
+  let maxMatchValue = null;
+
+  for (let route in navigationMap) {
+    if (!maxMatchValue) {
+      maxMatchValue = navigationMap[route].matchValue;
+      currentRoute = route;
+    } else if (maxMatchValue < navigationMap[route].matchValue) {
+      maxMatchValue = navigationMap[route].matchValue;
+      currentRoute = route;
+    }
+  }
+  return navigationMap[currentRoute];
+};
+
 export default {
   components: {
     "nav-drawerButton": NavDrawerButton,
@@ -98,6 +167,9 @@ export default {
   },
   methods: {
     $ready() {
+      this.mini = !this.cssClasses.includes("maxi");
+      this.updateNavigationStyle(window.location);
+
       // this.$el.addEventListener('drawers/clickButton', () => { this.updateState(false) }, false)
       this.$el.addEventListener("drawers/clickButton", () => {
         if (!this.permanent) {
@@ -113,6 +185,15 @@ export default {
         this.cssClasses.includes("mini") ||
         (this.cssClasses.includes("mini-lg-and-above") && this.lgAndAbove)
       );
+    },
+    updateNavigationStyle(urlObject) {
+      const navMap = navigationMap(this.$el, urlObject.pathname);
+      // remove all active class
+      for (let route in navMap) {
+        activeClass(navMap[route].element, "remove");
+      }
+      // add active class to nav
+      activeClass(getActiveNav(navMap).element, "add");
     }
   }
 };
@@ -122,12 +203,13 @@ export default {
 .nav-item {
   position: relative;
 }
-.nav-item:hover .indicator {
+.nav-item:hover .indicator,
+.nav-item .indicator.active {
   display: flex;
   position: absolute;
   width: 3px;
   height: 65%;
-  margin: 10px 0;
+  margin: 8px 0;
   justify-content: center;
   align-items: center;
   background-color: white;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "0.7.1",
+  "version": "0.8.4",
   "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;

package/utils/http.js

@@ -67,6 +67,7 @@ export default class {
     } else {
       window.location = Utils.url.htmlUrl(properties["url"]);
     }
+    // bus.$emit("glibWebHttpLoad", new URL(Utils.url.htmlUrl(properties["url"])));
   }
 
   static analyticsHeaders(component) {