Commit 02e268ee authored by Henrik Askjer's avatar Henrik Askjer
Browse files

Merge branch 'show-copy-link-on-desktop' into 'dev'

Show copy link on desktop

See merge request spraksamlingane/beta.ordbok.uib.no!98
parents 29440225 090341bc
<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-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="showLinkCopy"
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">
<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>
......@@ -15,7 +34,7 @@
</template>
<v-card rounded="0" class="info-card">
<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()"/>
......@@ -34,8 +53,6 @@
</template>
<script>
const host = window.location.hostname === 'localhost'? 'https://dev.ordbok.uib.no/' : window.location.href
export default {
name: 'ArticleFooter',
props: {
......@@ -45,13 +62,18 @@ export default {
webShareApiSupported() {
return navigator.share
},
showLinkCopy() {
return (!navigator.share || this.$vuetify.breakpoint.mdAndUp) && navigator.clipboard
},
hasPointer() {
return window.matchMedia('(hover: hover) and (pointer: fine)').matches
},
},
data: function() {
return {
citation_dialog: false
copy_popup: false,
citation_dialog: false,
what_copied: null
}
},
......@@ -64,7 +86,7 @@ export default {
})
},
create_link() {
return host + this.article.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma)
return 'https://ordbokene.no/' + this.article.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma)
},
get_citation_info() {
let date = new Date();
......@@ -83,13 +105,23 @@ export default {
return citation
},
copy_link() {
navigator.clipboard.writeText(this.create_link());
let link = this.create_link()
let self = this
navigator.clipboard.writeText(link).then(() => {
self.what_copied = "Lenka"
self.copy_popup = true
}).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 = "Sitatet"
this.copy_popup = true
},
close_citation_dialog() {
......
......@@ -7,13 +7,13 @@
<span class="header_group_list" v-if="group_list.length" tabindex="0">{{group_list}}</span>
<span v-if="split_inf" tabindex="0"> (kløyvd infinitiv: <i>-a</i>
<v-menu rounded="0" v-model="menu" offset-x max-width="200px">
<v-menu tile v-model="menu" offset-x max-width="200px">
<template v-slot:activator="{ on, attrs }">
<v-btn aria-label="Mer informasjon om kløyvd infinitiv" x-small icon v-on="on" v-bind="attrs" class="info-button">
<v-icon color="primary" size="14px">$vuetify.icons.value.info</v-icon>
</v-btn>
</template>
<v-card rounded="0" class="info-card">
<v-card tile class="info-card">
Dersom du bruker kløyvd infinitiv, skal dette verbet ha <i>-a</i> i infinitiv. Les meir
<a target="_blank" href="https://www.sprakradet.no/svardatabase/sporsmal-og-svar/kloyvd-infinitiv-/">her</a>.
</v-card>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment