glib-web 0.7.1 → 0.8.2

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/{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/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

@@ -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,8 @@ export default {
   },
   methods: {
     $ready() {
+      this.updateNavigationStyle(window.location);
+
       // this.$el.addEventListener('drawers/clickButton', () => { this.updateState(false) }, false)
       this.$el.addEventListener("drawers/clickButton", () => {
         if (!this.permanent) {
@@ -113,6 +184,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 +202,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.2",
   "description": "",
   "main": "index.js",
   "scripts": {

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) {