logic ok

webapp/components/Editor/nodes/Embed.js

@@ -4,28 +4,31 @@ import { compileToFunctions } from 'vue-template-compiler'
 import { mapGetters, mapMutations } from 'vuex'
 import { allowEmbedIframesMutation } from '~/graphql/User.js'
 
-const template = `
-  
-    <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">
-            automatisches Einbinden <b>zulassen?</b> | 
-          </ds-text>
-          <ds-text v-else size="small" align="right" color="softer">
-            automatisches Einbinden <b>zugelassen</b> | 
-          </ds-text>   
-          <input type="checkbox" v-model="currentUser.allowEmbedIframes"  @click.prevent="check($event)">  
+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" />
+      
+            <lable v-if="!currentUser.allowEmbedIframes" for="dataEmbedUrl" size="small">
+              automatisches Einbinden <b>zulassen?</b> |
+            </lable>
+            <lable v-else size="small" for="dataEmbedUrl" >
+              automatisches Einbinden <b>zugelassen</b> |
+            </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({