WIP wegue-oss#122 Share Button for permalink

Author: justb4

src/components/AppHeader.vue

@@ -58,12 +58,14 @@ import LayerListToggleButton from './layerlist/ToggleButton'
 import HelpWinToggleButton from './helpwin/ToggleButton'
 import MeasureToolToggleButton from './measuretool/ToggleButton'
 import InfoClickButton from './infoclick/ToggleButton'
+import ShareButton from './sharebutton/ShareButton'
 import ZoomToMaxExtentButton from './maxextentbutton/ZoomToMaxExtentButton'
 import Geocoder from './geocoder/Geocoder'
 
 export default {
   name: 'wgu-app-header',
   components: {
+    'wgu-share-btn': ShareButton,
     'wgu-geocoder-btn': Geocoder,
     'wgu-zoomtomaxextent-btn': ZoomToMaxExtentButton,
     'wgu-layerlist-btn': LayerListToggleButton,

src/components/ol/Map.vue

@@ -104,6 +104,7 @@ export default {
 
     if (this.$appConfig.permalink) {
       this.permalinkController = this.createPermalinkController();
+      this.map.set('permalinkcontroller', this.permalinkController, true);
       this.permalinkController.apply();
       this.permalinkController.setup();
     }

src/components/ol/PermalinkController.js

@@ -194,6 +194,13 @@ export default class PermalinkController {
     return this.conf.separator + UrlUtil.toQueryString(this.urlParams);
   }
 
+  /**
+   * Get full URL with permalink string for sharing.
+   */
+  getShareUrl () {
+    return location.href.split(this.conf.separator)[0] + this.getParamStr();
+  }
+
   /**
    * Get array of visible layer id's.
    */

src/components/sharebutton/ShareButton.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <div>
+    <v-btn icon :dark="dark" @click="onClick">
+      <v-icon medium>{{icon}}</v-icon>
+      {{text}}
+    </v-btn>
+    <textarea id="permalinkurl" ref="permalinkurl" style="display: none; position: relative"></textarea>
+    </div>
+    <v-alert
+      class="wgu-alert"
+        :value="alert"
+        :dark="dark"
+        type="info"
+        transition="fade-transition"
+      >
+      {{alertText}}
+    </v-alert>
+  </div>
+</template>
+
+<script>
+
+import { Mapable } from '../../mixins/Mapable';
+
+export default {
+  name: 'wgu-share-btn',
+  mixins: [Mapable],
+  props: {
+    icon: {type: String, required: false, default: 'share'},
+    text: {type: String, required: false, default: ''},
+    alertText: {type: String, required: false, default: 'Link copied!'},
+    alertTimeMillis: {type: Number, required: false, default: 750},
+    dark: {type: Boolean, required: false, default: false}
+  },
+  data () {
+    return {
+      alert: false
+    }
+  },
+  methods: {
+    onClick () {
+      // Get permalink URL and copy to clipboard
+      const permalinkController = this.map.get('permalinkcontroller');
+      if (!permalinkController) {
+        console.error('no permalink controller available!');
+        return true;
+      }
+      try {
+        // Copy to clipboard: selected text needs to be visible so
+        // toggle textarea short time
+        const url = permalinkController.getShareUrl();
+        const textArea = this.$refs.permalinkurl;
+        // Show and select  textarea
+        textArea.style.display = 'block';
+        textArea.value = url;
+        textArea.select();
+
+        // Copy to clipboard
+        document.execCommand('copy');
+        // Hide textarea
+        textArea.value = '';
+        textArea.style.display = 'none';
+
+        // Show short alert
+        this.alert = true;
+        window.setTimeout(() => {
+          this.alert = false;
+        }, this.alertTimeMillis);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }
+}
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style>
+  .v-alert.wgu-alert {
+    position: fixed;
+    top: 5em;
+    right: 4em;
+    z-index: 1;
+  }
+
+</style>

static/app-conf.json

@@ -20,7 +20,7 @@
     "extent": false,
     "projection": "EPSG:4326",
     "paramPrefix": "",
-    "history": true
+    "history": false
   },
 
   "mapLayers": [
@@ -163,6 +163,10 @@
     "wgu-helpwin": {
       "target": "toolbar",
       "darkLayout": true
+    },
+    "wgu-share": {
+      "target": "toolbar",
+      "darkLayout": true
     }
   }
 }