feat: anchor - copy link to clipboard
This commit is contained in:
@@ -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 })
|
||||
}
|
||||
|
@@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -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
|
||||
}
|
||||
})
|
||||
|
23
client/js/store/modules/anchor.js
Normal file
23
client/js/store/modules/anchor.js
Normal 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 })
|
||||
}
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user