From e0e859a79dd9246c28c266a8d2d9fe2b510a0021 Mon Sep 17 00:00:00 2001
From: Henrik Askjer <henrik.askjer@uib.no>
Date: Thu, 15 Jul 2021 09:37:21 +0200
Subject: [PATCH] Add sharing with Web Share API
---
package.json | 1 +
src/components/Article.vue | 19 +++++++++++++++++--
src/main.js | 3 ++-
3 files changed, 20 insertions(+), 3 deletions(-)
diff --git a/package.json b/package.json
index e045e88c..fe399a12 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
+ "@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/vue-fontawesome": "^2.0.2",
"axios": "^0.19.2",
"core-js": "^3.6.5",
diff --git a/src/components/Article.vue b/src/components/Article.vue
index 89fd928c..4cd5592a 100644
--- a/src/components/Article.vue
+++ b/src/components/Article.vue
@@ -32,7 +32,12 @@
</router-link>
</div>
</div>
- <div class="share">
+ <div class="share" v-if="webShareApiSupported">
+ <button @click="shareViaWebShare">
+ Del ordet <font-awesome-icon icon="share-alt-square" size = "lg"/>
+ </button>
+ </div>
+ <div class="share" v-else>
<button class="share-button">
<ShareNetwork network="facebook"
:url="share_link"
@@ -96,7 +101,10 @@ export default {
props: {
article: Object
},
- computed: {
+ computed: {
+ webShareApiSupported() {
+ return navigator.share
+ },
link_to_self: function() {
return {
ref: '/' + this.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma),
@@ -129,6 +137,13 @@ export default {
Header
},
methods: {
+ shareViaWebShare() {
+ navigator.share({
+ title: 'Title to be shared',
+ text: 'Text to be shared',
+ url: 'URL to be shared'
+ })
+ },
article_link_click: function(item) {
this.$emit('article-click', item)
},
diff --git a/src/main.js b/src/main.js
index 1d165a35..fd6606f4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,9 +12,10 @@ Vue.use(VueSocialSharing);
import { library } from '@fortawesome/fontawesome-svg-core'
+import { faShareAltSquare } from '@fortawesome/free-solid-svg-icons'
import { faFacebookSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-library.add(faFacebookSquare, faTwitterSquare)
+library.add(faFacebookSquare, faTwitterSquare, faShareAltSquare)
Vue.component('font-awesome-icon', FontAwesomeIcon);
--
GitLab