glib-web 0.6.2 → 0.6.9

package/components/mixins/dataset.js

@@ -0,0 +1,10 @@
+export default {
+  mounted() {
+    if (this.spec && this.spec.dataset) {
+      const data = this.spec.dataset;
+      for (const key in this.spec.dataset) {
+        this.$el.dataset[key] = data[key];
+      }
+    }
+  }
+};

package/components/mixins/events.js

@@ -69,8 +69,7 @@ export default {
       if (!e.metaKey && !e.ctrlKey && e.button === 0) {
         e.preventDefault();
         e.stopPropagation();
-        // Action.execute(properties.onClick, target || event.target, this);
-        Action.execute(properties.onClick, null, this);
+        Action.execute(properties.onClick, this);
       }
     },
     $rel: function(spec) {
@@ -88,7 +87,7 @@ export default {
     //   return this.spec.onLongPress ? this.$onLongPress : null;
     // },
     $onLongPress() {
-      GLib.action.execute(this.spec.onLongPress, null, this);
+      GLib.action.execute(this.spec.onLongPress, this);
     },
     $addViewportChangeListeners: function(handler) {
       window.addEventListener("load", handler);
@@ -163,12 +162,12 @@ export default {
       this.$el.addEventListener(name, handler);
     },
     $onTyping({ duration = 2000 }) {
-      GLib.action.execute(this.spec.onTypeStart, null, this);
+      GLib.action.execute(this.spec.onTypeStart, this);
       clearTimeout(this.timer);
 
       this.timer = setTimeout(() => {
         this._typingTimer = null;
-        GLib.action.execute(this.spec.onTypeEnd, null, this);
+        GLib.action.execute(this.spec.onTypeEnd, this);
       }, duration);
     }
     // $onZero() {

package/components/mixins/generic.js

@@ -23,6 +23,12 @@ export default {
       });
       return augmentedRules;
     },
+    // This can be overridden by the component to ensure that dialogs are shown within the component,
+    // which is necessary for operations requiring certain hierarchy, e.g. submitting a form from a
+    // child dialog.
+    $dialogContainer() {
+      return document.body;
+    },
     $wsSubscribeEvents(spec) {
       if (!Utils.type.isObject(spec)) {
         return;

package/components/mixins/list/autoload.js

@@ -64,7 +64,6 @@ export default {
         (el, visible) => {
           if (visible) {
             this._handleTopScroll(onScrollToTop);
-            // GLib.action.execute(onScrollToTop, null, this);
           }
         }
       );
@@ -72,7 +71,7 @@ export default {
       this.$addViewportChangeListeners(this.topScrollHandler);
     },
     _handleTopScroll(onScrollToTop) {
-      GLib.action.execute(onScrollToTop, null, this);
+      GLib.action.execute(onScrollToTop, this);
     },
     _registerBottomScroll(onScrollToBottom) {
       this.bottomScrollHandler = this.$onVisibilityChange(
@@ -108,7 +107,7 @@ export default {
         );
       }
 
-      GLib.action.execute(onScrollToBottom, null, this);
+      GLib.action.execute(onScrollToBottom, this);
     },
     autoloadAll(nextPage) {
       const vm = this;

package/components/mixins/table/autoload.js

@@ -56,7 +56,7 @@ export default {
       // this.topScrollHandler();
     },
     _handleTopScroll(onScrollToTop) {
-      GLib.action.execute(onScrollToTop, null, this);
+      GLib.action.execute(onScrollToTop, this);
     },
     _registerBottomScroll(onScrollToBottom) {
       this.bottomScrollHandler = this.$onVisibilityChange(
@@ -95,7 +95,7 @@ export default {
         );
       }
 
-      GLib.action.execute(onScrollToBottom, null, this);
+      GLib.action.execute(onScrollToBottom, this);
     },
     autoloadAll(nextPage) {
       const vm = this;

package/components/mixins/tour.js

@@ -0,0 +1,75 @@
+import Driver from "driver.js";
+import "driver.js/dist/driver.min.css";
+
+class TourHelper {
+  constructor() {
+    this.keys = [];
+    this.storage = window.localStorage;
+
+    this.driver = new Driver({
+      doneBtnText: "Done",
+      closeBtnText: "Skip tour",
+      nextBtnText: "Next tip",
+      prevBtnText: "Prev",
+      onHighlighted: element => {
+        console.log("onHighlighted", element);
+        // TODO
+        // this.keys.forEach(value => this.storage.removeItem(value));
+        // this.storage.setItem(element.node.dataset.key, 1);
+      }
+    });
+
+    this.elements = [];
+  }
+}
+
+const helper = new TourHelper();
+
+export default {
+  methods: {
+    registerTour() {
+      if (this.spec.tour) {
+        helper.elements.push(this);
+      }
+    },
+    startTour() {
+      if (helper.elements && helper.elements.length > 0) {
+        helper.elements = Array.from(helper.elements).sort(
+          (a, b) => a.index - b.index
+        );
+        let stepDefinitions = helper.elements.map(element => {
+          const tourSpec = element.spec.tour;
+
+          return {
+            element: element.$el,
+            popover: {
+              title: tourSpec.title,
+              description: tourSpec.message,
+              position: tourSpec.position
+            }
+          };
+        });
+
+        // TODO
+        // this.keys = helper.elements.map(value => value.dataset.key);
+
+        helper.driver.defineSteps(stepDefinitions);
+
+        helper.driver.start(this.latestTourStep());
+      }
+    },
+    latestTourStep() {
+      let step = 0;
+
+      // TODO
+      // Array.from(this.elements).forEach(element => {
+      //   if (this.storage.getItem(element.dataset.key)) {
+      //     step = parseInt(element.dataset.index);
+      //   }
+      // });
+      // return step;
+
+      return step;
+    }
+  }
+};

package/components/mixins/ws/actionCable.js

@@ -34,7 +34,7 @@ export default {
               const action = data.action;
               const payload = { ...action, filterKey: ws.filterKey };
               if (ws.filterKey === data.filterKey) {
-                GLib.action.execute(payload, null, component);
+                GLib.action.execute(payload, component);
               }
             }
           });

package/components/multimedia/video.vue

@@ -0,0 +1,87 @@
+<template>
+  <div :style="styles()" :class="$classes()">
+    <iframe
+      :width="width"
+      :height="height"
+      :src="videoUrl"
+      allowfullscreen
+    ></iframe>
+  </div>
+</template>
+
+<script>
+const urlRegex = /^(?:(?:https?:)?\/\/)?(?:www\.)?(?:m\.)?(?:youtu(?:be)?\.com\/(?:v\/|embed\/|watch(?:\/|\?v=))|youtu\.be\/)((?:\w|-){11})(?:\S+)?$/;
+
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      videoUrl: "",
+      width: null,
+      height: null,
+      paddingBottom: null
+    };
+  },
+  methods: {
+    $ready() {
+      this.width = this.$length(this.spec.width);
+      this.height = this.$length(this.spec.height);
+
+      if (this.height == null) {
+        // Let the container calculates the height
+        this.height = "100%";
+
+        if (this.width == "100%") {
+          // 16:9 aspect ratio
+          // See https://stackoverflow.com/questions/35814653/automatic-height-when-embedding-a-youtube-video
+          this.paddingBottom = "56.25%";
+        } else {
+          Utils.type.ifNumber(this.spec.width, val => {
+            const height = (val * 9) / 16;
+            this.paddingBottom = `${height}px`;
+          });
+        }
+      }
+
+      const url = this.spec.url;
+      if (this.isYoutube(url)) {
+        this.videoUrl = this.embededYoutubeUrl(this.extractYoutubeId(url));
+      } else {
+        this.videoUrl = url;
+      }
+    },
+    styles() {
+      const styles = this.$styles();
+
+      // See https://stackoverflow.com/questions/35814653/automatic-height-when-embedding-a-youtube-video
+      styles["position"] = "relative";
+      styles["padding-bottom"] = this.paddingBottom;
+
+      return styles;
+    },
+    isYoutube(url) {
+      return !!String(url).match(urlRegex);
+    },
+    extractYoutubeId(url) {
+      let match = urlRegex.exec(url);
+      return match ? match[1] : false;
+    },
+    embededYoutubeUrl(youtubeId) {
+      return "https://www.youtube.com/embed/:youtubeId".replace(
+        ":youtubeId",
+        youtubeId
+      );
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>

package/components/panels/form.vue

@@ -60,6 +60,10 @@ export default {
         this.submit();
       });
 
+      this.$onEvent("forms/directSubmit", e => {
+        this.directSubmit();
+      });
+
       this.formElement = this.$refs.form.$el;
       this.parentStyles = this.genericStyles({ width: this.spec.width });
 
@@ -104,18 +108,24 @@ export default {
               [this.spec.paramNameForFormData || "formData"]: formData
             };
             const data = Object.assign({}, onSubmit, params);
-            GLib.action.execute(data, null, this);
+            GLib.action.execute(data, this);
           },
           () => {
-            GLib.form.submitData(this.formElement, this);
+            this.directSubmit();
           }
         );
       } else {
-        Utils.launch.alert("Make sure all fields are valid");
+        Utils.launch.dialog.alert("Make sure all fields are valid");
       }
     },
+    directSubmit() {
+      GLib.form.submitData(this.formElement, this);
+    },
     action_clear() {
       this.formElement.reset();
+    },
+    $dialogContainer() {
+      return this.formElement;
     }
   }
 };

package/components/panels/list.vue

@@ -219,7 +219,7 @@ export default {
         }
       });
 
-      GLib.action.execute(mergedSpec, null, this);
+      GLib.action.execute(mergedSpec, this);
     },
     getSectionIndex(element) {
       return element.dataset.index;

package/components/switch.vue

@@ -26,9 +26,9 @@ export default {
     },
     changed() {
       if (this.enabled) {
-        GLib.action.execute(this.spec.onEnabled, {}, this);
+        GLib.action.execute(this.spec.onEnabled, this);
       } else {
-        GLib.action.execute(this.spec.onDisabled, {}, this);
+        GLib.action.execute(this.spec.onDisabled, this);
       }
     }
   }

package/index.js

@@ -78,6 +78,9 @@ Vue.mixin(stylesMixin);
 import scrollingMixin from "./components/mixins/scrolling.js";
 Vue.mixin(scrollingMixin);
 
+import datasetMixins from "./components/mixins/dataset.js";
+Vue.mixin(datasetMixins);
+
 import longClickDirective from "./components/mixins/longClick.js";
 window.longClickInstance = longClickDirective({ delay: 500, interval: 0 });
 Vue.directive("longclick", window.longClickInstance);

package/nav/appbar.vue

@@ -108,7 +108,7 @@ export default {
     },
     viewSource: function() {
       const properties = { message: this.page };
-      Launch.dialog(Object.assign({}, properties));
+      Utils.launch.dialog.open(Object.assign({}, properties));
     },
     avatarSpec(spec) {
       return {

package/nav/dialog.vue

@@ -89,7 +89,7 @@ export default {
         this.title = this.spec.title;
         this.message = this.spec.message;
         this.body = this.spec.body;
-        Action.execute(spec.onLoad, null, this);
+        Action.execute(spec.onLoad, this);
       }
 
       this.stack.push(this);
@@ -105,7 +105,7 @@ export default {
     click(spec, event) {
       const onClick = spec["onClick"];
       this.model = false;
-      Action.execute(onClick, event.target, this);
+      Action.execute(onClick, this);
     }
   }
 };

package/nav/drawer.vue

@@ -7,26 +7,41 @@
     app
     :class="cssClasses"
     :dark="cssClasses.includes('dark')"
-    :expand-on-hover="expandOnHover()"
     :permanent="cssClasses.includes('permanent')"
     :style="style"
+    :expand-on-hover="expandOnHover()"
+    :mini-variant.sync="mini"
     @input="updateState"
   >
+    <template v-slot:prepend>
+      <v-list-item>
+        <v-list-item-icon>
+          <v-icon v-if="!mini">mdi-chevron-left</v-icon>
+          <v-icon v-if="mini">mdi-chevron-right</v-icon>
+        </v-list-item-icon>
+      </v-list-item>
+    </template>
+
     <template v-if="spec.header">
-      <!-- <v-toolbar flat> -->
       <panels-responsive :spec="spec.header" />
-      <!-- </v-toolbar> -->
-      <v-divider></v-divider>
     </template>
 
     <v-list dense class="pt-0">
-      <div v-for="(item, index) in spec.rows" :key="index">
+      <div v-for="(item, index) in spec.rows" :key="index" class="nav-item">
+        <div v-if="item.type == 'button'" class="indicator"></div>
         <v-divider v-if="item.type == 'divider'" />
         <nav-drawerLabel v-else-if="item.type == 'label'" :spec="item" />
         <nav-drawerButton v-else :spec="item" />
-        <!-- <nav-drawerButton :spec="item" :state="state" v-else /> -->
       </div>
     </v-list>
+
+    <template v-if="spec.footer" v-slot:append>
+      <v-list-item>
+        <!-- Display the first line when the drawer is shrunk. Display the second line when the drawer is expanded -->
+        <div style="display: none">Show if expand</div>
+        <panels-responsive :spec="spec.footer" />
+      </v-list-item>
+    </template>
   </v-navigation-drawer>
 </template>
 
@@ -50,7 +65,8 @@ export default {
     return {
       // Using null as the starting value for its v-model will initialize the drawer as closed on mobile and as open on desktop.
       // See https://vuetifyjs.com/en/components/navigation-drawers
-      state: null
+      state: null,
+      mini: true
     };
   },
   computed: {
@@ -102,4 +118,18 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.nav-item {
+  position: relative;
+}
+.nav-item:hover .indicator {
+  display: flex;
+  position: absolute;
+  width: 3px;
+  height: 65%;
+  margin: 10px 0;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+}
+</style>

package/nav/sheet.vue

@@ -49,8 +49,7 @@ export default {
       this.model = false;
 
       Utils.type.ifFunction(spec.onClickFunction, f => f());
-      GLib.action.execute(spec.onClick, event.target, this);
-      // this.$onClick(spec, event.target, this);
+      GLib.action.execute(spec.onClick, this);
     }
   }
 };

package/nav/snackbar.vue

@@ -62,8 +62,7 @@ export default {
     click: function(spec) {
       const onClick = spec["onClick"];
       this.show = false;
-      // Action.execute(onClick, event.target, this);
-      GLib.action.execute(onClick, null, this);
+      GLib.action.execute(onClick, this);
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "0.6.2",
+  "version": "0.6.9",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -28,7 +28,8 @@
     "vue2-editor": "^2.9.1",
     "vue2-google-maps": "^0.10.6",
     "vuedraggable": "^2.24.1",
-    "vuetify": "2.3.9"
+    "vuetify": "2.3.9",
+    "driver.js": "^0.9.8"
   },
   "devDependencies": {
     "@types/chart.js": "^2.9.34",

package/utils/form.js

@@ -2,12 +2,8 @@ export default class {
   // Execution flows:
   // Button -> Button.onClick() -> Utils.http.execute() -- doesn't save autofill values
   // Button -> Button.onClick() -> form.submit() -- doesn't execute Form.onSubmit(), so cannot call Utils.http.execute() there
-  // Submit -> Form.onSubmit() -> Utils.http.execute() -- save autofill values, but cannot have submit action nested in another action
-  // TOTRY: Button -> Button.onClick() -> form.clickSubmit() -> submit.click() -> Form.onSubmit() -> Utils.http.execute()
+  // Submit -> Form.onSubmit() -> Utils.http.execute() -- save autofill values and auto-submit when ENTER is pressed
   static submitData(form, component) {
-    // const form = target.closest("form");
-    // const form = this.formElement;
-
     // Analogous to Rails' form_with's local
     if (form.dataset.local) {
       form.submit();

package/utils/http.js

@@ -54,7 +54,7 @@ export default class {
         this.forceComponentUpdate(() => {
           Utils.history.resetScroll();
           window.vueApp.page = data;
-          Action.execute(properties["onOpen"], target, component);
+          Action.execute(properties["onOpen"], component);
         });
       });
     } else {
@@ -109,7 +109,7 @@ export default class {
         const redirectUrl = Utils.url.htmlUrl(response.url);
         Utils.history.updatePage(redirectUrl);
 
-        GLib.action.execute(properties["onReload"], null, component);
+        GLib.action.execute(properties["onReload"], component);
       });
     });
   }

package/utils/launch.js

@@ -5,7 +5,21 @@ import Snackbar from "../nav/snackbar";
 import Vuetify from "vuetify";
 
 export default class {
-  static dialog(properties, target) {
+  static get dialog() {
+    return LaunchDialog;
+  }
+
+  static get sheet() {
+    return LaunchSheet;
+  }
+
+  static get snackbar() {
+    return LaunchSnackbar;
+  }
+}
+
+class LaunchDialog {
+  static open(properties, component) {
     if (!this.stack) {
       this.stack = [];
     }
@@ -21,19 +35,20 @@ export default class {
       propsData: {
         spec: properties,
         stack: this.stack,
-        target: target,
         vueApp: window.vueApp
       }
     });
     // instance.stack = this.stack;
 
-    const placeholder = document.body.appendChild(
-      document.createElement("div")
-    );
-    instance.$mount(placeholder);
+    if (component) {
+      const placeholder = component
+        .$dialogContainer()
+        .appendChild(document.createElement("div"));
+      instance.$mount(placeholder);
+    }
   }
 
-  static closeDialog(properties, target, component) {
+  static close(properties, component) {
     if (!this.stack) {
       this.stack = [];
     }
@@ -43,19 +58,11 @@ export default class {
     });
 
     Utils.type.ifObject(properties["onClose"], it => {
-      Action.execute(it, target, component);
+      Action.execute(it, component);
     });
   }
 
-  static get sheet() {
-    return LaunchSheet;
-  }
-
-  static get snackbar() {
-    return LaunchSnackbar;
-  }
-
-  static alert(message, target) {
+  static alert(message) {
     const properties = {
       message: message
     };
@@ -67,7 +74,7 @@ export default class {
         }
       ]
     });
-    this.dialog(spec, target);
+    this.dialog(spec);
   }
 }