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-dialog max-width="600px" rounded="0" 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 rounded="0" 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> Kopier
          </v-btn>
                    <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" @click="close_citation_dialog"><br>
            <v-icon x-small icon>get_app</v-icon> Last ned
          </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> Avbryt
          </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 {
      citation_dialog: 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() < 9? '0' : '') + (date.getMonth()+1)
      let yyyy = date.getFullYear()
      let link = this.create_link()
      let citation = {"bm": `«${this.article.lemmas[0].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":`«${this.article.lemmas[0].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() {
      navigator.clipboard.writeText(this.create_link());
    },

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

    close_citation_dialog() {
      this.citation_dialog = 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: 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: 12px;
}


</style>