glib-web 0.11.21 → 0.12.0

package/action.js

@@ -49,6 +49,8 @@ import ActionsAnalyticsLogEvent from "./actions/analytics/logEvent";
 
 import ActionCommandsCopy from "./actions/commands/copy";
 
+import ActionToursStart from "./actions/tours/start";
+
 const actions = {
   runMultiple: ActionsRunMultiple,
 
@@ -96,7 +98,8 @@ const actions = {
   "auth/creditCard": ActionsCreditCard,
 
   "analytics/logEvent": ActionsAnalyticsLogEvent,
-  "commands/copy": ActionCommandsCopy
+  "commands/copy": ActionCommandsCopy,
+  "tours/start": ActionToursStart
 };
 
 export default class Action {

package/actions/tours/start.js

@@ -0,0 +1,17 @@
+import Driver from "driver.js";
+import "driver.js/dist/driver.min.css";
+
+export default class {
+  execute(spec, component) {
+    let driver = new Driver(spec.options || {});
+    let steps = spec.steps;
+    steps
+      .filter(value => value.customBehavior)
+      .forEach(step => {
+        const element = document.querySelector(step.element);
+        component.driverCustomBehavior[step.customBehavior](element, driver);
+      });
+    driver.defineSteps(steps);
+    driver.start(spec.startFrom || 0);
+  }
+}

package/app.vue

@@ -42,14 +42,13 @@ 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, tourMixin],
+  mixins: [phoenixSocketMixin, actionCableMixin],
   props: {
     page: { type: Object, required: true }
   },
@@ -111,7 +110,6 @@ export default {
         setTimeout(() => {
           // Wait until page is rendered
           GLib.action.execute(this.page.onLoad, this);
-          this.startTour();
         });
       }
     }

package/components/button.vue

@@ -19,10 +19,9 @@
 
 <script>
 import tooltipMixin from "./mixins/tooltip";
-import tourMixin from "./mixins/tour";
 
 export default {
-  mixins: [tooltipMixin, tourMixin],
+  mixins: [tooltipMixin],
   props: {
     spec: { type: Object, required: true }
   },
@@ -33,7 +32,6 @@ export default {
   },
   methods: {
     $ready() {
-      this.registerTour();
       this.tooltip = this.spec.tooltip || { disabled: true };
     }
   }

package/components/component.vue

@@ -26,7 +26,7 @@
 
   <!-- <panels-responsive v-else-if="spec.view == 'panels/scroll-v1'" :spec="spec" /> -->
 
-  <component :is="name" v-else-if="name" :spec="spec" />
+  <component :is="name" v-else-if="name" :id="spec.id" :spec="spec" />
 
   <div v-else>Unsupported view: {{ spec.view }}</div>
 </template>

package/index.js

@@ -125,6 +125,9 @@ window.GLib = Framework;
 import { settings } from "./utils/settings";
 export { settings };
 
+import driverCustomBehavior from "./plugins/driverCustomBehavior";
+Vue.use(driverCustomBehavior);
+
 // TODO: https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components
 // Vue.component('async-webpack-example', function (resolve) {
 //   // This special require syntax will instruct Webpack to

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "0.11.21",
+  "version": "0.12.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -21,8 +21,6 @@
     "marked": "^4.0.0",
     "phoenix": "^1.5.3",
     "push.js": "^1.0.12",
-    "sass": "^1.38.0",
-    "sass-loader": "10.1.1",
     "vue": "2.6.14",
     "vue-chartkick": "^0.6.1",
     "vue-gtag": "^1.1.2",

package/plugins/driverCustomBehavior.js

@@ -0,0 +1,13 @@
+export default {
+  install: (Vue, options) => {
+    let driverCustomBehavior = {};
+    driverCustomBehavior.clickToNext = (element, driver) => {
+      element.addEventListener("click", () => driver.moveNext());
+    };
+    driverCustomBehavior.focusToNext = (element, driver) => {
+      element.addEventListener("focus", () => driver.moveNext());
+    };
+
+    Vue.prototype.driverCustomBehavior = driverCustomBehavior;
+  }
+};

package/components/mixins/tour.js

@@ -1,75 +0,0 @@
-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;
-    }
-  }
-};