ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

logic ok

Browse Source
This commit is contained in:
ogerly 2019-10-01 11:00:14 +02:00
parent 63d5140420
commit 17323aeb25
1 changed files with 47 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
webapp/components/Editor/nodes/Embed.js
View File

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