glib-web 0.5.98 → 0.6.2

package/components/label.vue

@@ -1,62 +1,62 @@
-<template>
-  <a
-    v-if="spec.onClick"
-    :href="$href()"
-    :rel="$rel()"
-    :style="textStyles()"
-    :class="$classes()"
-    @click="$onClick()"
-    >{{ text }}</a
-  >
-  <span v-else :style="$styles()" :class="$classes()">{{ text }}</span>
-</template>
-
-<script>
-import actionCableMixin from "./mixins/ws/actionCable";
-import textMixin from "./mixins/text.js";
-
-export default {
-  mixins: [actionCableMixin, textMixin],
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data: function() {
-    return {
-      text: " "
-    };
-  },
-  methods: {
-    $ready() {
-      this.$wsInitActionCable(this.spec.actionCable);
-
-      this.text = this.spec.text;
-    },
-    action_set(spec) {
-      if (spec.user_id !== spec.filterKey) {
-        this.text = spec.text;
-      }
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-span,
-a {
-  /* white-space: pre-line; */
-  white-space: pre-wrap;
-
-  /* Without this, padding-top doesn't work */
-  display: inline-block;
-  line-height: 1;
-}
-span.muted {
-  opacity: 0.7;
-}
-span.small {
-  font-size: 80%;
-}
-a:hover {
-  text-decoration: none;
-}
-</style>
+<template>
+  <a
+    v-if="spec.onClick"
+    :href="$href()"
+    :rel="$rel()"
+    :style="textStyles()"
+    :class="$classes()"
+    @click="$onClick()"
+    >{{ text }}</a
+  >
+  <span v-else :style="$styles()" :class="$classes()">{{ text }}</span>
+</template>
+
+<script>
+import actionCableMixin from "./mixins/ws/actionCable";
+import textMixin from "./mixins/text.js";
+
+export default {
+  mixins: [actionCableMixin, textMixin],
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data: function() {
+    return {
+      text: " "
+    };
+  },
+  methods: {
+    $ready() {
+      this.$wsInitActionCable(this.spec.actionCable);
+
+      this.text = this.spec.text;
+    },
+    action_set(spec) {
+      if (spec.user_id !== spec.filterKey) {
+        this.text = spec.text;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+span,
+a {
+  /* white-space: pre-line; */
+  white-space: pre-wrap;
+
+  /* Without this, padding-top doesn't work */
+  display: inline-block;
+  line-height: 1;
+}
+span.muted {
+  opacity: 0.7;
+}
+span.small {
+  font-size: 80%;
+}
+a:hover {
+  text-decoration: none;
+}
+</style>

package/components/mixins/{chart.js → chart/annotation.js}

@@ -1,73 +1,73 @@
-export default {
-  data() {
-    return {
-      options: {
-        annotation: {
-          drawTime: "afterDraw",
-          events: ["mouseleave", "mouseenter"],
-          annotations: []
-        }
-      }
-    };
-  },
-  created() {
-    if (this.spec.lineVertical) {
-      this.options.annotation.annotations = this.spec.lineVertical.map(
-        (element, index) => this.annotation(element, index)
-      );
-    }
-  },
-  methods: {
-    annotation(options, index) {
-      const { text, x } = options;
-
-      return {
-        type: "line",
-        mode: "vertical",
-        scaleID: "x-axis-0",
-        value: new Date(x).getTime(),
-        borderColor: "rgba(0,0,255,0.3)",
-        borderWidth: 3,
-        borderDash: [5, 10],
-        label: {
-          content: text,
-          enabled: true,
-          position: "top",
-          backgroundColor: "rgba(0,0,0,0.3)"
-        },
-        onMouseenter: function(e) {
-          Object.assign(
-            this.chartInstance.options.annotation.annotations[index],
-            { borderColor: "rgba(0,0,255,0.8)" },
-            {
-              label: {
-                content: text,
-                enabled: true,
-                position: "top",
-                backgroundColor: "rgba(0,0,0,0.8)"
-              }
-            }
-          );
-
-          this.chartInstance.update();
-        },
-        onMouseleave: function(e) {
-          Object.assign(
-            this.chartInstance.options.annotation.annotations[index],
-            { borderColor: "rgba(0,0,255,0.3)" },
-            {
-              label: {
-                content: text,
-                enabled: true,
-                position: "top",
-                backgroundColor: "rgba(0,0,0,0.3)"
-              }
-            }
-          );
-
-          this.chartInstance.update();
-        }
-      };
-    }
-  }
-};
+export default {
+  data() {
+    return {
+      options: {
+        annotation: {
+          drawTime: "afterDraw",
+          events: ["mouseleave", "mouseenter"],
+          annotations: []
+        }
+      }
+    };
+  },
+  created() {
+    if (this.spec.lineVertical) {
+      this.options.annotation.annotations = this.spec.lineVertical.map(
+        (element, index) => this.annotation(element, index)
+      );
+    }
+  },
+  methods: {
+    annotation(options, index) {
+      const { text, x } = options;
+
+      return {
+        type: "line",
+        mode: "vertical",
+        scaleID: "x-axis-0",
+        value: new Date(x).getTime(),
+        borderColor: "rgba(0,0,255,0.3)",
+        borderWidth: 3,
+        borderDash: [5, 10],
+        label: {
+          content: text,
+          enabled: true,
+          position: "top",
+          backgroundColor: "rgba(0,0,0,0.3)"
+        },
+        onMouseenter: function(e) {
+          Object.assign(
+            this.chartInstance.options.annotation.annotations[index],
+            { borderColor: "rgba(0,0,255,0.8)" },
+            {
+              label: {
+                content: text,
+                enabled: true,
+                position: "top",
+                backgroundColor: "rgba(0,0,0,0.8)"
+              }
+            }
+          );
+
+          this.chartInstance.update();
+        },
+        onMouseleave: function(e) {
+          Object.assign(
+            this.chartInstance.options.annotation.annotations[index],
+            { borderColor: "rgba(0,0,255,0.3)" },
+            {
+              label: {
+                content: text,
+                enabled: true,
+                position: "top",
+                backgroundColor: "rgba(0,0,0,0.3)"
+              }
+            }
+          );
+
+          this.chartInstance.update();
+        }
+      };
+    }
+  }
+};

package/components/mixins/chart/tooltip.js

@@ -0,0 +1,31 @@
+export default {
+  data() {
+    return {
+      options: {
+        dataName: "",
+        tooltips: {
+          intersect: false,
+          callbacks: {
+            afterLabel: this.afterLabel
+          }
+        }
+      }
+    };
+  },
+  methods: {
+    afterLabel(tooltipItem) {
+      if (!this.dataName) {
+        console.error("dataName is empty");
+      }
+
+      const selectedSeries = this.spec[this.dataName][tooltipItem.datasetIndex];
+      const point = selectedSeries.points.find(
+        point => point.x == tooltipItem.xLabel
+      );
+      const tooltip = point ? point.tooltip : null;
+      if (tooltip) {
+        return tooltip;
+      }
+    }
+  }
+};

package/components/mixins/events.js

@@ -1,178 +1,178 @@
-import Action from "../../action";
-import UrlUtils from "../../utils/url";
-import TypeUtils from "../../utils/type";
-
-export default {
-  data() {
-    return {
-      // TODO: Consider replacing with an enum, e.g. executing with predefined values ('post', 'get', null)
-      // The complexity with this is that 'get' that comes after 'post' needs to show an indicator, e.g.
-      // Submit button needs to be disabled when redirecting after form submission
-      _isBusy: false,
-      _events: [],
-      _typingTimer: null
-    };
-  },
-  computed: {
-    _pageBody() {
-      return document.getElementById("page_body");
-    },
-    $isBusy() {
-      // Properties starting with $ or _ can only be accessed via $data
-      return this.$data._isBusy;
-    },
-    $isReady() {
-      return this.$data._events === null;
-    }
-  },
-  mounted() {
-    this._executeIfReady(false);
-    this.$mounted();
-  },
-  updated() {
-    this._executeIfReady(true);
-    this.$updated();
-  },
-  destroyed() {
-    this.$tearDown();
-  },
-  watch: {
-    // See Utils.http
-    "$root.vueApp.isStale": function(val, oldVal) {
-      // Make sure $ready() will be called in the next update
-      this._mountedUrl = null;
-    }
-  },
-  methods: {
-    $href: function(spec) {
-      const properties = spec || this.spec;
-      const onClick = properties.onClick;
-      if (TypeUtils.isObject(onClick)) {
-        switch (onClick.action) {
-          case "windows/open-v1":
-          case "windows/openWeb-v1":
-          case "windows/reload-v1":
-            return UrlUtils.htmlUrl(onClick.url);
-        }
-      }
-      return null;
-    },
-    $onClick: function(explicitEvent, spec) {
-      const properties = spec || this.spec;
-      const e = explicitEvent || event;
-
-      if (!properties.onClick) {
-        return; // Avoid blocking the event for parents.
-      }
-
-      // Ignore middle/right clicks
-      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);
-      }
-    },
-    $rel: function(spec) {
-      const properties = spec || this.spec;
-      const onClick = properties.onClick;
-      if (TypeUtils.isObject(onClick)) {
-        if (onClick.action === "windows/openWeb-v1") {
-          return "nofollow";
-        }
-      }
-      return null;
-    },
-    // Can be used for optimization, but not needed for now.
-    // $onLongPressFunction() {
-    //   return this.spec.onLongPress ? this.$onLongPress : null;
-    // },
-    $onLongPress() {
-      GLib.action.execute(this.spec.onLongPress, null, this);
-    },
-    $addViewportChangeListeners: function(handler) {
-      window.addEventListener("load", handler);
-      window.addEventListener("resize", handler);
-      this._pageBody.addEventListener("scroll", handler);
-    },
-    $removeViewportChangeListeners: function(handler) {
-      window.removeEventListener("load", handler);
-      window.removeEventListener("resize", handler);
-      this._pageBody.removeEventListener("scroll", handler);
-    },
-    _executeIfReady(updated) {
-      if (updated) {
-        if (!this._renderingTheSamePage()) {
-          this.$tearDown();
-          this._ready();
-        }
-      } else {
-        this._ready();
-      }
-    },
-    _renderingTheSamePage() {
-      return this._mountedUrl === window.location.href;
-    },
-    _ready() {
-      this._mountedUrl = window.location.href;
-      this._updatedAt = new Date().getTime();
-
-      this.$data._events = [];
-
-      // Has to be executed before $ready()
-      this._linkFieldModels();
-
-      this.$ready();
-
-      // Make sure events are dispatched after $ready(). Dispatching them during $ready() causes errors.
-      for (const event of this.$data._events) {
-        // Execute later to ensure the parent has registered its event listener
-        // setTimeout(() => {
-        this.$el.dispatchEvent(event);
-        // }, 100)
-      }
-      this.$data._events = null;
-    },
-    $ready() {
-      // To be overridden
-    },
-    $tearDown() {
-      // To be overridden
-    },
-    $mounted() {
-      // To be overridden
-    },
-    $updated() {
-      // To be overridden
-    },
-    $dispatchEvent(name, data) {
-      const event = new Event(name, { bubbles: true });
-
-      // TODO: Deprecate
-      event.spec = data;
-
-      event.data = data;
-
-      if (this.$data._events) {
-        this.$data._events.push(event);
-      } else {
-        this.$el.dispatchEvent(event);
-      }
-    },
-    $onEvent(name, handler) {
-      this.$el.addEventListener(name, handler);
-    },
-    $onTyping({ duration = 2000 }) {
-      GLib.action.execute(this.spec.onTypeStart, null, this);
-      clearTimeout(this.timer);
-
-      this.timer = setTimeout(() => {
-        this._typingTimer = null;
-        GLib.action.execute(this.spec.onTypeEnd, null, this);
-      }, duration);
-    }
-    // $onZero() {
-    //   GLib.action.execute(this.spec.onZero, null, this);
-    // },
-  }
-};
+import Action from "../../action";
+import UrlUtils from "../../utils/url";
+import TypeUtils from "../../utils/type";
+
+export default {
+  data() {
+    return {
+      // TODO: Consider replacing with an enum, e.g. executing with predefined values ('post', 'get', null)
+      // The complexity with this is that 'get' that comes after 'post' needs to show an indicator, e.g.
+      // Submit button needs to be disabled when redirecting after form submission
+      _isBusy: false,
+      _events: [],
+      _typingTimer: null
+    };
+  },
+  computed: {
+    _pageBody() {
+      return document.getElementById("page_body");
+    },
+    $isBusy() {
+      // Properties starting with $ or _ can only be accessed via $data
+      return this.$data._isBusy;
+    },
+    $isReady() {
+      return this.$data._events === null;
+    }
+  },
+  mounted() {
+    this._executeIfReady(false);
+    this.$mounted();
+  },
+  updated() {
+    this._executeIfReady(true);
+    this.$updated();
+  },
+  destroyed() {
+    this.$tearDown();
+  },
+  watch: {
+    // See Utils.http
+    "$root.vueApp.isStale": function(val, oldVal) {
+      // Make sure $ready() will be called in the next update
+      this._mountedUrl = null;
+    }
+  },
+  methods: {
+    $href: function(spec) {
+      const properties = spec || this.spec;
+      const onClick = properties.onClick;
+      if (TypeUtils.isObject(onClick)) {
+        switch (onClick.action) {
+          case "windows/open-v1":
+          case "windows/openWeb-v1":
+          case "windows/reload-v1":
+            return UrlUtils.htmlUrl(onClick.url);
+        }
+      }
+      return null;
+    },
+    $onClick: function(explicitEvent, spec) {
+      const properties = spec || this.spec;
+      const e = explicitEvent || event;
+
+      if (!properties.onClick) {
+        return; // Avoid blocking the event for parents.
+      }
+
+      // Ignore middle/right clicks
+      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);
+      }
+    },
+    $rel: function(spec) {
+      const properties = spec || this.spec;
+      const onClick = properties.onClick;
+      if (TypeUtils.isObject(onClick)) {
+        if (onClick.action === "windows/openWeb-v1") {
+          return "nofollow";
+        }
+      }
+      return null;
+    },
+    // Can be used for optimization, but not needed for now.
+    // $onLongPressFunction() {
+    //   return this.spec.onLongPress ? this.$onLongPress : null;
+    // },
+    $onLongPress() {
+      GLib.action.execute(this.spec.onLongPress, null, this);
+    },
+    $addViewportChangeListeners: function(handler) {
+      window.addEventListener("load", handler);
+      window.addEventListener("resize", handler);
+      this._pageBody.addEventListener("scroll", handler);
+    },
+    $removeViewportChangeListeners: function(handler) {
+      window.removeEventListener("load", handler);
+      window.removeEventListener("resize", handler);
+      this._pageBody.removeEventListener("scroll", handler);
+    },
+    _executeIfReady(updated) {
+      if (updated) {
+        if (!this._renderingTheSamePage()) {
+          this.$tearDown();
+          this._ready();
+        }
+      } else {
+        this._ready();
+      }
+    },
+    _renderingTheSamePage() {
+      return this._mountedUrl === window.location.href;
+    },
+    _ready() {
+      this._mountedUrl = window.location.href;
+      this._updatedAt = new Date().getTime();
+
+      this.$data._events = [];
+
+      // Has to be executed before $ready()
+      this._linkFieldModels();
+
+      this.$ready();
+
+      // Make sure events are dispatched after $ready(). Dispatching them during $ready() causes errors.
+      for (const event of this.$data._events) {
+        // Execute later to ensure the parent has registered its event listener
+        // setTimeout(() => {
+        this.$el.dispatchEvent(event);
+        // }, 100)
+      }
+      this.$data._events = null;
+    },
+    $ready() {
+      // To be overridden
+    },
+    $tearDown() {
+      // To be overridden
+    },
+    $mounted() {
+      // To be overridden
+    },
+    $updated() {
+      // To be overridden
+    },
+    $dispatchEvent(name, data) {
+      const event = new Event(name, { bubbles: true });
+
+      // TODO: Deprecate
+      event.spec = data;
+
+      event.data = data;
+
+      if (this.$data._events) {
+        this.$data._events.push(event);
+      } else {
+        this.$el.dispatchEvent(event);
+      }
+    },
+    $onEvent(name, handler) {
+      this.$el.addEventListener(name, handler);
+    },
+    $onTyping({ duration = 2000 }) {
+      GLib.action.execute(this.spec.onTypeStart, null, this);
+      clearTimeout(this.timer);
+
+      this.timer = setTimeout(() => {
+        this._typingTimer = null;
+        GLib.action.execute(this.spec.onTypeEnd, null, this);
+      }, duration);
+    }
+    // $onZero() {
+    //   GLib.action.execute(this.spec.onZero, null, this);
+    // },
+  }
+};