ArticleFooter.vue

<template>
  <div class="article_footer">
    <span v-if="webShareApiSupported">
      <button class="share_button" @click="shareViaWebShare">
        <span class = "share_text">Del ordet</span>
        <v-icon dense>$vuetify.icons.share</v-icon>
      </button>
    </span>
  <span v-else>
      <button class="share_button">
          <ShareNetwork network="facebook"
              title=""
              :url="share_link">
              <v-icon dense>$vuetify.icons.facebook</v-icon>
          </ShareNetwork>
      </button>
      <button class="share_button">
          <ShareNetwork
              network="twitter"
              :url="share_link"
              :title="dict_label"
              hashtags="#ordbøkene">
              <v-icon dense>$vuetify.icons.twitter</v-icon>
          </ShareNetwork>
      </button>
  </span>
    <div class = "footer_title">Ordbøkene.no
    </div>
  </div>
</template>

<script>
export default {
  name: 'ArticleFooter',
  props: {
    article: Object
  },
    computed: {
      dict_label: function() { // TODO: reuse code used in header
      return {
        'bob': 'Fra bokmålsordboka',
        'nob': 'Frå nynorskordboka'
      }[this.article.dictionary] + ': ' + this.article.lemmas[0].lemma || ''
    },
    webShareApiSupported() {
      return navigator.share && !(navigator.platform==="Win64" || navigator.platform==="Win32")
    },
    share_link: function() {
      let host =  window.location.hostname === 'localhost'? 'https://dev.ordbok.uib.no/' : window.location.href
      return host + this.article.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma)
    }
  },
  methods: {
    shareViaWebShare() {
      navigator.share({
        title: "Ordbøkene.no: " + encodeURIComponent(this.article.lemmas[0].lemma),
        text: "",
        url: "/" + this.article.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma)
      })
    }
  }
}

</script>
<style scoped>

.share_text {
  padding-right: 10px;
}

.v-icon {
  color: var(--v-primary-base) !important;
}

.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>