This commit is contained in:
ogerly 2019-10-01 11:00:14 +02:00
parent 63d5140420
commit 17323aeb25

View File

@ -5,27 +5,30 @@ import { mapGetters, mapMutations } from 'vuex'
import { allowEmbedIframesMutation } from '~/graphql/User.js'
const template = `
<a class="embed" href="" style="cursor: none">
<ds-container width="small">
<ds-section secondary v-if="showOverlay" style="height: 270px;width:80%;position:absolute;z-index:3">
<ds-text v-if="!isOnlyLink">Deine Daten sind noch nicht weitergegeben. Wenn Du die das jetzt ansiehst dann werden auch Daten mit dem Anbieter ({{embedPublisher}}) ausgetauscht!</ds-text>
<ds-text v-else >Du verlässt jetzt Human Connection! Du wirst zu ({{embedPublisher}}) weitergeleitet!</ds-text>
<ds-button v-if="!isOnlyLink" size="x-large" @click.prevent="allowEmbedTemporar('openIframe')" >jetzt ansehen</ds-button>
<ds-button v-else size="x-large" > <a :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank" >Webseite aufrufen </a> </ds-button>
<p v-show="!isOnlyLink">
<input type="checkbox" v-model="currentUser.allowEmbedIframes" @click.prevent="check($event)" id="dataEmbedUrl" />
<a class="embed" :href="dataEmbedUrl" style="cursor: none">
<ds-container width="medium">
<ds-section secondary v-if="showOverlay" style="height: 270px;width:92%;position:absolute;z-index:3">
<ds-text>Deine Daten sind noch nicht weitergegeben. Wenn Du die das jetzt ansiehst dann werden auch Daten mit dem Anbieter ({{embedPublisher}}) ausgetauscht!</ds-text>
<ds-button size="x-large" @click.prevent="allowEmbedTemporar('openIframe')" >jetzt ansehen</ds-button>
<ds-text v-if="!currentUser.allowEmbedIframes" size="small" align="right" color="softer">
<lable v-if="!currentUser.allowEmbedIframes" for="dataEmbedUrl" size="small">
automatisches Einbinden <b>zulassen?</b> |
</ds-text>
<ds-text v-else size="small" align="right" color="softer">
</lable>
<lable v-else size="small" for="dataEmbedUrl" >
automatisches Einbinden <b>zugelassen</b> |
</ds-text>
<input type="checkbox" v-model="currentUser.allowEmbedIframes" @click.prevent="check($event)">
</lable>
</p>
</ds-section>
<p v-if="!showEmbed || linkOnly" style="cursor: pointer" >
<img :src="embedImage" alt="dataEmbedUrl" @click.prevent="clickPreview" height="270" width="auto" />
<div v-else v-html="embedHtml" />
<img v-show="showPreviewImage" style="cursor: pointer" :src="embedImage" alt="dataEmbedUrl" @click.prevent="clickPreview" height="270" width="auto" />
<div v-show="!showPreviewImage" v-html="embedHtml" />
<p style="color:black">
<div style="font-size: 1.5em">{{ embedTitle }}</div>
<div style="font-size: 1em">{{ embedDescription }}</div>
<a class="embed" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank" >
<div >{{ embedTitle }}</div>
<div>{{ embedDescription }}</div>
<a :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank" >
<em> {{ dataEmbedUrl }} </em>
</a>
</ds-container>
@ -89,9 +92,10 @@ export default class Embed extends Node {
props: ['node', 'updateAttrs', 'options'],
data: () => ({
embedData: {},
showEmbed: true,
showOverlay: false,
linkOnly: false,
showPreviewImage: true,
showEmbed: null,
showOverlay: null,
isOnlyLink: false,
}),
async created() {
if (!this.options) return {}
@ -104,11 +108,18 @@ export default class Embed extends Node {
}),
embedHtml() {
const { html = '' } = this.embedData
if (html === '') {
this.linkOnly = true
} else {
this.linkOnly = false
if (this.embedData.html === null) {
this.isOnlyLink = true
}
if (this.showEmbed && !this.isOnlyLink) {
this.showPreviewImage = false
}
if (!this.showEmbed && this.isOnlyLink) {
this.showPreviewImage = true
}
return html
},
embedImage() {
@ -149,15 +160,6 @@ export default class Embed extends Node {
clickPreview() {
this.showOverlay = true
},
allowEmbedTemporar(xx) {
if (xx === 'openIframe') {
this.showEmbed = true
this.showOverlay = false
} else {
this.showEmbed = false
this.showOverlay = true
}
},
check(e) {
if (e.target.checked) {
this.submit(true)
@ -166,6 +168,15 @@ export default class Embed extends Node {
}
this.showOverlay = false
},
allowEmbedTemporar(xx) {
if (!this.isOnlyLink) {
this.showEmbed = true
this.showOverlay = false
} else {
this.showEmbed = false
this.showOverlay = false
}
},
async submit(allowEmbedIframes) {
try {
await this.$apollo.mutate({