ArticleFooter.vue

<template>
  <div class="article_footer">
      <v-btn v-if="!webShareApiSupported" x-small depressed class="toolbar-button" rounded tabindex="0" @click="copy_link">        
        <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-menu :close-on-content-click=false max-width="500px" rounded="0" v-model="menu">
        <template v-slot:activator="{ on, attrs }">
            <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" v-on="on" v-bind="attrs">
        <v-icon x-small>format_quote</v-icon> <span class = "button-text">Siter</span>
      </v-btn>

        </template>
        <v-card rounded="0" class="info-card">
          {{{"nob": "Ønskjer du å sitere denne artikkelen i Nynorskordboka, rår vi deg til å gje opp når artikkelen vart henta (lesen), t.d. slik:",
                         "bob": "Ønsker du å sitere denne artikkelen i Bokmålsordboka, anbefaler vi å oppgi når artikkelen ble hentet (lest), f.eks. slik:"}[this.article.dictionary]}}<br/>
          <span class = "highlighted">{{this.create_citation()}}</span>
          <v-btn fixed depressed x-small class="toolbar-button" rounded tabindex="0" @click="copy_citation">
            
            <v-icon x-small icon>content_copy</v-icon> Kopier
          </v-btn>
        </v-card>
      </v-menu>
  </div>
</template>

<script>
const host =  window.location.hostname === 'localhost'? 'https://dev.ordbok.uib.no/' : window.location.href

export default {
  name: 'ArticleFooter',
  props: {
    article: Object
  },
    computed: {
    webShareApiSupported() {
      return navigator.share
    },
    hasPointer() {
      return window.matchMedia('(hover: hover) and (pointer: fine)').matches
    },
  },
  data: function() {
    return {
      menu: false
    }

  },
  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)
      })
    },
    create_link() {
      return host + this.article.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma)
    },
    create_citation() {
      let date = new Date();
      let dd = (date.getDate() < 10? '0' : '') + date.getDate()
      let mm = (date.getMonth() < 10? '0' : '') + date.getMonth()
      let yyyy = date.getFullYear()
      let citation = `«${this.article.lemmas[0].lemma}». I: ${{"bob": "Bokmålsordboka", "nob": "Nynorskordboka"}[this.article.dictionary]}. Språkrådet og Universitetet i Bergen. <${this.create_link()}> (hentet ${dd}.${mm}.${yyyy}).`
      return citation
    },
    copy_link() {
      navigator.clipboard.writeText(this.create_link());
    },

    copy_citation() {
      let citation = this.create_citation()
      navigator.clipboard.writeText(citation);
      this.menu = false
    }
    
  }
}

</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: 10px;
  font-size: 12px;
}


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


</style>