glib-web 0.5.77

package/components/fields/googlePlace.vue

@@ -0,0 +1,158 @@
+
+<!-- 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'>
+    <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>
+            <!-- <gmap-place-input :default-place="placeName" :placeholder="Address" @place_changed="setPlace" /> -->
+            <gmap-autocomplete
+              :name="spec.name"
+              placeholder="Address"
+              @place_changed="setPlace"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <gmap-map
+      :center="{ lat: 25.105497, lng: 121.597366 }"
+      :zoom="13"
+      map-type-id="roadmap"
+      style="width: 100%; height: 300px"
+      @click='onMapClick'
+      ref='map'
+    >
+      <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>
+        <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>
+      </gmap-info-window>
+
+      <gmap-marker
+        :position="markerPos"
+        :clickable="true"
+        @click="openInfoWindow"
+      />
+      <template v-slot:visible>
+        <div id="loading-container" class="d-none" ref="loading">
+          <v-progress-circular indeterminate color="primary" />
+        </div>
+      </template>
+    </gmap-map>
+  </v-container>
+</template>
+
+<script>
+import Action from "../../action"
+
+export default {
+  props: ['spec'],
+  data() {
+    return {
+      infoOptions: {
+        pixelOffset: {
+          width: 0,
+          height: -35
+        }
+      },
+      markerPos: { lat: 0, lng: 0 },
+      infoWinOpen: false,
+      place: null
+    }
+  },
+  computed: {
+    placeName() {
+      return (this.place == null ? '' : this.place.name)
+    }
+  },
+  methods: {
+    closeInfoWindow() {
+      this.infoWinOpen = false
+    },
+    openInfoWindow() {
+      this.infoWinOpen = true
+    },
+    toggleLoadingIndicator() {
+      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(),
+      }
+
+      Action.execute(properties.onClick, event.target, this)
+    },
+    onMapClick(e) {
+      this.closeInfoWindow()
+
+      if (e.placeId === undefined) {
+        return
+      }
+
+      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)
+      service.getDetails(request, place => {
+        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
+    },
+    setPlace(place) {
+      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())
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+#loading-container {
+  position: absolute;
+  width: 100%;
+  height: 300px;
+  top: 0;
+  z-index: 100;
+  background: rgba(196, 154, 154, 0.1);
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/components/fields/hidden.vue

@@ -0,0 +1,18 @@
+<template>
+  <input
+    type="hidden"
+    :name="fieldName"
+    :value="fieldModel"
+    :data-observe="spec"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style scoped></style>

package/components/fields/location.vue

@@ -0,0 +1,223 @@
+<template>
+  <v-container fluid class="pa-0" :style="$styles()">
+    <!--
+      It's safer to manually implement styling than adding another dependency such as vuetify-google-autocomplete,
+      which behaves differently and needs to be actively maintained.
+    -->
+    <div
+      class="v-input theme--light v-text-field v-text-field--enclosed v-text-field--outlined"
+    >
+      <div class="v-input__control">
+        <div class="v-input__slot">
+          <fieldset aria-hidden="true">
+            <legend :style="`width: ${labelWidth}px;`"><span>​</span></legend>
+          </fieldset>
+          <div class="v-text-field__slot">
+            <label
+              ref="label"
+              class="v-label v-label--active theme--light"
+              style="left: 0px; right: auto; position: absolute; font-size: 16px;"
+              >{{ spec.label }}</label
+            >
+            <!-- See https://developers.google.com/places/web-service/autocomplete#place_types for autocompleteOptions -->
+            <gmap-autocomplete
+              :name="spec.name"
+              :placeholder="spec.placeholder"
+              :value="address"
+              :options="spec.autocompleteOptions"
+              @input="onAddressChanged"
+              @place_changed="onPlaceChanged"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <gmap-map
+      ref="map"
+      :center="{ lat: 0, lng: 0 }"
+      :zoom="13"
+      class="mt-3 mb-3"
+      map-type-id="roadmap"
+      :style="mapStyles"
+      @idle="onActionCompleted"
+    >
+      <gmap-marker
+        :position="markerPos"
+        :clickable="true"
+        :draggable="true"
+        @drag="onDrag"
+        @dragend="onDrag"
+      />
+    </gmap-map>
+    <ui-component
+      v-if="latitudeField"
+      ref="latitudeView"
+      :spec="latitudeField"
+    />
+    <ui-component
+      v-if="longitudeField"
+      ref="longitudeView"
+      :spec="longitudeField"
+    />
+    <ui-component v-if="zoomField" ref="zoomView" :spec="zoomField" />
+  </v-container>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      infoOptions: {
+        pixelOffset: {
+          width: 0,
+          height: -35
+        }
+      },
+      // markerPos: { lat: null, lng: null },
+      address: null,
+      longitude: null,
+      latitude: null,
+      longitudeField: null,
+      latitudeField: null,
+      zoomField: null,
+      longitudeView: null,
+      latitudeView: null,
+      zoomView: null,
+      labelWidth: 0
+    };
+  },
+  computed: {
+    markerPos() {
+      return { lat: this.latitude || 0, lng: this.longitude || 0 };
+    },
+    mapStyles() {
+      return this.longitude != null && this.latitude != null
+        ? {
+            width: "100%",
+            height: "300px"
+          }
+        : {};
+    }
+  },
+  methods: {
+    $ready() {
+      this.address = this.spec.value;
+      this.longitudeField = this.spec.longitudeField;
+      this.latitudeField = this.spec.latitudeField;
+      this.zoomField = this.spec.zoomField;
+
+      this.centerInitial();
+
+      setTimeout(() => {
+        this.latitudeView = this.$refs.latitudeView.$children[0];
+        this.longitudeView = this.$refs.longitudeView.$children[0];
+
+        if (this.$refs.zoomView) {
+          this.zoomView = this.$refs.zoomView.$children[0];
+        }
+
+        const labelView = this.$refs.label;
+        this.labelWidth = labelView.getBoundingClientRect().width + 6;
+      });
+    },
+    centerInitial() {
+      const latitudeValue = Utils.type.floatValue(this.latitudeField.value);
+      const longitudeValue = Utils.type.floatValue(this.longitudeField.value);
+
+      if (latitudeValue !== 0 && longitudeValue !== 0) {
+        this.setLocation(latitudeValue, longitudeValue, true);
+
+        // Avoid asking for user location right away for now
+        // } else {
+        //   navigator.geolocation.getCurrentPosition(position => {
+        //     const coordinate = position.coords;
+        //     this.setLocation(coordinate.latitude, coordinate.longitude, false);
+        //   });
+      }
+    },
+    setLocation(latitudeValue, longitudeValue, dropPin) {
+      this.$refs.map.$gmapApiPromiseLazy().then(() => {
+        // eslint-disable-next-line no-undef
+        const location = new google.maps.LatLng(latitudeValue, longitudeValue);
+        this.$refs.map.$mapObject.setCenter(location);
+
+        if (dropPin) {
+          this.setMarkerPosition(location);
+        }
+      });
+    },
+    setMarkerPosition(location) {
+      // this.markerPos.lat = location.lat();
+      // this.markerPos.lng = location.lng();
+
+      this.latitude = location.lat();
+      this.longitude = location.lng();
+
+      this.latitudeView.fieldModel = location.lat();
+      this.longitudeView.fieldModel = location.lng();
+    },
+    // 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");
+
+    //   let field = this.$refs.fieldContainer.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;
+    // },
+    // onMapClick(e) {
+    //   const location = e.latLng;
+    //   console.log("CLICK1", e);
+    //   this.setMarkerPosition(location);
+    // },
+    onPlaceChanged(place) {
+      this.address = place.formatted_address;
+
+      const location = place.geometry.location;
+      this.setMarkerPosition(location);
+      this.$refs.map.$mapObject.setCenter(location);
+    },
+    onDrag(e) {
+      this.setMarkerPosition(e.latLng);
+    },
+    onActionCompleted() {
+      if (this.zoomView) {
+        this.zoomView.fieldModel = this.$refs.map.$mapObject.zoom;
+      }
+    },
+    onAddressChanged(e) {
+      this.address = e.target.value;
+      if (this.address === "") {
+        this.address = null;
+        this.longitude = null;
+        this.latitude = null;
+
+        this.latitudeView.fieldModel = null;
+        this.longitudeView.fieldModel = null;
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* #loading-container {
+  position: absolute;
+  width: 100%;
+  height: 300px;
+  top: 0;
+  z-index: 100;
+  background: rgba(196, 154, 154, 0.1);
+  align-items: center;
+  justify-content: center;
+} */
+</style>

package/components/fields/newRichText.vue

@@ -0,0 +1,191 @@
+<template>
+  <div style="width: 100%;">
+    <v-progress-linear v-if="showProgress" v-model="progress.value" />
+    <textarea id="editor" class="entry"></textarea>
+    <input type="hidden" :name="spec.name" :value="cleanValue" />
+    <input
+      v-for="(imageKey, index) in imageKeys"
+      :key="index"
+      type="text"
+      :name="spec.imageUploader.fieldName"
+      :value="images[imageKey]"
+    />
+
+    <p>{{ cleanValue }}</p>
+
+    <ol>
+      <li v-for="(imageKey, index) in imageKeys" :key="index">
+        {{ images[imageKey] }} -- {{ imageKey }}
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script>
+import Uploader from "../../utils/uploader";
+import RedactorX from "../../static/redactorx";
+import "../../static/redactorx.css";
+import "../../static/plugins/icons/icons";
+import "../../static/plugins/inlineformat/inlineformat";
+import "../../static/plugins/specialchars/specialchars";
+import "../../static/plugins/textdirection/textdirection";
+import "../../static/plugins/underline/underline";
+
+export default {
+  props: {
+    spec: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      rawValue: "",
+      cleanValue: "",
+      progress: { value: -1 },
+      images: {},
+      imageKeys: []
+    };
+  },
+  computed: {
+    showProgress: function() {
+      return this.progress.value >= 0;
+    }
+  },
+  methods: {
+    $ready() {
+      this.initValue();
+      this.initRedactor();
+    },
+    initValue() {
+      let rawValue = this.spec.value || "";
+
+      Utils.type.ifArray(this.spec.images, images => {
+        const vm = this;
+        rawValue = rawValue.replace(/\{\{image([0-9]+)\}\}/g, function(
+          _,
+          index
+        ) {
+          const image = images[index - 1];
+          if (
+            image &&
+            vm.$type.isString(image.value) &&
+            vm.$type.isString(image.fileUrl)
+          ) {
+            const url = image.fileUrl;
+            const key = url.hashCode().toString();
+            vm.images[key] = image.value;
+            // return `<img src="${url}">`;
+            return url;
+          }
+          return "{{IMAGE_NOT_FOUND}}";
+        });
+      });
+
+      this.updateValue(rawValue);
+    },
+    initRedactor() {
+      const vm = this;
+      RedactorX("#editor", {
+        content: this.rawValue,
+        source: Utils.settings.isDev,
+        plugins: ["inlineformat", "style"],
+        image: {
+          upload: function(upload, data) {
+            for (var key in data.files) {
+              if (typeof data.files[key] === "object") {
+                const file = data.files[key];
+                vm.uploadImage(file, response => {
+                  upload.complete(response, data.e);
+                });
+              }
+            }
+          }
+        },
+        subscribe: {
+          "editor.change": function(event) {
+            const content = this.app.editor.getContent();
+            vm.updateValue(content);
+          }
+        }
+      });
+    },
+    updateValue(content) {
+      this.rawValue = content;
+      this.separateOutImages();
+    },
+    separateOutImages() {
+      const vm = this;
+      var index = 0;
+      vm.imageKeys.clear();
+      // TODO: Fix to avoid replacing <video src="">
+      this.cleanValue = this.rawValue.replace(/src="([^"]+)"/g, function(
+        _,
+        imageValue
+      ) {
+        // It seems that quill encodes '&' in the URL to '&amp;' which would screw up key matching.
+        var decodedValue = imageValue.replace(/&amp;/g, "&");
+        const key = decodedValue.hashCode().toString();
+        const existingIndex = vm.imageKeys.indexOf(key);
+        if (existingIndex < 0) {
+          vm.imageKeys.push(key);
+          return `src="{{image${++index}}}"`;
+        }
+        return `src="{{image${existingIndex + 1}}}"`;
+      });
+    },
+    uploadImage(file, onComplete) {
+      const uploaderSpec = this.spec.imageUploader;
+
+      const upload = new Uploader(
+        file,
+        uploaderSpec.directUploadUrl,
+        this.progress
+      );
+
+      if (upload.validateFile(uploaderSpec)) {
+        upload.start((error, blob) => {
+          if (error) {
+            // Handle the error
+            console.log("Failed uploading image!");
+          } else {
+            this.insertImage(file, blob, onComplete);
+          }
+        });
+      }
+    },
+    insertImage(file, blob, onComplete) {
+      let vm = this;
+      var reader = new FileReader();
+      reader.onload = function(e) {
+        if (file.type.indexOf("image") !== -1) {
+          var image = new Image();
+          image.src = e.target.result;
+
+          const key = image.src.hashCode().toString();
+          image.onload = function() {
+            const response = {
+              [key]: {
+                url: image.src,
+                id: key
+              }
+            };
+
+            onComplete(response);
+          };
+
+          vm.images[key] = blob.signed_id;
+        }
+      };
+      reader.readAsDataURL(file);
+      vm.progress.value = -1;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+// .rx-container {
+//   height: 300px;
+// }
+</style>