Template changed for removeEmbed() function

webapp/components/Editor/Editor.vue

@@ -342,4 +342,78 @@ li > p {
     margin: 0 0 $space-x-small;
   }
 }
+
+.embed-container {
+  position: relative;
+  padding: 0;
+  margin: $space-small auto;
+  overflow: hidden;
+  border-radius: $border-radius-base;
+  border: 1px solid $color-neutral-70;
+  background-color: $color-neutral-90;
+}
+
+.embed-content {
+  width: 100%;
+  height: 100%;
+
+  h4 {
+    margin: $space-small 0 0 $space-small;
+  }
+
+  p,
+  a {
+    display: block;
+    margin: 0 0 0 $space-small;
+  }
+}
+
+.embed-preview-image {
+  width: 100%;
+  height: auto;
+}
+
+.embed-preview-image--clickable {
+  cursor: pointer;
+}
+
+.embed-html {
+  width: 100%;
+
+  iframe {
+    width: 100%;
+  }
+}
+
+.embed-overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  padding: $space-large;
+  background-color: $color-neutral-100;
+}
+
+.embed-buttons {
+  button {
+    margin-right: $space-small;
+  }
+}
+
+.embed-checkbox {
+  display: flex;
+
+  input {
+    margin-right: $space-small;
+  }
+}
+
+.embed-close-button {
+  position: absolute;
+  top: $space-x-small;
+  right: $space-x-small;
+  background-color: rgba(250, 249, 250, 0.6);
+}
 </style>

webapp/components/Editor/nodes/Embed.js

@@ -5,31 +5,32 @@ import { mapGetters, mapMutations } from 'vuex'
 import { allowEmbedIframesMutation } from '~/graphql/User.js'
 
 const template = ` 
-    <a  class="embed" href="" style="cursor: none"> 
+  <a v-if="removeEmbeds" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank">{{dataEmbedUrl}}</a>  
-        <ds-section secondary v-if="showOverlay"  style="height: 270px;width:80%;position:absolute;z-index:3">
+  <ds-container v-else width="small" class="embed-container">
-          <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>
+    <section class="embed-content">
-          <ds-text v-else >Du verlässt jetzt Human Connection! Du wirst zu ({{embedPublisher}}) weitergeleitet!</ds-text>
+      <div v-if="showEmbed" v-html="embedHtml" class="embed-html" />
-          <ds-button v-if="!isOnlyLink" size="x-large" @click.prevent="allowEmbedTemporar('openIframe')" >jetzt ansehen</ds-button>
+      <template v-else>
-          <ds-button  v-else size="x-large" > <a :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank" >Webseite aufrufen   </a>  </ds-button>
+        <img v-if="embedHtml && embedImage" :src="embedImage" class="embed-preview-image embed-preview-image--clickable" @click.prevent="openOverlay()" />
-          <p v-show="!isOnlyLink">      
+        <img v-else-if="embedImage" :src="embedImage" class="embed-preview-image" />
-          <input type="checkbox" v-model="currentUser.allowEmbedIframes" @click.prevent="check($event)" id="dataEmbedUrl" />      
+      </template>
-            <lable v-if="!currentUser.allowEmbedIframes" for="dataEmbedUrl" size="small">
+      <h4 v-if="embedTitle">{{embedTitle}}</h4>
-              automatisches Einbinden <b>zulassen?</b> |
+      <p v-if="embedDescription">{{embedDescription}}</p>
-            </lable>
+      <a class="embed" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank">{{dataEmbedUrl}}</a>
-            <lable v-else size="small" for="dataEmbedUrl" >
+    </section>   
-              automatisches Einbinden <b>zugelassen</b> |
+    <aside v-if="showOverlay" class="embed-overlay">
-            </lable>
+      <h3>Achte auf deine Daten!</h3>
-          </p>
+      <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-section>
+      <div class="embed-buttons">
-        <img  v-show="showPreviewImage" style="cursor: pointer"  :src="embedImage" alt="dataEmbedUrl"  @click.prevent="clickPreview" height="270" width="auto" />
+      <ds-button primary @click.prevent="allowEmbed()">jetzt ansehen</ds-button>
-         <div v-show="!showPreviewImage" v-html="embedHtml" />
+      <ds-button ghost @click.prevent="closeOverlay()">Abbrechen</ds-button>
-        <p style="color:black">
+      </div>
-        <div>{{ embedTitle }}</div>
+      <label class="embed-checkbox">
-        <div>{{ embedDescription }}</div>
+        <input type="checkbox" v-model="checkedAlwaysAllowEmbeds" />
-        <a @click.prevent="clickPreview" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank"  >
+        <span>Inhalte von Drittanbietern immer zulassen</span>
-          <em> {{ dataEmbedUrl }} </em>
+      </label>
-        </a>      
+    </aside>
-    </a>
+    <ds-button icon="close" ghost size="small" class="embed-close-button" @click.prevent="removeEmbed()" />
+  </ds-container> 
 `
 
 const compiledTemplate = compileToFunctions(template)
@@ -89,16 +90,17 @@ export default class Embed extends Node {
       props: ['node', 'updateAttrs', 'options'],
       data: () => ({
         embedData: {},
-        showPreviewImage: true,
+        checkedAlwaysAllowEmbeds: false,
-        showEmbed: null,
+        showEmbed: false,
-        showOverlay: null,
+        showOverlay: false,
-        isOnlyLink: false,
+        removeEmbeds: false,
-        findimg: null,
       }),
       async created() {
-        if (!this.options) return {}
+        if (this.options) {
           this.embedData = await this.options.onEmbed({ url: this.dataEmbedUrl })
           this.showEmbed = this.currentUser.allowEmbedIframes
+          this.checkedAlwaysAllowEmbeds = this.currentUser.allowEmbedIframes
+        }
       },
       computed: {
         ...mapGetters({
@@ -106,18 +108,6 @@ export default class Embed extends Node {
         }),
         embedHtml() {
           const { html = '' } = this.embedData
-          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() {
@@ -155,27 +145,26 @@ export default class Embed extends Node {
         ...mapMutations({
           setCurrentUser: 'auth/SET_USER',
         }),
-        clickPreview() {
+        openOverlay() {
           this.showOverlay = true
         },
-        check(e) {
+        closeOverlay() {
-          if (e.target.checked) {
-            this.submit(true)
-          } else {
-            this.submit(false)
-          }
           this.showOverlay = false
         },
-        allowEmbedTemporar(xx) {
+        allowEmbed() {
-          if (!this.isOnlyLink) {
           this.showEmbed = true
-            this.showOverlay = false
+          this.closeOverlay()
-          } else {
+
-            this.showEmbed = false
+          if (this.checkedAlwaysAllowEmbeds !== this.currentUser.allowEmbedIframes) {
-            this.showOverlay = false
+            this.updateEmbedSettings(this.checkedAlwaysAllowEmbeds)
           }
         },
-        async submit(allowEmbedIframes) {
+        removeEmbed() {
+          // TODO: replace the whole Embed with a proper Link node
+          console.log('I want to be a Link!')
+          this.removeEmbeds = true
+        },
+        async updateEmbedSettings(allowEmbedIframes) {
           try {
             await this.$apollo.mutate({
               mutation: allowEmbedIframesMutation(),