glib-web 0.6.3 → 0.6.4

package/action.js

@@ -45,6 +45,8 @@ import ActionsCreditCard from "./actions/auth/creditCard";
 
 import ActionsAnalyticsLogEvent from "./actions/analytics/logEvent";
 
+import ActionCommandsCopy from "./actions/commands/copy";
+
 const actions = {
   runMultiple: ActionsRunMultiple,
 
@@ -89,11 +91,12 @@ const actions = {
   "auth/restart": ActionsAuthRestart,
   "auth/creditCard": ActionsCreditCard,
 
-  "analytics/logEvent": ActionsAnalyticsLogEvent
+  "analytics/logEvent": ActionsAnalyticsLogEvent,
+  "commands/copy": ActionCommandsCopy
 };
 
 export default class Action {
-  static execute(spec, target, component, params = {}) {
+  static execute(spec, component, params = {}) {
     if (!TypeUtils.isObject(spec)) {
       return;
     }
@@ -141,7 +144,7 @@ export default class Action {
       if (!logDisabled) {
         console.log(`Executing "${actionName}"`);
       }
-      action.execute(spec, null, component, params);
+      action.execute(spec, component, params);
     } catch (e) {
       console.log(
         "Failed executing command",
@@ -159,7 +162,7 @@ export default class Action {
     }
 
     window.vueApp.temp.analytics = response.analytics;
-    GLib.action.execute(response.onResponse, null, component);
+    GLib.action.execute(response.onResponse, component);
     window.vueApp.temp.analytics = null;
   }
 }

package/actions/analytics/logEvent.js

@@ -3,7 +3,7 @@ export default class {
     return true;
   }
 
-  execute(properties, target, component) {
+  execute(properties, component) {
     if (Utils.settings.isDev) {
       return;
     }

package/actions/auth/creditCard.js

@@ -9,9 +9,9 @@ export default class {
         Utils.http.stopIndicator(component);
 
         if (result.error) {
-          GLib.action.execute(properties.onFailure, {}, component);
+          GLib.action.execute(properties.onFailure, component);
         } else {
-          GLib.action.execute(properties.onSuccess, {}, component);
+          GLib.action.execute(properties.onSuccess, component);
         }
       });
     } else {
@@ -19,9 +19,9 @@ export default class {
         Utils.http.stopIndicator(component);
 
         if (result.error) {
-          GLib.action.execute(properties.onFailure, {}, component);
+          GLib.action.execute(properties.onFailure, component);
         } else {
-          GLib.action.execute(properties.onSuccess, {}, component);
+          GLib.action.execute(properties.onSuccess, component);
         }
       });
     }

package/actions/auth/saveCsrfToken.js

@@ -2,11 +2,11 @@
 // import Keys from '../../keys'
 
 export default class {
-  execute(properties, target, component) {
+  execute(properties, component) {
     // console.log(properties['token'])
     // Storage.setLocal(Keys.Db.csrfToken, properties['token'])
-    
-    Utils.dom.setCsrf(properties['token'])
-    Action.execute(properties['onSave'], target, component)
+
+    Utils.dom.setCsrf(properties["token"]);
+    Action.execute(properties["onSave"], component);
   }
 }

package/actions/cables/push.js

@@ -1,17 +1,5 @@
 export default class {
   execute(properties) {
-    // const spec = Object.assign({}, properties, {
-    //   buttons: [
-    //     {
-    //       text: "OK",
-    //       onClick: properties.onClose
-    //     }
-    //   ]
-    // });
-    // Launch.dialog(spec);
-
-    // const ws = window.vueApp.actionCable;
-
     Utils.type.ifString(properties.channel, channelName => {
       const ws = window.vueApp.actionCable;
       const channel = ws.channels[channelName];

package/actions/commands/copy.js

@@ -0,0 +1,12 @@
+export default class {
+  execute(properties) {
+    let spec = Object.assign({}, properties, {
+      message: "Copied",
+      styleClasses: ["success"]
+    });
+    navigator.clipboard.writeText(properties.text).then(
+      () => Utils.launch.snackbar.open(spec),
+      reason => console.error("Could not copy text: " + reason)
+    );
+  }
+}

package/actions/dialogs/alert.js

@@ -1,7 +1,7 @@
 import Launch from "../../utils/launch";
 
 export default class {
-  execute(properties) {
+  execute(properties, component) {
     const spec = Object.assign({}, properties, {
       buttons: [
         {
@@ -10,6 +10,6 @@ export default class {
         }
       ]
     });
-    Launch.dialog(spec);
+    Utils.launch.dialog.open(spec, component);
   }
 }

package/actions/dialogs/close.js

@@ -1,7 +1,5 @@
-import Launch from '../../utils/launch'
-
 export default class {
-  execute(properties, target, component) {
-    Launch.closeDialog(properties, target, component)
+  execute(spec, component) {
+    Utils.launch.dialog.close(spec, component);
   }
 }

package/actions/dialogs/notification.js

@@ -1,12 +1,12 @@
 import Push from "push.js";
 
 export default class {
-  execute(properties, target, component) {
+  execute(properties, component) {
     Push.create(properties.title, {
       body: properties.message,
       onClick() {
         const onClick = properties.onClick;
-        GLib.action.execute(onClick, null, component);
+        GLib.action.execute(onClick, component);
         this.close();
       }
     });

package/actions/dialogs/open.js

@@ -1,7 +1,5 @@
-import Launch from "../../utils/launch";
-
 export default class {
-  execute(properties) {
-    Launch.dialog(properties);
+  execute(spec, component) {
+    Utils.launch.dialog.open(spec, component);
   }
 }

package/actions/dialogs/show.js

@@ -1,5 +1,6 @@
 export default class {
-  execute(properties) {
-    Utils.launch.dialog(properties);
+  execute(spec, component) {
+    console.log("P1", spec);
+    Utils.launch.dialog.open(spec, component);
   }
 }

package/actions/forms/submit.js

@@ -1,15 +1,5 @@
 export default class {
-  execute(properties, target, component) {
-    const form = component.$closest("panels-form");
-    if (form != null) {
-      form.submit();
-    }
-
-    // const vm = this;
-    // // Allows time for things to get finalized. For example, select.vue needs time to insert values
-    // // into hidden fields before they get submitted.
-    // setTimeout(() => {
-    //   vm.submit(target, component);
-    // }, 10);
+  execute(properties, component) {
+    component.$dispatchEvent("forms/directSubmit");
   }
 }

package/actions/http/delete.js

@@ -1,5 +1,5 @@
 export default class {
-  execute(properties, target, controller) {
+  execute(properties, controller) {
     GLib.http.execute(properties, "DELETE", controller, response =>
       GLib.action.handleResponse(response, controller)
     );

package/actions/http/patch.js

@@ -1,5 +1,5 @@
 export default class {
-  execute(properties, target, controller) {
+  execute(properties, controller) {
     GLib.http.execute(properties, "PATCH", controller, response =>
       GLib.action.handleResponse(response, controller)
     );

package/actions/http/post.js

@@ -1,5 +1,5 @@
 export default class {
-  execute(properties, target, controller) {
+  execute(properties, controller) {
     GLib.http.execute(properties, "POST", controller, response =>
       GLib.action.handleResponse(response, controller)
     );

package/actions/http/put.js

@@ -1,5 +1,5 @@
 export default class {
-  execute(properties, target, controller) {
+  execute(properties, controller) {
     GLib.http.execute(properties, "PUT", controller, response =>
       GLib.action.handleResponse(response, controller)
     );

package/actions/runMultiple.js

@@ -3,9 +3,9 @@ export default class {
     return true;
   }
 
-  execute(properties, target, component) {
+  execute(properties, component) {
     for (const action of properties.childActions) {
-      GLib.action.execute(action, null, component);
+      GLib.action.execute(action, component);
     }
   }
 }

package/actions/timeouts/set.js

@@ -1,5 +1,5 @@
 export default class {
-  execute(properties, target, component) {
+  execute(properties, component) {
     component.$data._isBusy = true;
 
     if (properties.repeat) {
@@ -15,6 +15,6 @@ export default class {
 
   onTimeout(properties, component) {
     component.$data._isBusy = false;
-    GLib.action.execute(properties.onTimeout, null, component);
+    GLib.action.execute(properties.onTimeout, component);
   }
 }

package/actions/windows/close.js

@@ -1,12 +1,12 @@
 export default class {
-  execute(properties, target, component) {
+  execute(properties, component) {
     Utils.history.back();
 
     Utils.type.ifObject(properties["onClose"], it => {
       // Allow time for history.back() to complete, which is important for actions that need
       // to use window.location.href such as windows/reload
       setTimeout(function() {
-        GLib.action.execute(it, null, component);
+        GLib.action.execute(it, component);
       }, 100);
     });
   }

package/actions/windows/closeAll.js

@@ -1,7 +1,7 @@
 import Type from "../../utils/type";
 
 export default class {
-  execute(properties, target, component) {
+  execute(properties, component) {
     // TODO
     // window.history.deleteAll()
 
@@ -9,7 +9,7 @@ export default class {
       // Allow time for history.back() to complete, which is important for actions that need
       // to use window.location.href such as windows/reload
       setTimeout(function() {
-        GLib.action.execute(it, null, component);
+        GLib.action.execute(it, component);
       }, 100);
     });
   }

package/actions/windows/closeWithReload.js

@@ -1,7 +1,7 @@
 import Hash from "../../utils/hash";
 
 export default class {
-  execute(properties, target, component) {
+  execute(properties, component) {
     const fallbackUrl = new Hash(properties).remove("fallbackUrl");
     const data = Object.assign({}, properties);
     if (!Utils.history.back()) {

package/actions/windows/open.js

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

package/actions/windows/reload.js

@@ -1,5 +1,5 @@
 export default class {
-  execute(properties, target, component) {
+  execute(properties, component) {
     if (Utils.settings.reactive) {
       // const currentUrl = window.location.href;
       // const data = {

package/actions/ws/push.js

@@ -1,5 +1,5 @@
 export default class {
-  execute(properties, target, component, params) {
+  execute(properties, component, params) {
     Utils.type.ifString(properties.topic, topicName => {
       const ws = window.vueApp.webSocket;
       const channel = ws.channels[topicName];

package/app.vue

@@ -42,13 +42,14 @@ import Utils from "./utils/helper";
 import ContentLayout from "./nav/content";
 import phoenixSocketMixin from "./components/mixins/ws/phoenixSocket.js";
 import actionCableMixin from "./components/mixins/ws/actionCable.js";
+import tourMixin from "./components/mixins/tour";
 
 export default {
   components: {
     "nav-appbar": NavAppBar,
     "layouts-content": ContentLayout
   },
-  mixins: [phoenixSocketMixin, actionCableMixin],
+  mixins: [phoenixSocketMixin, actionCableMixin, tourMixin],
   props: {
     page: { type: Object, required: true }
   },
@@ -103,12 +104,13 @@ export default {
       if (Utils.history.isPoppedState(this.page)) {
         setTimeout(() => {
           // Wait until page is rendered
-          GLib.action.execute(this.page.onRefocus, null, this);
+          GLib.action.execute(this.page.onRefocus, this);
         });
       } else {
         setTimeout(() => {
           // Wait until page is rendered
-          GLib.action.execute(this.page.onLoad, null, this);
+          GLib.action.execute(this.page.onLoad, this);
+          this.startTour();
         });
       }
     }

package/components/button.vue

@@ -21,11 +21,18 @@
 </template>
 
 <script>
-import TooltipMixins from "./mixins/tooltip";
+import tooltipMixin from "./mixins/tooltip";
+import tourMixin from "./mixins/tour";
+
 export default {
-  mixins: [TooltipMixins],
+  mixins: [tooltipMixin, tourMixin],
   props: {
     spec: { type: Object, required: true }
+  },
+  methods: {
+    $ready() {
+      this.registerTour();
+    }
   }
 };
 </script>

package/components/calendar.vue

@@ -98,7 +98,7 @@ export default {
       });
     },
     showEvent({ event, target }) {
-      Action.execute(event.onClick, target, this);
+      Action.execute(event.onClick, this);
     }
   }
 };

package/components/component.vue

@@ -105,6 +105,8 @@ import ResponsivePanel from "./panels/responsive";
 import UlPanel from "./panels/ul";
 import WebPanel from "./panels/web";
 
+import MultimediaVideo from "./multimedia/video";
+
 import AlertBanner from "./banners/alert";
 import SelectBanner from "./banners/select";
 
@@ -185,6 +187,8 @@ export default {
     "panels-ul": UlPanel,
     "panels-web": WebPanel,
 
+    "multimedia-video": MultimediaVideo,
+
     "banners-alert": AlertBanner,
     "banners-select": SelectBanner,
 

package/components/fields/googlePlace.vue

@@ -1,13 +1,16 @@
-
 <!-- TODO: This probably can be merged with latLong-v1 or map-v1, i.e. add infoWindow support to latLong or map -->
 
 <template>
-  <v-container fluid class='pa-0'>
+  <v-container fluid class="pa-0">
     <div class="v-input v-text-field theme--light">
       <div class="v-input__control">
         <div class="v-input__slot">
           <div class="v-text-field__slot">
-            <label class="v-label theme--light v-label--active" style="left: 0px; right: auto; position: absolute;">Address</label>
+            <label
+              class="v-label theme--light v-label--active"
+              style="left: 0px; right: auto; position: absolute;"
+              >Address</label
+            >
             <!-- <gmap-place-input :default-place="placeName" :placeholder="Address" @place_changed="setPlace" /> -->
             <gmap-autocomplete
               :name="spec.name"
@@ -20,22 +23,39 @@
     </div>
 
     <gmap-map
+      ref="map"
       :center="{ lat: 25.105497, lng: 121.597366 }"
       :zoom="13"
       map-type-id="roadmap"
       style="width: 100%; height: 300px"
-      @click='onMapClick'
-      ref='map'
+      @click="onMapClick"
     >
-      <gmap-info-window :options="infoOptions" :position="markerPos" :opened="infoWinOpen" @closeclick="closeInfoWindow">
-        <div v-if='place !== null'>
+      <gmap-info-window
+        :options="infoOptions"
+        :position="markerPos"
+        :opened="infoWinOpen"
+        @closeclick="closeInfoWindow"
+      >
+        <div v-if="place !== null">
           <strong>{{ place.name }}</strong>
           <div>Place ID: {{ place.place_id }}</div>
           <div>Address: {{ place.formatted_address }}</div>
-          <div>Longitude: {{ place.geometry.location.lng() }}, Latitude: {{place.geometry.location.lat() }}</div>
+          <div>
+            Longitude: {{ place.geometry.location.lng() }}, Latitude:
+            {{ place.geometry.location.lat() }}
+          </div>
         </div>
-        <div v-if="spec.hasOwnProperty('infoWindow') && spec.infoWindow['actionButtons'].length > 0">
-          <v-btn v-for="(buttonSpec, i) in spec.infoWindow.actionButtons" :key="i" @click='onActionButtonClick($event, buttonSpec)'>
+        <div
+          v-if="
+            spec.hasOwnProperty('infoWindow') &&
+              spec.infoWindow['actionButtons'].length > 0
+          "
+        >
+          <v-btn
+            v-for="(buttonSpec, i) in spec.infoWindow.actionButtons"
+            :key="i"
+            @click="onActionButtonClick($event, buttonSpec)"
+          >
             {{ buttonSpec.text }}
           </v-btn>
         </div>
@@ -47,7 +67,7 @@
         @click="openInfoWindow"
       />
       <template v-slot:visible>
-        <div id="loading-container" class="d-none" ref="loading">
+        <div id="loading-container" ref="loading" class="d-none">
           <v-progress-circular indeterminate color="primary" />
         </div>
       </template>
@@ -56,10 +76,10 @@
 </template>
 
 <script>
-import Action from "../../action"
+import Action from "../../action";
 
 export default {
-  props: ['spec'],
+  props: ["spec"],
   data() {
     return {
       infoOptions: {
@@ -71,77 +91,85 @@ export default {
       markerPos: { lat: 0, lng: 0 },
       infoWinOpen: false,
       place: null
-    }
+    };
   },
   computed: {
     placeName() {
-      return (this.place == null ? '' : this.place.name)
+      return this.place == null ? "" : this.place.name;
     }
   },
   methods: {
     closeInfoWindow() {
-      this.infoWinOpen = false
+      this.infoWinOpen = false;
     },
     openInfoWindow() {
-      this.infoWinOpen = true
+      this.infoWinOpen = true;
     },
     toggleLoadingIndicator() {
-      this.$refs.loading.classList.toggle('d-none')
-      this.$refs.loading.classList.toggle('d-flex')
+      this.$refs.loading.classList.toggle("d-none");
+      this.$refs.loading.classList.toggle("d-flex");
     },
     onActionButtonClick(event, properties) {
-      properties.onClick['formData'] = {
-        'place[google_place_id]': this.place.place_id,
-        'place[name]': this.place.name,
-        'place[address]': this.place.formatted_address,
-        'place[longitude]': this.place.geometry.location.lng(),
-        'place[latitude]': this.place.geometry.location.lat(),
-      }
+      properties.onClick["formData"] = {
+        "place[google_place_id]": this.place.place_id,
+        "place[name]": this.place.name,
+        "place[address]": this.place.formatted_address,
+        "place[longitude]": this.place.geometry.location.lng(),
+        "place[latitude]": this.place.geometry.location.lat()
+      };
 
-      Action.execute(properties.onClick, event.target, this)
+      Action.execute(properties.onClick, this);
     },
     onMapClick(e) {
-      this.closeInfoWindow()
+      this.closeInfoWindow();
 
       if (e.placeId === undefined) {
-        return
+        return;
       }
 
-      e.stop()
-      this.toggleLoadingIndicator()
+      e.stop();
+      this.toggleLoadingIndicator();
 
       const request = {
         placeId: e.placeId,
-        fields: ['place_id', 'geometry', 'name', 'formatted_address']
-      }
-      var service = new google.maps.places.PlacesService(this.$refs.map.$mapObject)
+        fields: ["place_id", "geometry", "name", "formatted_address"]
+      };
+      var service = new google.maps.places.PlacesService(
+        this.$refs.map.$mapObject
+      );
       service.getDetails(request, place => {
-        this.toggleLoadingIndicator()
-        this.markerPos = place.geometry.location
-        this.place = place
-        this.openInfoWindow()
-      })
+        this.toggleLoadingIndicator();
+        this.markerPos = place.geometry.location;
+        this.place = place;
+        this.openInfoWindow();
+      });
     },
     setLocationField(name, value) {
-      let field = document.querySelector(`input[name="${name}"]`)
-      field.closest('div.v-input').classList.add('v-input--is-label-active')
-      field.closest('div.v-input').classList.add('v-input--is-dirty')
-      field.previousSibling.classList.add('v-label--active')
-      field.value = value
+      let field = document.querySelector(`input[name="${name}"]`);
+      field.closest("div.v-input").classList.add("v-input--is-label-active");
+      field.closest("div.v-input").classList.add("v-input--is-dirty");
+      field.previousSibling.classList.add("v-label--active");
+      field.value = value;
     },
     setPlace(place) {
-      const { location } = place.geometry
-      this.place = place
-      this.markerPos = location
-      this.$refs.map.$mapObject.setCenter(location)
+      const { location } = place.geometry;
+      this.place = place;
+      this.markerPos = location;
+      this.$refs.map.$mapObject.setCenter(location);
 
-      if (this.spec.hasOwnProperty('locationFields')) {
-        this.setLocationField(this.spec.locationFields.latitudeName, location.lat())
-        this.setLocationField(this.spec.locationFields.longitudeName, location.lng())
+      if (this.spec.hasOwnProperty("locationFields")) {
+        this.setLocationField(
+          this.spec.locationFields.latitudeName,
+          location.lat()
+        );
+        this.setLocationField(
+          this.spec.locationFields.longitudeName,
+          location.lng()
+        );
       }
     }
   }
-}
+};
 </script>
 
 <style scoped>

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/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/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.3",
+  "version": "0.6.4",
   "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);
   }
 }
 

package/utils/private/ws.js

@@ -16,7 +16,7 @@ export default class {
       console.log(`Executing component action: ${methodName}`);
       component[`action_${methodName}`](payload);
     } else {
-      GLib.action.execute(payload, null, component);
+      GLib.action.execute(payload, component);
     }
   }
 }

package/utils/uploader.js

@@ -63,28 +63,6 @@ export default class Uploader {
 
   validateFile(spec) {
     return this.validateFileAccordingToRules(spec.accepts);
-
-    // if (Type.isString(spec.accepts)) {
-    //   if (spec.accepts) {
-    //     const acceptsRegex = new RegExp(spec.accepts);
-
-    //     if (!acceptsRegex.test(this.file.type)) {
-    //       alert("Invalid file type.");
-    //       return false;
-    //     }
-    //   }
-
-    //   if (spec.file_size_limit) {
-    //     if (this.file.size > spec.file_size_limit * MB_SIZE) {
-    //       alert(spec.file_size_limit_alert_text);
-    //       return false;
-    //     }
-    //   }
-    // } else {
-    //   return this.validateFileAccordingToRules(spec.accepts);
-    // }
-
-    // return true;
   }
 
   validateFileAccordingToRules(spec) {
@@ -98,6 +76,10 @@ export default class Uploader {
         case "pdf":
           mimeType = "application/pdf";
           break;
+        case "zip":
+          // See https://stackoverflow.com/questions/856013/mime-type-for-zip-file-in-google-chrome
+          mimeType = "application/(zip|x-zip-compressed|octet-stream)";
+          break;
         default:
           return;
       }