glib-web 0.5.77

package/components/icon.vue

@@ -0,0 +1,25 @@
+<template>
+  <a v-if="$href()" :href="$href()" :rel="$rel()" @click="$onClick()">
+    <common-icon :spec="iconSpec" />
+  </a>
+  <common-icon v-else :spec="iconSpec" />
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true },
+    isBusy: { type: Boolean }
+  },
+  computed: {
+    iconSpec() {
+      if (this.spec.spec) {
+        return this.spec.spec;
+      }
+      return this.spec;
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/components/image.vue

@@ -0,0 +1,87 @@
+<template>
+  <!-- TODO: Add support for href and :rel="$rel()" -->
+  <v-img :src="spec.url || spec.base64Data" :style="styles" @click="$onClick()">
+    <!-- <v-progress-circular v-if="$isBusy" indeterminate /> -->
+  </v-img>
+</template>
+
+<script>
+import Vue from "vue";
+
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      styles: {}
+    };
+  },
+  // computed: {
+  //   isOnClickPresent() {
+  //     return this.spec.hasOwnProperty('onClick')
+  //   }
+  // },
+  methods: {
+    // styles: function() {
+    //   // const styles = this.genericStyles(Object.assign({ height: 210 }, this.spec))
+    //   const styles = this.genericStyles(Object.assign({}, this.spec));
+    //   return styles;
+    // }
+    $ready() {
+      const styles = this.genericStyles(Object.assign({}, this.spec));
+      this.styles = styles;
+
+      if (this.spec.url) {
+        const image = new Image();
+        image.src = this.spec.url;
+        image.onload = () => {
+          const fit = this.spec.fit || "clip";
+
+          switch (fit) {
+            case "crop":
+              this.fitCrop(image);
+              return;
+            default:
+              this.fitClip(image);
+          }
+        };
+      }
+    },
+    fitClip(image) {
+      let width, height;
+      const aspectRatio = image.naturalWidth / image.naturalHeight;
+
+      if (this.spec.width == "matchParent") {
+        width = "100%";
+        height = `${100 / aspectRatio}%`;
+      } else {
+        if (this.spec.width) {
+          width = `${this.spec.width}px`;
+          height = `${this.spec.width / aspectRatio}px`;
+        } else if (this.spec.height) {
+          width = `${this.spec.height * aspectRatio}px`;
+          height = `${this.spec.height}px`;
+        }
+      }
+
+      Vue.set(this.styles, "width", width);
+      Vue.set(this.styles, "height", height);
+    },
+    fitCrop(image) {
+      let width, height;
+
+      if (this.spec.width) {
+        width = `${this.spec.width}px`;
+        height = `${image.naturalHeight}px`;
+      } else if (this.spec.height) {
+        width = `${image.naturalWidth}px`;
+        height = `${this.spec.height}px`;
+      }
+
+      Vue.set(this.styles, "width", width);
+      Vue.set(this.styles, "height", height);
+    }
+  }
+};
+</script>

package/components/label.vue

@@ -0,0 +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>

package/components/map.vue

@@ -0,0 +1,206 @@
+<template>
+  <!-- <div ref="map" :style="genericStyles()"></div> -->
+  <gmap-map
+    ref="map"
+    :center="center"
+    :zoom="zoom"
+    map-type-id="roadmap"
+    :style="genericStyles()"
+    @dragend="onMapDragEnd"
+  >
+    <gmap-info-window
+      :options="infoWindowOptions"
+      :position="infoWindowPosition"
+      :opened="infoWindowOpen"
+      @closeclick="onInfoWindowClose"
+    >
+      <template v-if="selectedMarker != null">
+        <strong>{{ selectedMarker.infoWindow.title }}</strong>
+        <div style="padding-top: 4px;">
+          {{ selectedMarker.infoWindow.subtitle }}
+        </div>
+        <panels-responsive
+          v-if="selectedMarker.infoWindow.body"
+          :spec="selectedMarker.infoWindow.body"
+        />
+      </template>
+    </gmap-info-window>
+
+    <!-- See http://localhost:3000/packs/js/vue_renderer-c97eb6266387b9f0887d.js for MarkerClustererOptions -->
+    <gmap-cluster
+      v-if="spec.cluster"
+      :calculator="_calculator"
+      :minimum-cluster-size="1"
+    >
+      <gmap-marker
+        v-for="(marker, index) in markers"
+        :key="index"
+        :position="{ lat: marker.latitude, lng: marker.longitude }"
+        :clickable="true"
+        :title="String(marker.clusterSize || 1)"
+        @click="onMarkerClick(marker, index)"
+      ></gmap-marker>
+    </gmap-cluster>
+    <template v-else>
+      <gmap-marker
+        v-for="(marker, index) in markers"
+        :key="index"
+        :position="{ lat: marker.latitude, lng: marker.longitude }"
+        :clickable="true"
+        @click="onMarkerClick(marker, index)"
+      ></gmap-marker>
+    </template>
+  </gmap-map>
+</template>
+
+<script>
+import GmapCluster from "vue2-google-maps/dist/components/cluster";
+
+export default {
+  components: {
+    "gmap-cluster": GmapCluster
+  },
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      infoWindowOptions: {
+        pixelOffset: {
+          width: 0,
+          height: -35
+        }
+      },
+      infoWindowOpen: false,
+      infoWindowPosition: null,
+      selectedMarker: null,
+      center: { lat: 0, lng: 0 },
+      zoom: 11,
+      markers: []
+    };
+  },
+  methods: {
+    // See https://stackoverflow.com/questions/37597324/markercluster-one-marker-for-a-group for calculator example
+    _calculator(markers, numStyles) {
+      let sum = 0;
+      for (const marker of markers) {
+        sum += Number(marker.title);
+      }
+
+      return {
+        text: sum,
+        index: 0,
+        title: ""
+      };
+    },
+    // attachScript: function(elementId, url) {
+    //   if (document.getElementById(elementId) == null) {
+    //     const script = document.createElement('script')
+    //     script.setAttribute('id', elementId)
+    //     script.setAttribute('src', url)
+    //     script.setAttribute('defer', 'defer')
+    //     document.body.appendChild(script)
+    //   }
+    // },
+    // renderGoogleMap: function() {
+    //   const mapView = this.$refs.map
+    //   const spec = this.spec
+
+    //   window.googleMaps = window.googleMaps || {
+    //     initializers: [],
+    //     init: function() {
+    //       for (const exec of this.initializers) {
+    //         exec()
+    //       }
+    //     }
+    //   }
+    //   window.googleMaps.initializers.push(
+    //     function() {
+    //       const map = new google.maps.Map(mapView, {zoom: spec.zoom || 10})
+    //       map.setCenter({lat: spec.latitude, lng: spec.longitude})
+    //       //var marker = new google.maps.Marker({position: center, map: map})
+    //     }
+    //   )
+
+    //   this.attachScript('__google_map_script', `https://maps.googleapis.com/maps/api/js?key=${process.env.GMAPS_API_KEY}&callback=googleMaps.init`)
+    // },
+    // renderBaiduMap: function() {
+    //   const mapView = this.$refs.map
+    //   const spec = this.spec
+
+    //   window.baiduMaps = window.baiduMaps || {
+    //     initializers: [],
+    //     init: function() {
+    //       for (const exec of this.initializers) {
+    //         exec()
+    //       }
+    //     }
+    //   }
+    //   window.baiduMaps.initializers.push(
+    //     function() {
+    //       // NOTE: Outside of China, coordinate conversion is still not accurate. See Macomatic's answer on
+    //       // https://stackoverflow.com/questions/29444803/does-a-google-maps-coordinate-map-to-the-same-location-in-baidu-maps
+    //       // This is why the BMap.Convertor solution doesn't point to the right location during our testing.
+    //       var map = new BMap.Map(mapView);
+    //       map.centerAndZoom(new BMap.Point(123.404, 39.815), spec.zoom || 10)
+    //       map.enableScrollWheelZoom()
+    //     }
+    //   )
+
+    //   this.attachScript('__baidu_map_script', "http://api.map.baidu.com/api?v=1.5&ak=2b866a6daac9014292432d81fe9b47e3&callback=baiduMaps.init")
+    // },
+
+    $ready() {
+      const { latitude, longitude, zoom } = this.spec;
+      if (this.$type.isNumber(latitude) && this.$type.isNumber(longitude)) {
+        this.updateMapCenter(latitude, longitude);
+      }
+      this.$type.ifNumber(zoom, val => (this.zoom = val));
+      this.fetchMarkers();
+    },
+    updateMapCenter(lat, lng) {
+      this.center.lat = lat;
+      this.center.lng = lng;
+    },
+    fetchMarkers() {
+      const { lat, lng } = this.center;
+      const url = new URL(this.spec.dataUrl);
+      url.searchParams.append("lat", lat);
+      url.searchParams.append("long", lng);
+
+      Utils.http.execute({ url: url.toString() }, "GET", this, response => {
+        this.markers = response.pins;
+      });
+    },
+    onInfoWindowClose() {
+      this.infoWindowOpen = false;
+      this.infoWindowPosition = null;
+      this.selectedMarker = null;
+    },
+    onMarkerClick(marker, index) {
+      this.selectedMarker = marker;
+      this.infoWindowPosition = { lat: marker.latitude, lng: marker.longitude };
+      this.infoWindowOpen = true;
+    },
+    onMapDragEnd(e) {
+      const { center } = this.$refs.map.$mapObject;
+      this.updateMapCenter(center.lat(), center.lng());
+      this.fetchMarkers();
+    }
+  }
+  // mounted: function() {
+  //   // switch (this.spec.provider) {
+  //   // case 'baidu':
+  //   //   this.renderBaiduMap()
+  //   //   break
+  //   // default:
+  //   //   this.renderGoogleMap()
+  //   // }
+  //   const { latitude, longitude, zoom } = this.spec
+  //   this.updateMapCenter(latitude, longitude)
+  //   this.zoom = zoom
+
+  //   this.fetchMarkers()
+  // }
+};
+</script>

package/components/markdown.vue

@@ -0,0 +1,52 @@
+<template>
+  <div :style="genericStyles()" :class="$classes()">
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <span v-html="compiledText"></span>
+    <div
+      v-if="youtubeId"
+      :style="`width: 320px; overflow: hidden; max-height: 180px;`"
+    >
+      <youtube :video-id="youtubeId" fit-parent></youtube>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      youtubeId: null
+    };
+  },
+  computed: {
+    compiledText() {
+      return Utils.format.markdown(this.spec.text);
+    }
+  },
+  methods: {
+    $ready() {
+      if (this.spec.previewVideo) {
+        this.youtubeId = this.extractYoutubeId(this.spec.text);
+        console.log("Detected Youtube ID", this.youtubeId);
+      }
+    },
+    // From https://gist.github.com/takien/4077195
+    extractYoutubeId(url) {
+      var ID = "";
+      url = url
+        .replace(/(>|<)/gi, "")
+        .split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
+      if (url[2] !== undefined) {
+        ID = url[2].split(/[^0-9a-z_\-]/i);
+        ID = ID[0];
+      }
+      return ID;
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/components/mixins/events.js

@@ -0,0 +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);
+    // },
+  }
+};

package/components/mixins/generic.js

@@ -0,0 +1,58 @@
+export default {
+  methods: {
+    $closest(name) {
+      var parent = this.$parent;
+      while (parent != null) {
+        if (
+          Utils.type.isObject(parent.spec) &&
+          Utils.app.vueName(parent) == name
+        ) {
+          return parent;
+        }
+        parent = parent.$parent;
+      }
+    },
+    $validation(rules) {
+      var augmentedRules = rules || [];
+      Utils.type.ifObject(this.spec.validation, val => {
+        Utils.type.ifObject(val.required, spec => {
+          augmentedRules = augmentedRules.concat([
+            v => (v ? true : spec.message)
+          ]);
+        });
+      });
+      return augmentedRules;
+    },
+    $wsSubscribeEvents(spec) {
+      if (!Utils.type.isObject(spec)) {
+        return;
+      }
+
+      const topicName = spec.topic;
+      const events = spec.events;
+      if (!Utils.type.isString(topicName) || !Utils.type.isArray(events)) {
+        return;
+      }
+
+      const ws = window.vueApp.webSocket;
+      const channel = ws.channels[topicName];
+
+      if (!channel) {
+        console.log(`Topic not ready: '${topicName}'`);
+        setTimeout(() => {
+          // Wait until $wsInitPhoenixSocket() has executed.
+          this.$wsSubscribeEvents(spec);
+        }, 200);
+        return;
+      }
+
+      for (const eventName of events) {
+        console.log(`Registering event '${eventName}'`);
+        channel.on(eventName, payload => {
+          console.debug(`Received '${eventName}' event`, payload);
+          Utils.ws.handleResponse(payload.onResponse, this);
+        });
+      }
+    }
+  }
+};