gilles/webgems
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add copy button

Browse Source
This commit is contained in:
André Weller
2019-05-16 09:22:59 +02:00
parent baf50a5475
commit 0603e1a058
4 changed files with 75 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/Card.vue
View File

@@ -4,8 +4,8 @@
p.card--title {{title}}
p.card--description {{desc}}
div
//- a.card--reference(@click='createCopyUrl') Copy reference
//- br
a.card--reference(@click='createCopyUrl') Copy reference
br
a(:href="url" :target='title' rel='noreferrer') Visit website
</template>
@@ -17,8 +17,20 @@ export default {
isReferenced: false,
}
},
methods:{
createCopyUrl() {
methods: {
async createCopyUrl() {
try {
let currentPath = this.$router.history.current.path
let reference = this.$props.title.replace(/ /g, '').toLowerCase()
await this.$copyText(`https://webgems.io${currentPath}/#${reference}`)
window.location = `https://webgems.io${currentPath}#${reference}`
// this.$router.push(`${currentPath}#${reference}`)
} catch (e) {
console.error(e);
}
},
screateCopyUrl() {
this.$router.push(`${this.$router.history.current.path}#${this.$props.title.replace(/ /g, '').toLowerCase()}`)
},
checkReference(){
@@ -55,6 +67,13 @@ export default {
&--reference {
cursor: pointer;
&::before {
// content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAxNiAxNiIgdmVyc2lvbj0iMS4xIiBmaWxsPSIjMjkyOTI5Ij48ZyBpZD0ic3VyZmFjZTEiIGZpbGw9IiMyOTI5MjkiPjxwYXRoIHN0eWxlPSIgIiBkPSJNIDcuNSAxIEMgNi44NzEwOTQgMSA2LjQyOTY4OCAxLjQ0NTMxMyA2LjIxMDkzOCAyIEwgMy41IDIgQyAyLjY3NTc4MSAyIDIgMi42NzU3ODEgMiAzLjUgTCAyIDEyLjUgQyAyIDEzLjMyNDIxOSAyLjY3NTc4MSAxNCAzLjUgMTQgTCA2IDE0IEwgNiAxMyBMIDMuNSAxMyBDIDMuMjE4NzUgMTMgMyAxMi43ODEyNSAzIDEyLjUgTCAzIDMuNSBDIDMgMy4yMTg3NSAzLjIxODc1IDMgMy41IDMgTCA1IDMgTCA1IDUgTCAxMCA1IEwgMTAgMyBMIDExLjUgMyBDIDExLjc4MTI1IDMgMTIgMy4yMTg3NSAxMiAzLjUgTCAxMiA3IEwgMTMgNyBMIDEzIDMuNSBDIDEzIDIuNjc1NzgxIDEyLjMyNDIxOSAyIDExLjUgMiBMIDguNzg5MDYzIDIgQyA4LjU3MDMxMyAxLjQ0NTMxMyA4LjEyODkwNiAxIDcuNSAxIFogTSA3LjUgMiBDIDcuNzgxMjUgMiA4IDIuMjE4NzUgOCAyLjUgTCA4IDMgTCA5IDMgTCA5IDQgTCA2IDQgTCA2IDMgTCA3IDMgTCA3IDIuNSBDIDcgMi4yMTg3NSA3LjIxODc1IDIgNy41IDIgWiBNIDcuNSA4IEMgNy4yMjI2NTYgOCA3IDguMjIyNjU2IDcgOC41IEMgNyA4Ljc3NzM0NCA3LjIyMjY1NiA5IDcuNSA5IEMgNy43NzczNDQgOSA4IDguNzc3MzQ0IDggOC41IEMgOCA4LjIyMjY1NiA3Ljc3NzM0NCA4IDcuNSA4IFogTSA5LjUgOCBDIDkuMjIyNjU2IDggOSA4LjIyMjY1NiA5IDguNSBDIDkgOC43NzczNDQgOS4yMjI2NTYgOSA5LjUgOSBDIDkuNzc3MzQ0IDkgMTAgOC43NzczNDQgMTAgOC41IEMgMTAgOC4yMjI2NTYgOS43NzczNDQgOCA5LjUgOCBaIE0gMTEuNSA4IEMgMTEuMjIyNjU2IDggMTEgOC4yMjI2NTYgMTEgOC41IEMgMTEgOC43NzczNDQgMTEuMjIyNjU2IDkgMTEuNSA5IEMgMTEuNzc3MzQ0IDkgMTIgOC43NzczNDQgMTIgOC41IEMgMTIgOC4yMjI2NTYgMTEuNzc3MzQ0IDggMTEuNSA4IFogTSAxMy41IDggQyAxMy4yMjI2NTYgOCAxMyA4LjIyMjY1NiAxMyA4LjUgQyAxMyA4Ljc3NzM0NCAxMy4yMjI2NTYgOSAxMy41IDkgQyAxMy43NzczNDQgOSAxNCA4Ljc3NzM0NCAxNCA4LjUgQyAxNCA4LjIyMjY1NiAxMy43NzczNDQgOCAxMy41IDggWiBNIDcuNSAxMCBDIDcuMjIyNjU2IDEwIDcgMTAuMjIyNjU2IDcgMTAuNSBDIDcgMTAuNzc3MzQ0IDcuMjIyNjU2IDExIDcuNSAxMSBDIDcuNzc3MzQ0IDExIDggMTAuNzc3MzQ0IDggMTAuNSBDIDggMTAuMjIyNjU2IDcuNzc3MzQ0IDEwIDcuNSAxMCBaIE0gMTMuNSAxMCBDIDEzLjIyMjY1NiAxMCAxMyAxMC4yMjI2NTYgMTMgMTAuNSBDIDEzIDEwLjc3NzM0NCAxMy4yMjI2NTYgMTEgMTMuNSAxMSBDIDEzLjc3NzM0NCAxMSAxNCAxMC43NzczNDQgMTQgMTAuNSBDIDE0IDEwLjIyMjY1NiAxMy43NzczNDQgMTAgMTMuNSAxMCBaIE0gNy41IDEyIEMgNy4yMjI2NTYgMTIgNyAxMi4yMjI2NTYgNyAxMi41IEMgNyAxMi43NzczNDQgNy4yMjI2NTYgMTMgNy41IDEzIEMgNy43NzczNDQgMTMgOCAxMi43NzczNDQgOCAxMi41IEMgOCAxMi4yMjI2NTYgNy43NzczNDQgMTIgNy41IDEyIFogTSAxMy41IDEyIEMgMTMuMjIyNjU2IDEyIDEzIDEyLjIyMjY1NiAxMyAxMi41IEMgMTMgMTIuNzc3MzQ0IDEzLjIyMjY1NiAxMyAxMy41IDEzIEMgMTMuNzc3MzQ0IDEzIDE0IDEyLjc3NzM0NCAxNCAxMi41IEMgMTQgMTIuMjIyNjU2IDEzLjc3NzM0NCAxMiAxMy41IDEyIFogTSA3LjUgMTQgQyA3LjIyMjY1NiAxNCA3IDE0LjIyMjY1NiA3IDE0LjUgQyA3IDE0Ljc3NzM0NCA3LjIyMjY1NiAxNSA3LjUgMTUgQyA3Ljc3NzM0NCAxNSA4IDE0Ljc3NzM0NCA4IDE0LjUgQyA4IDE0LjIyMjY1NiA3Ljc3NzM0NCAxNCA3LjUgMTQgWiBNIDkuNSAxNCBDIDkuMjIyNjU2IDE0IDkgMTQuMjIyNjU2IDkgMTQuNSBDIDkgMTQuNzc3MzQ0IDkuMjIyNjU2IDE1IDkuNSAxNSBDIDkuNzc3MzQ0IDE1IDEwIDE0Ljc3NzM0NCAxMCAxNC41IEMgMTAgMTQuMjIyNjU2IDkuNzc3MzQ0IDE0IDkuNSAxNCBaIE0gMTEuNSAxNCBDIDExLjIyMjY1NiAxNCAxMSAxNC4yMjI2NTYgMTEgMTQuNSBDIDExIDE0Ljc3NzM0NCAxMS4yMjI2NTYgMTUgMTEuNSAxNSBDIDExLjc3NzM0NCAxNSAxMiAxNC43NzczNDQgMTIgMTQuNSBDIDEyIDE0LjIyMjY1NiAxMS43NzczNDQgMTQgMTEuNSAxNCBaIE0gMTMuNSAxNCBDIDEzLjIyMjY1NiAxNCAxMyAxNC4yMjI2NTYgMTMgMTQuNSBDIDEzIDE0Ljc3NzM0NCAxMy4yMjI2NTYgMTUgMTMuNSAxNSBDIDEzLjc3NzM0NCAxNSAxNCAxNC43NzczNDQgMTQgMTQuNSBDIDE0IDE0LjIyMjY1NiAxMy43NzczNDQgMTQgMTMuNSAxNCBaICIgZmlsbD0iIzI5MjkyOSIvPjwvZz48L3N2Zz4=);
// background-size: 20px 20px;
// width: 20px;
// height:20px;
}
}
&--link {

1
nuxt.config.js
View File

@@ -46,6 +46,7 @@ export default {
** Nuxt.js modules
*/
modules: [
'nuxt-clipboard2',
],
/*

49
package-lock.json generated
View File

@@ -2471,6 +2471,16 @@
"resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.0.tgz",
"integrity": "sha512-gpaBrMAizVEANOpfZp/EEUixTXDyGt7DFzdK5hU+UbWt/J0lB0w20ncZj59Z9a93xHb9u12zF5BS6i9RKbtg4w=="
},
"clipboard": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
"integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
"requires": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"cliui": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
@@ -3237,6 +3247,11 @@
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
"dev": true
},
"delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
},
"delegates": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -4687,6 +4702,14 @@
"minimatch": "~3.0.2"
}
},
"good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
"requires": {
"delegate": "^3.1.2"
}
},
"got": {
"version": "6.7.1",
"resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz",
@@ -6463,6 +6486,14 @@
"@nuxt/webpack": "2.6.3"
}
},
"nuxt-clipboard2": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/nuxt-clipboard2/-/nuxt-clipboard2-0.2.1.tgz",
"integrity": "sha512-NZl9UpcLjePt3CRhYSmJiv7af5IiI1DRrmesGawapjImmWZ2cO+UqflimIlBqIXjJSnz3ZsaPxX4639UgkxYTA==",
"requires": {
"vue-clipboard2": "0.2.1"
}
},
"oauth-sign": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
@@ -8873,6 +8904,11 @@
}
}
},
"select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
},
"semver": {
"version": "5.7.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
@@ -9714,6 +9750,11 @@
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
},
"tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
},
"to-arraybuffer": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
@@ -10310,6 +10351,14 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
"integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
},
"vue-clipboard2": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.2.1.tgz",
"integrity": "sha512-n6ie/0g0bKohmLlC/5ja1esq2Q0jQ5hWmhNSZcvCsWfDeDnVARjl6cBB9p72XV1nlVfuqsZcfV8HTjjZAIlLBA==",
"requires": {
"clipboard": "^2.0.0"
}
},
"vue-hot-reload-api": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz",

3
package.json
View File

@@ -12,7 +12,8 @@
},
"dependencies": {
"cross-env": "^5.2.0",
"nuxt": "^2.4.0"
"nuxt": "^2.4.0",
"nuxt-clipboard2": "^0.2.1"
},
"devDependencies": {
"autoprefixer": "^8.6.4",