ArticleFooter.vue 6.08 KB
Newer Older
Henrik Askjer's avatar
Henrik Askjer committed
1
2
<template>
  <div class="article_footer">
Henrik Askjer's avatar
Henrik Askjer committed
3
     <v-snackbar center left light 
Henrik Askjer's avatar
Henrik Askjer committed
4
                 tile
Henrik Askjer's avatar
Henrik Askjer committed
5
6
7
                 v-model='copy_popup'
                 timeout="2000">
         
Henrik Askjer's avatar
Henrik Askjer committed
8
        <span class="text-center">{{what_copied}} er kopiert til utklippstavla</span>
Henrik Askjer's avatar
Henrik Askjer committed
9
10
11
12
13
14
15
16
17
18
19
20
              <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>

21
      <v-btn v-if="showLinkCopy"
Henrik Askjer's avatar
Henrik Askjer committed
22
23
             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>
Henrik Askjer's avatar
Henrik Askjer committed
24
25
26
27
28
      </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>
Henrik Askjer's avatar
Henrik Askjer committed
29
      <v-dialog max-width="600px" v-model="citation_dialog">
30
31
        <template v-slot:activator="{ on, attrs }">
            <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" v-on="on" v-bind="attrs">
Henrik Askjer's avatar
Henrik Askjer committed
32
33
        <v-icon x-small>format_quote</v-icon> <span class = "button-text">Siter</span>
      </v-btn>
34
35

        </template>
Henrik Askjer's avatar
Henrik Askjer committed
36

Henrik Askjer's avatar
Henrik Askjer committed
37
        <v-card class="info-card">
Henrik Askjer's avatar
Henrik Askjer committed
38
          {{{"nn": "Ønskjer du å sitere denne artikkelen i Nynorskordboka, rår vi deg til å gje opp når artikkelen vart henta (lesen), t.d. slik:",
Henrik Askjer's avatar
Henrik Askjer committed
39
             "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/>
Henrik Askjer's avatar
Henrik Askjer committed
40
          <div id = "citation" v-html="this.create_citation()"/>
Henrik Askjer's avatar
Henrik Askjer committed
41
          <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" @click="copy_citation"><br>
Henrik Askjer's avatar
Henrik Askjer committed
42
            <v-icon x-small icon>content_copy</v-icon>  <span class = "button-text">Kopier</span>
Henrik Askjer's avatar
Henrik Askjer committed
43
          </v-btn>
Henrik Askjer's avatar
Henrik Askjer committed
44
                    <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" @click="download_ris"><br>
45
            <v-icon x-small icon>get_app</v-icon> <span class = "button-text">Last ned (RIS)</span>
Henrik Askjer's avatar
Henrik Askjer committed
46
47
          </v-btn>
                    <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" @click="close_citation_dialog"><br>
Henrik Askjer's avatar
Henrik Askjer committed
48
            <v-icon x-small icon>close</v-icon> <span class = "button-text">Avbryt</span>
49
50
          </v-btn>
        </v-card>
Henrik Askjer's avatar
Henrik Askjer committed
51
      </v-dialog>
Henrik Askjer's avatar
Henrik Askjer committed
52
53
54
55
56
57
58
59
60
61
62
  </div>
</template>

<script>
export default {
  name: 'ArticleFooter',
  props: {
    article: Object
  },
    computed: {
    webShareApiSupported() {
Henrik Askjer's avatar
Henrik Askjer committed
63
64
      return navigator.share
    },
65
66
67
    showLinkCopy() {
      return (!navigator.share || this.$vuetify.breakpoint.mdAndUp) && navigator.clipboard
    },
Henrik Askjer's avatar
Henrik Askjer committed
68
69
    hasPointer() {
      return window.matchMedia('(hover: hover) and (pointer: fine)').matches
Henrik Askjer's avatar
Henrik Askjer committed
70
    },
71
72
73
  },
  data: function() {
    return {
Henrik Askjer's avatar
Henrik Askjer committed
74
      copy_popup: false,
Henrik Askjer's avatar
Henrik Askjer committed
75
76
      citation_dialog: false,
      what_copied: null
Henrik Askjer's avatar
Henrik Askjer committed
77
    }
78

Henrik Askjer's avatar
Henrik Askjer committed
79
80
81
82
  },
  methods: {
    shareViaWebShare() {
      navigator.share({
Henrik Askjer's avatar
Henrik Askjer committed
83
        title: "Ordbøkene.no: " + this.article.lemmas[0].lemma,
Henrik Askjer's avatar
Henrik Askjer committed
84
85
        text: "",
        url: "/" + this.article.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma)
Henrik Askjer's avatar
Henrik Askjer committed
86
      })
87
88
    },
    create_link() {
Henrik Askjer's avatar
Henrik Askjer committed
89
      return 'https://beta.ordbok.uib.no/' + this.article.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma)
90
    },
Henrik Askjer's avatar
Henrik Askjer committed
91
    get_citation_info() {
92
93
      let date = new Date();
      let dd = (date.getDate() < 10? '0' : '') + date.getDate()
Henrik Askjer's avatar
Henrik Askjer committed
94
      let mm = (date.getMonth() < 9? '0' : '') + (date.getMonth()+1)
95
      let yyyy = date.getFullYear()
Henrik Askjer's avatar
Henrik Askjer committed
96
      let link = this.create_link()
Henrik Askjer's avatar
Henrik Askjer committed
97
98
99
100
101
102
103
      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}).`
Henrik Askjer's avatar
Henrik Askjer committed
104
                      }[this.article.dictionary]
105
106
107
      return citation
    },
    copy_link() {
Henrik Askjer's avatar
debug    
Henrik Askjer committed
108
      let link = this.create_link()
Henrik Askjer's avatar
debug    
Henrik Askjer committed
109
110
111
112
113
114
115
      let self = this
         navigator.clipboard.writeText(link).then(() => {
           self.what_copied = "Lenka"
           self.copy_popup = true
         }).catch(err => {
           console.log("ERROR COPYING:",err)
         })
116
117
118
    },

    copy_citation() {
Henrik Askjer's avatar
Henrik Askjer committed
119
      
Henrik Askjer's avatar
Henrik Askjer committed
120
121
      let citation = document.getElementById("citation").textContent;
      navigator.clipboard.writeText(citation)
Henrik Askjer's avatar
Henrik Askjer committed
122
      this.citation_dialog = false
Henrik Askjer's avatar
Henrik Askjer committed
123
      this.what_copied = "Sitatet"
Henrik Askjer's avatar
Henrik Askjer committed
124
      this.copy_popup = true
Henrik Askjer's avatar
Henrik Askjer committed
125
    },
Henrik Askjer's avatar
Henrik Askjer committed
126

Henrik Askjer's avatar
Henrik Askjer committed
127
128
    close_citation_dialog() {
      this.citation_dialog = false
Henrik Askjer's avatar
Henrik Askjer committed
129
130
131
132
133
134
135
136
137
138
139
140
141
    },
    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)
    },
Henrik Askjer's avatar
Henrik Askjer committed
142
143
144
145
146
147
  }
}

</script>
<style scoped>

Henrik Askjer's avatar
Henrik Askjer committed
148
149
150
151
.button-text {
  padding-left: 3px;
  font-size: 12px;
  color: var(--v-primary-base) !important;
Henrik Askjer's avatar
Henrik Askjer committed
152
153
}

Henrik Askjer's avatar
Henrik Askjer committed
154
155
156
157
.v-icon {
  color: var(--v-primary-base) !important;
}

Henrik Askjer's avatar
Henrik Askjer committed
158
.toolbar-button {
159
  margin-right: 6px;
160
  margin-top: 6px;
Henrik Askjer's avatar
Henrik Askjer committed
161
  font-size: 12px;
Henrik Askjer's avatar
Henrik Askjer committed
162
163
}

Henrik Askjer's avatar
Henrik Askjer committed
164

Henrik Askjer's avatar
Henrik Askjer committed
165
166
167
168
169
.article_footer {
  color: var(--v-primary-base);
  padding-top: 24px;
}

Henrik Askjer's avatar
Henrik Askjer committed
170
#citation {
Henrik Askjer's avatar
Henrik Askjer committed
171
172
  margin-top: 12px;
  padding: 12px;
Henrik Askjer's avatar
Henrik Askjer committed
173
  background-color: var(--v-button-base) !important;
174
  margin-bottom: 6px;
Henrik Askjer's avatar
Henrik Askjer committed
175
176
}

Henrik Askjer's avatar
Henrik Askjer committed
177
</style>