feat: anchor - copy link to clipboard

client/js/app.js

@@ -6,6 +6,7 @@
 import $ from 'jquery'
 import Vue from 'vue'
 import VueResource from 'vue-resource'
+import VueClipboards from 'vue-clipboards'
 import store from './store'
 import io from 'socket.io-client'
 import i18next from 'i18next'
@@ -36,6 +37,7 @@ import sourceComponent from './pages/source.component.js'
 // ====================================
 
 Vue.use(VueResource)
+Vue.use(VueClipboards)
 Vue.use(VueI18Next)
 
 i18next
@@ -91,7 +93,7 @@ $(() => {
     i18n,
     el: '#root',
     mounted() {
-      $('a').smoothScroll({ speed: 500, offset: -50 })
+      $('a:not(.toc-anchor)').smoothScroll({ speed: 500, offset: -50 })
       $('#header').sticky({ topSpacing: 0 })
       $('.sidebar-pagecontents').sticky({ topSpacing: 15, bottomSpacing: 75 })
     }

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()
       }
     }
   }

client/js/store/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 
 import alert from './modules/alert'
+import anchor from './modules/anchor'
 import adminUsersCreate from './modules/admin-users-create'
 
 Vue.use(Vuex)
@@ -20,6 +21,7 @@ export default new Vuex.Store({
   getters: {},
   modules: {
     alert,
+    anchor,
     adminUsersCreate
   }
 })

client/js/store/modules/anchor.js

@@ -0,0 +1,23 @@
+'use strict'
+
+export default {
+  state: {
+    shown: false,
+    hash: ''
+  },
+  getters: {},
+  mutations: {
+    anchorChange: (state, opts) => {
+      state.shown = (opts.shown === true)
+      state.hash = opts.hash || ''
+    }
+  },
+  actions: {
+    anchorOpen({ commit, dispatch }, hash) {
+      commit('anchorChange', { shown: true, hash })
+    },
+    anchorClose({ commit, dispatch }) {
+      commit('anchorChange', { shown: false })
+    }
+  }
+}