ArticleFooter.vue

<template>
  <div class="article_footer">
      <span  v-if="hasPointer">
      <button aria-label="Del ordboksartikkel på Facebook" class="share_button" tabindex="0">
          <ShareNetwork network="facebook"
              title=""
              :url="share_link"
              tabindex="-1">
              <v-icon dense>$vuetify.icons.facebook</v-icon>
          </ShareNetwork>
      </button>
      <button aria-label="Del del ordboksartikkel på Twitter" class="share_button" tabindex="0">
          <ShareNetwork
              network="twitter"
              :url="share_link"
              :title="dict_label"
              hashtags="#ordbøkene"
              tabindex="-1">
              <v-icon dense>$vuetify.icons.twitter</v-icon>
          </ShareNetwork>
      </button>
    </span>
      <button v-if="webShareApiSupported" aria-label="Del ordboksartikkelen med andre" class="share_button" tabindex="0" @click="shareViaWebShare">
        <span v-if="!hasPointer" class = "share_text">Del ordet</span>
        <v-icon dense>$vuetify.icons.share</v-icon>
      </button>
    <div class = "footer_title" tabindex="0">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
    },
    hasPointer() {
      return window.matchMedia('(hover: hover) and (pointer: fine)').matches
    },
    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: " + 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;
  vertical-align: middle;
}

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