ArticleFooter.vue

<template>
  <div class="article_footer">
     <v-snackbar center left light 
                 tile
                 v-model='copy_popup'
                 timeout="2000">
         
        <span class="text-center">{{what_copied}} er kopiert til utklippstavla</span>
              <template v-slot:action="{ attrs }">
          <v-btn
            color="primary"
            text
            v-bind="attrs"
            @click="copy_popup = false"
          >
            <v-icon>close</v-icon>
          </v-btn>
        </template>
      </v-snackbar>

      <v-btn v-if="!webShareApiSupported || $vuetify.breakpoint.mdAndUp"
             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-dialog max-width="600px" v-model="citation_dialog">
        <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 class="info-card">
          {{{"nn": "Ønskjer du å sitere denne artikkelen i Nynorskordboka, rår vi deg til å gje opp når artikkelen vart henta (lesen), t.d. slik:",
             "bm": "Ønsker du å sitere denne artikkelen i Bokmålsordboka, anbefaler vi å oppgi når artikkelen ble hentet (lest), f.eks. slik:"}[this.article.dictionary]}}<br/>
          <div id = "citation" v-html="this.create_citation()"/>
          <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" @click="copy_citation"><br>
            <v-icon x-small icon>content_copy</v-icon>  <span class = "button-text">Kopier</span>
          </v-btn>
                    <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" @click="download_ris"><br>
            <v-icon x-small icon>get_app</v-icon> <span class = "button-text">Last ned (RIS)</span>
          </v-btn>
                    <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" @click="close_citation_dialog"><br>
            <v-icon x-small icon>close</v-icon> <span class = "button-text">Avbryt</span>
          </v-btn>
        </v-card>
      </v-dialog>
  </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 {
      copy_popup: false,
      citation_dialog: false,
      what_copied: null
    }

  },
  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)
    },
    get_citation_info() {
      let date = new Date();
      let dd = (date.getDate() < 10? '0' : '') + date.getDate()
      let mm = (date.getMonth() < 9? '0' : '') + (date.getMonth()+1)
      let yyyy = date.getFullYear()
      let link = this.create_link()
      let lemma = this.article.lemmas[0].lemma
      return [lemma, dd, mm, yyyy, link]
    },
    create_citation() {
      const [lemma, dd, mm, yyyy, link] = this.get_citation_info()
      let citation = {"bm": `«${lemma}». I: <em>Bokmålsordboka.</em> Språkrådet og Universitetet i Bergen. &lt;<a href='${link}'>${link}</a>&gt; (hentet ${dd}.${mm}.${yyyy}).`,
                      "nn":`«${lemma}». I: <em>Nynorskordboka.</em> Språkrådet og Universitetet i Bergen. &lt;<a href='${link}'>${link}</a>&gt;  (henta ${dd}.${mm}.${yyyy}).`
                      }[this.article.dictionary]
      return citation
    },
    copy_link() {
      let link = this.create_link()
      let self = this
         navigator.clipboard.writeText(link).then(() => {
           self.what_copied = "Lenka"
           self.copy_popup = true
           console.log(link)

         }).catch(err => {
           console.log("ERROR COPYING:",err)
         })
    },

    copy_citation() {
      
      let citation = document.getElementById("citation").textContent;
      navigator.clipboard.writeText(citation)
      this.citation_dialog = false
      this.what_copied = "Siteringa"
      this.copy_popup = true
    },

    close_citation_dialog() {
      this.citation_dialog = false
    },
    download_ris() {
      const [lemma, dd, mm, yyyy, link] = this.get_citation_info()
      const a = document.createElement("a")
      a.style = "display: none"
      a.setAttribute("download", `${lemma}_${this.article.dictionary}.ris`)
      const dict = {"bm":"Bokmålsordboka", "nn": "Nynorskordboka"}[this.article.dictionary]
      const text = `TY  - DICT\nTI  - ${lemma}\nT2  - ${dict}\nPB  - Språkrådet og Universitetet i Bergen\nUR  - ${link}\nY2  - ${yyyy}/${mm}/${dd}/\nER  - `
      a.setAttribute('href', 'data:application/x-research-info-systems;charset=utf-8,' + encodeURIComponent(text));
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    },
  }
}

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


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

#citation {
  margin-top: 12px;
  padding: 12px;
  background-color: var(--v-button-base) !important;
  margin-bottom: 6px;
}

</style>