glib-web 0.6.17 → 0.8.2

package/actions/windows/open.js

@@ -1,5 +1,5 @@
 export default class {
   execute(properties, component) {
-    Utils.http.load(properties, null, component);
+    Utils.http.load(properties, component);
   }
 }

package/actions/windows/reload.js

@@ -1,21 +1,6 @@
 export default class {
   execute(properties, component) {
     if (Utils.settings.reactive) {
-      // const currentUrl = window.location.href;
-      // const data = {
-      //   url: properties.url || currentUrl
-      // };
-
-      // Utils.http.execute(data, "GET", component, (page, response) => {
-      //   Utils.http.forceComponentUpdate(() => {
-      //     window.vueApp.page = page;
-      //     const redirectUrl = Utils.url.htmlUrl(response.url);
-      //     Utils.history.updatePage(redirectUrl);
-
-      //     GLib.action.execute(properties["onReload"], null, component);
-      //   });
-      // });
-
       Utils.http.reload(properties, component);
     } else {
       window.location.reload();

package/app.vue

@@ -80,6 +80,7 @@ export default {
     );
     Utils.history.saveInitialContent(this.page);
     Utils.history.restoreOnBackOrForward();
+    Utils.http.promptIfDirtyOnUnload();
   },
   methods: {
     $ready: function() {

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

@@ -46,8 +46,18 @@ export default {
         this.$internalizeValue(val)
       );
 
-      // this.$saveValue(val);
-      // Vue.set(this.$data._fieldModels, this.fieldName, val);
+      // Make sure value has changed and make sure that it is different from the original value.
+      // Be strict with this so it doesn't execute when the component is just initializing (e.g value changing
+      // from `null` to `this.spec.value`).
+      if (
+        !window.vueApp.page.disableDirtyPrompt &&
+        !window.vueApp.isFormDirty &&
+        val != oldVal &&
+        val != this.spec.value
+      ) {
+        console.log("Form is now dirty");
+        window.vueApp.isFormDirty = true;
+      }
     }
   },
   methods: {

package/components/mixins/table/import.js

@@ -42,7 +42,6 @@ export default {
         };
         Utils.http.execute(data, "POST", vm, response => {
           GLib.action.handleResponse(response, vm);
-          // Action.execute(response["onResponse"], target, vm);
           vm._submitEachRow(rows, target);
         });
       }

package/components/panels/horizontal.vue

@@ -14,13 +14,22 @@ export default {
   computed: {
     cssClasses: function() {
       const classes = this.$classes().concat("layouts-horizontal");
-      switch (this.spec.distribution) {
+      const distribution = this.spec.distribution;
+      switch (distribution) {
         case "fillEqually":
           classes.push("layouts-horizontal--fill-equally");
           break;
         case "spaceEqually":
           classes.push("layouts-horizontal--space-equally");
           break;
+        default:
+          Utils.type.ifString(distribution, distribution => {
+            // Uses Material Design spacings: https://vuetifyjs.com/en/styles/spacing/#how-it-works
+            if (distribution.startsWith("overlap")) {
+              classes.push(`layouts-horizontal--${distribution}`);
+            }
+          });
+          break;
       }
       return classes;
     },
@@ -67,7 +76,19 @@ export default {
 .layouts-horizontal--space-equally > * {
   flex: initial;
 }
-/* .layouts-horizontal > div {
-  display: inline-block;
-} */
+.layouts-horizontal--overlap-1 > *:not(:first-child) {
+  margin-left: -4px;
+}
+.layouts-horizontal--overlap-2 > *:not(:first-child) {
+  margin-left: -8px;
+}
+.layouts-horizontal--overlap-3 > *:not(:first-child) {
+  margin-left: -12px;
+}
+.layouts-horizontal--overlap-4 > *:not(:first-child) {
+  margin-left: -16px;
+}
+.layouts-horizontal--overlap-5 > *:not(:first-child) {
+  margin-left: -20px;
+}
 </style>

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";
@@ -160,6 +160,10 @@ document.addEventListener("DOMContentLoaded", () => {
     indicator: false,
     // Rename to isPageStale
     isStale: false,
+    /// Dirty form handling
+    isFormSubmitted: false,
+    isFormDirty: false,
+    ///
     stateUpdatedAt: null,
     webSocket: { channels: {}, header: {} },
     actionCable: { channels: {} },

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

package/utils/form.js

@@ -15,13 +15,14 @@ export default class {
         const data = {
           url: Utils.url.appendParams(url, formData)
         };
-        Utils.http.load(data, null, component);
+        Utils.http.load(data, component);
       } else {
         const data = {
           url: url,
           formData: formData
         };
         Utils.http.execute(data, method, component, response => {
+          Utils.http.notifyFormSubmitted();
           GLib.action.handleResponse(response, component);
         });
       }

package/utils/history.js

@@ -35,6 +35,15 @@ export default class {
   static restoreOnBackOrForward() {
     const vm = this;
     window.onpopstate = event => {
+      // TODO: Ideally display a prompt when dirty
+      // if (Utils.http.proceedEvenWhenDirty()) {
+      //   event.preventDefault();
+      //   history.go(1);
+      //   return false;
+      // }
+
+      window.vueApp.isFormDirty = false;
+
       // Save scroll position of the current page when navigating through back/forward button
       this.bodyScrollTops[this.navigationCount] = this._pageBody.scrollTop;
 

package/utils/http.js

@@ -2,6 +2,7 @@ import Type from "./type";
 import Action from "../action";
 
 let loading = false;
+const dirtyPrompt = "Changes you made have not been saved. Are you sure?";
 
 class HttpRequest {
   constructor() {
@@ -38,9 +39,15 @@ export default class {
     return formData;
   }
 
-  static load(properties, target, component) {
+  static load(properties, component) {
     const url = new URL(properties["url"]);
     const domainMatched = window.location.hostname == url.hostname;
+
+    // If this is an external domain, we rely on `onUnload()` instead.
+    if (domainMatched && !this.proceedEvenWhenDirty()) {
+      return;
+    }
+
     if (Utils.settings.reactive && domainMatched) {
       const currentUrl = window.location.href;
       const htmlUrl = Utils.url.htmlUrl(properties["url"]);
@@ -60,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) {
@@ -202,8 +210,32 @@ export default class {
 
     // Queue the execution so the first isStale has time to resets state before handler gets executed
     setTimeout(() => {
+      window.vueApp.isFormSubmitted = false;
+      window.vueApp.isFormDirty = false;
       handler();
       window.vueApp.isStale = false;
     }, 0);
   }
+
+  static promptIfDirtyOnUnload() {
+    window.onbeforeunload = function() {
+      return window.vueApp.isFormDirty ? dirtyPrompt : null;
+    };
+  }
+
+  static notifyFormSubmitted() {
+    window.vueApp.isFormSubmitted = true;
+  }
+
+  static proceedEvenWhenDirty() {
+    // Don't prompt if this is a result of form submission
+    if (
+      window.vueApp.isFormDirty &&
+      !window.vueApp.isFormSubmitted &&
+      !confirm(dirtyPrompt)
+    ) {
+      return false;
+    }
+    return true;
+  }
 }

package/utils/uploader.js

@@ -5,13 +5,6 @@ import mimeType from "../utils/mime_type";
 const MB_SIZE = 1000;
 
 export default class Uploader {
-  // constructor(input, file, url) {
-  //   this.input = input
-  //   this.file = file
-  //   this.url = url
-  //   this.upload = new DirectUpload(this.file, this.url, this)
-  // }
-
   constructor(file, url, progress) {
     this.file = file;
     this.url = url;