glib-web 0.6.2 → 0.6.9

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/fields/radioGroup.vue

@@ -3,6 +3,7 @@
     v-model="fieldModel"
     :name="fieldName"
     :disabled="spec.readOnly"
+    :rules="$validation()"
   >
     <div v-for="(item, index) in spec.childViews" :key="index">
       <ui-component :spec="item" />

package/components/markdown.vue

@@ -32,6 +32,13 @@ export default {
         this.youtubeId = this.extractYoutubeId(this.spec.text);
         console.log("Detected Youtube ID", this.youtubeId);
       }
+      // Set all links to be openWeb or open in a new tab by default
+      if (!this.spec.openWeb) {
+        let anchors = document.querySelectorAll('a');
+        for (let i = 0; i < anchors.length; i++) {
+          anchors[i].setAttribute('target', '_blank')
+        }
+      }
     },
     // From https://gist.github.com/takien/4077195
     extractYoutubeId(url) {