diff --git a/src/components/Article.vue b/src/components/Article.vue index 7dafe6410fd911b5d1c42b562453963e5016c577..9ff3b36b512fe6cefbc08c0de3c3afe94a4e7966 100644 --- a/src/components/Article.vue +++ b/src/components/Article.vue @@ -32,32 +32,7 @@ </router-link> </div> </div> - <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" - title="TITLE" - description="DESCRIPTION" - quote="QUOTE"> - <font-awesome-icon :icon="['fab', 'facebook-square']" size="lg" /> - </ShareNetwork> - </button> - <button class="share-button"> - <ShareNetwork - network="twitter" - :url="share_link" - title="TITLE" - description="DESCRIPTION" - hashtags="Ordbøkene"> - <font-awesome-icon :icon="['fab', 'twitter-square']" size="lg" /> - </ShareNetwork> - </button> - </div> + <ArticleFooter :article="article"/> </article> </template> @@ -67,6 +42,7 @@ import DefElement from './DefElement.vue' import Definition from './Definition.vue' import SubArticle from './SubArticle.vue' import Header from './Header.vue' +import ArticleFooter from './ArticleFooter.vue' function find_sub_articles(definition) { let sub_art_list = [] @@ -102,19 +78,12 @@ export default { article: Object }, computed: { - webShareApiSupported() { - return navigator.share - }, link_to_self: function() { return { ref: '/' + this.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma), article: this.article } }, - share_link: function() { - let host = window.location.hostname === 'localhost'? 'https://dev.ordbok.uib.no' : 'https://' + window.location.host - return host + "/" + this.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma) - }, dictionary: function() { return this.article.dictionary }, @@ -135,16 +104,10 @@ export default { DefElement, Definition, SubArticle, - Header + Header, + ArticleFooter }, 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) }, @@ -182,14 +145,6 @@ h3 { font-variant: small-caps; } -div.share { - color: #560027; - padding-top: 24px; -} - -.share-button { - padding-right: 4px; -} section.etymology > h3, section.pronunciation > h3 { display: inline; diff --git a/src/components/ArticleFooter.vue b/src/components/ArticleFooter.vue new file mode 100644 index 0000000000000000000000000000000000000000..12850bb354c0ca98eb3f0ce86dec8ea59a77038a --- /dev/null +++ b/src/components/ArticleFooter.vue @@ -0,0 +1,86 @@ +<template> + <div class="article_footer"> + <span v-if="webShareApiSupported"> + <button class="share_button" @click="shareViaWebShare"> + <span class = "share_text">Del ordet</span> + <font-awesome-icon icon="share-alt-square" size = "lg"/> + </button> + </span> + <span v-else> + <button class="share_button"> + <ShareNetwork network="facebook" + :url="share_link" + title="TITLE" + description="DESCRIPTION" + quote="QUOTE"> + <font-awesome-icon :icon="['fab', 'facebook-square']" size="lg" /> + </ShareNetwork> + </button> + <button class="share_button"> + <ShareNetwork + network="twitter" + :url="share_link" + title="TITLE" + description="DESCRIPTION" + hashtags="Ordbøkene.no"> + <font-awesome-icon :icon="['fab', 'twitter-square']" size="lg" /> + </ShareNetwork> + </button> + </span> + <div class = "footer_title">Ordbøkene.no + </div> + </div> +</template> + +<script> +export default { + name: 'ArticleFooter', + props: { + article: Object + }, + computed: { + webShareApiSupported() { + return navigator.share && !(navigator.platform==="Win64" || navigator.platform==="Win32") + }, + share_link: function() { + let host = window.location.hostname === 'localhost'? 'https://dev.ordbok.uib.no' : 'https://' + window.location.host + return host + "/" + this.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma) + } + }, + methods: { + shareViaWebShare() { + navigator.share({ + title: 'Title to be shared', + text: 'Text to be shared', + url: 'URL to be shared' + }) + } + } +} + +</script> +<style scoped> + +.share_text { + padding-right: 10px; +} + +.share_button { + padding-right: 4px; + font-weight: bold; + font-size: 14px; +} + +.article_footer { + color: var(--v-primary-base); + padding-top: 24px; +} + +.footer_title { + font-family: Inria Serif; + font-weight: bold; + font-size: 18px; + float: right; +} + +</style>