ArticleFooter.vue

<template>
  <div class="article_footer">
      <v-btn v-if="!webShareApiSupported" x-small depressed class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare">        
        <v-icon small>link</v-icon> <span class = "button-text">Kopier lenke</span>
      </v-btn>

      <v-btn v-if="webShareApiSupported" depressed x-small class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare">
        <v-icon x-small>share</v-icon><span class = "button-text">Del ordet</span>
      </v-btn>
            <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare">
        <v-icon x-small>format_quote</v-icon> <span class = "button-text">Siter</span>
      </v-btn>
  </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>

.button-text {
  padding-left: 3px;
  font-size: 12px;
  color: var(--v-primary-base) !important;
}

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

.toolbar-button {
  margin-right: 6px;
  font-size: 12px;
  font-weight: bold;
}


.article_footer {
  color: var(--v-primary-base);
  padding-top: 24px;
}


</style>