glib-web 0.16.0 → 0.18.0

package/action.js

@@ -166,7 +166,7 @@ export default class Action {
     }
   }
 
-  static handleResponse(response, component) {
+  static handleResponse(response, component, url) {
     // TODO: The execution should be in the following order: onResponse, page render, onLoad
     if (response.header || response.body || response.footer) {
       Utils.http.forceComponentUpdate(() => {

package/actions/components/update.js

@@ -1,3 +1,5 @@
+import Vue from "vue";
+
 export default class {
   execute(spec, component) {
     if (!spec.views.length > 1) {
@@ -7,7 +9,18 @@ export default class {
     if (!target) console.error("no component found :" + spec.targetId);
 
     Object.assign(target.spec, spec.views[0]);
-    target.$ready();
-    target.$forceUpdate();
+    this.updateComponent(target);
+  }
+
+  updateComponent(component) {
+    component.$ready();
+    component.$forceUpdate();
+
+    // Execute on next tick to ensure that the child has received the updated spec.
+    Vue.nextTick(() => {
+      component.$children.find(child => {
+        this.updateComponent(child);
+      });
+    });
   }
 }

package/actions/http/get.js

@@ -1,7 +1,22 @@
 export default class {
   execute(properties, controller) {
-    GLib.http.execute(properties, "GET", controller, response =>
-      GLib.action.handleResponse(response, controller)
-    );
+    const currentUrl = window.location.href;
+    // const htmlUrl = Utils.url.htmlUrl(properties["url"]);
+
+    GLib.http.execute(properties, "GET", controller, (page, response) => {
+      Utils.type.ifString(properties.historyUrl, historyUrl => {
+        const cleanUrl = Utils.url.htmlUrl(historyUrl);
+        if (cleanUrl !== currentUrl) {
+          console.log("URL", cleanUrl, response.url, response);
+          const data = Object.assign({}, window.vueApp.page, {
+            replayGetResponse: page.onResponse
+          });
+
+          // Utils.history.pushPage(data, historyUrl);
+          Utils.history.pushPage(data, cleanUrl);
+        }
+      });
+      GLib.action.handleResponse(page, controller);
+    });
   }
 }

package/app.vue

@@ -58,8 +58,7 @@ export default {
   },
   data() {
     return {
-      title: "...",
-      formSpec: null
+      title: "..."
     };
   },
   computed: {
@@ -77,6 +76,10 @@ export default {
         return "panels-form";
       }
       return "div";
+    },
+    // Use computed to ensure that the spec gets updated when the user navigates to another page.
+    formSpec() {
+      return this.page.fullPageForm;
     }
   },
   watch: {
@@ -93,9 +96,8 @@ export default {
     Utils.http.promptIfDirtyOnUnload();
   },
   methods: {
-    $ready: function() {
+    $ready() {
       document.title = this.page.title;
-      this.formSpec = this.page.fullPageForm;
 
       this.$wsInitPhoenixSocket(this.page.phoenixSocket);
       this.$wsInitActionCable(this.page.actionCable);
@@ -103,8 +105,6 @@ export default {
       if (this.$gtag) {
         if (!Utils.settings.isDev) {
           console.log(`Tracking analytics: ${window.location}`);
-          // this.$ga.page(window.location);
-
           this.$gtag.pageview({
             page_location: window.location
           });
@@ -117,6 +117,7 @@ export default {
         setTimeout(() => {
           // Wait until page is rendered
           GLib.action.execute(this.page.onRefocus, this);
+          GLib.action.execute(this.page.replayGetResponse, this);
         });
       } else {
         setTimeout(() => {

package/components/charts/pie.vue

@@ -0,0 +1,34 @@
+<template>
+  <pie-chart
+    :style="genericStyles()"
+    :class="$classes()"
+    :data="series"
+    :library="options"
+  ></pie-chart>
+</template>
+
+<script>
+export default {
+  mixins: [],
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data: function() {
+    return {
+      series: []
+    };
+  },
+  methods: {
+    $ready() {
+      this.series = this.spec.dataSeries.reduce((prev, curr) => {
+        let obj = {};
+        obj[curr.title] = curr.value;
+
+        return Object.assign(prev, obj);
+      }, {});
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/components/component.vue

@@ -46,6 +46,7 @@ import Chip from "./chip";
 import Datetime from "./datetime";
 
 import ProgressBar from "./progressbar";
+import ProgressCircle from "./progressCircle.vue";
 
 import Image from "./image";
 import Avatar from "./avatar";
@@ -114,6 +115,7 @@ import SelectBanner from "./banners/select";
 
 import LineChart from "./charts/line";
 import ColumnChart from "./charts/column";
+import PieChart from "./charts/pie";
 
 import ShareButton from "./shareButton";
 
@@ -132,6 +134,7 @@ export default {
     "views-chip": Chip,
     "views-datetime": Datetime,
     "views-progressBar": ProgressBar,
+    "views-progressCircle": ProgressCircle,
 
     "views-image": Image,
     "views-avatar": Avatar,
@@ -200,7 +203,8 @@ export default {
     "banners-select": SelectBanner,
 
     "charts-line": LineChart,
-    "charts-column": ColumnChart
+    "charts-column": ColumnChart,
+    "charts-pie": PieChart
   },
   props: {
     spec: { type: Object, required: true }

package/components/fields/check.vue

@@ -6,6 +6,7 @@
     <v-checkbox
       v-model="fieldModel"
       :name="fieldName"
+      :disabled="spec.readOnly"
       :value="spec.checkValue"
       :label="fieldModel ? spec.onLabel || spec.label : spec.label"
       :on-icon="spec.onIcon"

package/components/fields/checkGroup.vue

@@ -8,7 +8,7 @@
     <!-- <fields-hidden v-if="!anyChecked" :spec="uncheckSpec" /> -->
 
     <div v-for="(item, index) in spec.childViews" :key="index">
-      <glib-component :spec="item" />
+      <glib-component :spec="childSpec(item)" />
     </div>
 
     <v-text-field
@@ -76,6 +76,13 @@ export default {
             return;
           }
         });
+    },
+    childSpec(item) {
+      if (this.spec.readOnly) {
+        return Object.assign(item, { readOnly: this.spec.readOnly });
+      }
+
+      return item;
     }
   }
 };

package/components/fields/richText.vue

@@ -1,13 +1,7 @@
 <template>
   <div :style="$styles()" :class="$classes()">
     <v-progress-linear v-if="showProgress" v-model="progress.value" />
-    <VueEditor
-      v-model="rawValue"
-      :editor-toolbar="customToolbar"
-      :use-custom-image-handler="true"
-      @text-change="separateOutImages"
-      @image-added="uploadImage"
-    />
+    <VueEditor v-model="rawValue" :editor-toolbar="customToolbar" />
     <input type="hidden" :name="spec.name" :value="markdownValue" />
     <input
       v-for="(imageKey, index) in imageKeys"
@@ -39,7 +33,7 @@ export default {
       ["bold", "italic", "strike"],
       [{ header: 1 }, { header: 2 }],
       [{ list: "ordered" }, { list: "bullet" }],
-      ["blockquote", "link"]
+      ["image", "link"]
     ],
     rawValue: "",
     cleanValue: "",
@@ -49,6 +43,14 @@ export default {
     imageUploader: {},
     turndownService: new TurndownService({ headingStyle: "atx" })
   }),
+  computed: {
+    showProgress: function() {
+      return this.progress.value >= 0;
+    },
+    markdownValue: function() {
+      return this.turndownService.turndown(this.rawValue);
+    }
+  },
   // mounted: function () {
   //   const vm = this
   //   this.rawValue = (this.spec.value || "").replace(/\{\{image([0-9]+)\}\}/g, function (_, index) {
@@ -62,13 +64,8 @@ export default {
   //     return "{{IMAGE_NOT_FOUND}}"
   //   })
   // },
-  computed: {
-    showProgress: function() {
-      return this.progress.value >= 0;
-    },
-    markdownValue: function() {
-      return this.turndownService.turndown(this.rawValue);
-    }
+  mounted() {
+    this.registerScrollEvent();
   },
   methods: {
     $ready() {
@@ -162,12 +159,39 @@ export default {
       };
       reader.readAsDataURL(file);
       vm.progress.value = -1;
+    },
+    updateToolbar: function(wrapper, toolbar, container) {
+      if (wrapper.scrollTop >= container.offsetTop) {
+        toolbar.classList.add("sticky");
+        toolbar.style.top = `${wrapper.offsetTop}px`;
+        toolbar.style.left = `${wrapper.offsetLeft}px`;
+        toolbar.style.width = `${wrapper.offsetWidth}px`;
+      } else {
+        toolbar.classList.remove("sticky");
+        toolbar.style.top = "auto";
+        toolbar.style.left = "auto";
+        toolbar.style.width = "auto";
+      }
+    },
+    registerScrollEvent: function() {
+      const wrapper = document.querySelector(".v-dialog") || window;
+      const toolbar = this.$el.querySelector(".ql-toolbar");
+      const container = this.$el.querySelector(".ql-container");
+
+      if (wrapper) {
+        wrapper.addEventListener("scroll", () =>
+          this.updateToolbar(wrapper, toolbar, container)
+        );
+        window.addEventListener("resize", () =>
+          this.updateToolbar(wrapper, toolbar, container)
+        );
+      }
     }
   }
 };
 </script>
 
-<style scoped>
+<style>
 /*
 @import "~vue2-editor/dist/vue2-editor.css";
 @import '~quill/dist/quill.core.css';
@@ -177,4 +201,9 @@ export default {
   height: 375px;
 }
 */
+.ql-toolbar.sticky {
+  position: fixed;
+  z-index: 99;
+  background-color: white;
+}
 </style>

package/components/fields/text.vue

@@ -35,6 +35,8 @@
 </template>
 
 <script>
+import eventFiltering from "../../utils/eventFiltering";
+
 export default {
   props: {
     spec: { type: Object, required: true },
@@ -125,8 +127,10 @@ export default {
     classes() {
       return this.$classes().concat("g-text-field--hintless");
     },
-    // TODO: Consider using debounce to wait until user has finished typing.
-    onChange() {
+    onChange: eventFiltering.debounce(function() {
+      this.executeActionWithParams();
+    }, 300),
+    executeActionWithParams() {
       Utils.type.ifObject(this.spec.onChange, onChange => {
         this.$nextTick(() => {
           const params = {

package/components/mixins/events.js

@@ -25,6 +25,9 @@ export default {
       return this.$data._events === null;
     }
   },
+  created() {
+    this.$created();
+  },
   mounted() {
     this._executeIfReady(false);
     this.$mounted();
@@ -129,14 +132,22 @@ export default {
       }
       this.$data._events = null;
     },
+    // Order of execution:
+    // Initial page load: $created() -> $ready() -> $mounted() -> $updated() (because of $ready(), may get called multiple times)
+    // windows_open: $created() (only if it isn't reused) -> $ready() -> $mounted() (only if it isn't reused) -> $updated()
+    // components_update: $ready() -> $updated() (because of $ready(), may get called multiple times)
     $ready() {
+      // To be overridden. Initialize component data here.
+      // This method has to be idempotent because it might get called multiple times (due to components_update).
+    },
+    $created() {
       // To be overridden
     },
     $tearDown() {
       // To be overridden
     },
     $mounted() {
-      // To be overridden
+      // To be overridden. Put one-off event listener initialization here (e.g. $onEvent()).
     },
     $updated() {
       // To be overridden
@@ -167,8 +178,5 @@ export default {
         GLib.action.execute(this.spec.onTypeEnd, this);
       }, duration);
     }
-    // $onZero() {
-    //   GLib.action.execute(this.spec.onZero, null, this);
-    // },
   }
 };

package/components/panels/form.vue

@@ -46,7 +46,7 @@ export default {
     }
   },
   methods: {
-    $ready: function() {
+    $mounted() {
       this.$onEvent("forms/addSubmit", e => {
         this.submitButtons.push(e.data);
       });
@@ -66,7 +66,8 @@ export default {
       this.$onEvent("forms/directSubmit", e => {
         this.directSubmit();
       });
-
+    },
+    $ready() {
       this.formElement = this.$refs.form.$el;
       this.parentStyles = this.genericStyles({ width: this.spec.width });
 

package/components/progressCircle.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-progress-circular
+    :class="$classes()"
+    :rotate="spec.rotate || 270"
+    :size="spec.size || 100"
+    :width="spec.width || 20"
+    :color="spec.color"
+    :value="spec.value"
+  >
+    <span class="grey--text text--lighten-1 text-h5">{{ spec.text }}</span>
+  </v-progress-circular>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style scoped></style>

package/components/shareButton.vue

@@ -101,7 +101,8 @@ export default {
         // manually attach event listener because @click not working
         parentElement
           .querySelector(`a.${this.$el.classList[0]}`)
-          .addEventListener("click", () => {
+          .addEventListener("click", e => {
+            e.preventDefault();
             Action.execute(this.spec.onClick, this);
           });
       }

package/nav/drawer.vue

@@ -26,6 +26,8 @@
       <panels-responsive :spec="spec.header" />
     </template>
 
+    <glib-component v-if="spec.custom" :spec="spec.custom" />
+
     <v-list dense class="pt-0">
       <div v-for="(item, index) in spec.rows" :key="index" class="nav-item">
         <div v-if="item.type == 'button'" class="indicator"></div>
@@ -50,75 +52,6 @@
 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,
@@ -169,7 +102,6 @@ export default {
   methods: {
     $ready() {
       this.shrunk = this.mini = this.cssClasses.includes("mini");
-      this.updateNavigationStyle(window.location);
 
       // this.$el.addEventListener('drawers/clickButton', () => { this.updateState(false) }, false)
       this.$el.addEventListener("drawers/clickButton", () => {
@@ -183,15 +115,6 @@ export default {
     },
     expandOnHover() {
       return this.mini;
-    },
-    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");
     }
   }
 };

package/package.json

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

package/utils/eventFiltering.js

@@ -0,0 +1,11 @@
+export default class {
+  static debounce(func, timeout = 300) {
+    let timer;
+    return function(...args) {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        func.apply(this, args);
+      }, timeout);
+    };
+  }
+}

package/utils/format.js

@@ -2,7 +2,7 @@ import { marked } from "marked";
 
 export default class {
   static markdown(text) {
-    return marked(text, { sanitize: true });
+    return marked(text);
   }
 
   static local_iso8601(date) {