feat: anchor - copy link to clipboard

client/js/components/anchor.vue

@@ -1,16 +1,53 @@
-<template>
-    <div>
-        <p>{{ msg }}</p>
-        <input type="text" v-model="msg" />
-    </div>
+<template lang="pug">
+  .modal(v-bind:class='{ "is-active": isShown }')
+    .modal-background
+    .modal-container
+      .modal-content
+        header.is-blue
+          span Copy link to this section
+        section
+          p.control.is-fullwidth
+            input.input(type='text', ref='anchorURLinput', v-model='anchorURL')
+        footer
+          a.button.is-grey.is-outlined(v-on:click='cancel') Discard
+          a.button.is-blue(v-clipboard='anchorURL', @success="clipboardSuccess", @error="clipboardError") Copy to Clipboard
 </template>
 
 <script>
+  import * as _ from 'lodash'
+
   export default {
     name: 'anchor',
     data () {
-      return {
-          msg: 'Welcome to Your Vue.js App'
+      return {}
+    },
+    computed: {
+      anchorURL () {
+        return window.location.href.split('#')[0] + '#' + this.$store.state.anchor.hash
+      },
+      isShown () {
+        return this.$store.state.anchor.shown
+      }
+    },
+    methods: {
+      cancel () {
+        this.$store.dispatch('anchorClose')
+      },
+      clipboardSuccess () {
+        this.$store.dispatch('alert', {
+          style: 'blue',
+          icon: 'clipboard',
+          msg: 'The URL has been copied to your clipboard.'
+        })
+        this.$store.dispatch('anchorClose')
+      },
+      clipboardError () {
+        this.$store.dispatch('alert', {
+          style: 'red',
+          icon: 'clipboard',
+          msg: 'Clipboard copy failed. Copy the URL manually.'
+        })
+        this.$refs.anchorURLinput.select()
       }
     }
   }