feat: anchor - copy link to clipboard

This commit is contained in:
NGPixel
2017-05-22 13:32:52 -04:00
parent 45d94e7e94
commit 13bdb2edb7
10 changed files with 117 additions and 14 deletions

View File

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

View File

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

View File

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

View File

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