break two

webapp/components/Editor/Editor.story.js

@@ -5,8 +5,12 @@ import helpers from '~/storybook/helpers'
 import Vue from 'vue'
 
 const embed = {
+  image: 'https://i.ytimg.com/vi/ptCcgLM-p8k/maxresdefault_live.jpg',
+  title: 'Video Titel',
+  // html: null,
+  description: 'Video Description',
   html:
-    '<iframe width="480" height="270" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
+    '<iframe width="auto" height="250" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
 }
 
 const plugins = [
@@ -114,15 +118,12 @@ storiesOf('Editor', module)
     }),
     template: `<hc-editor :users="users" :value="content" />`,
   }))
-  .add('Embeds', () => ({
+  .add('Embeds with iframe', () => ({
     components: { HcEditor },
     store: helpers.store,
     data: () => ({
       users,
       content: `
-        <p>
-          The following link should render a youtube video in addition to the link.
-        </p>
         <a class="embed" href="https://www.youtube.com/watch?v=qkdXAtO40Fo">
           <em>https://www.youtube.com/watch?v=qkdXAtO40Fo</em>
         </a>
@@ -130,3 +131,16 @@ storiesOf('Editor', module)
     }),
     template: `<hc-editor :users="users" :value="content" />`,
   }))
+  .add('Embeds with plain link', () => ({
+    components: { HcEditor },
+    store: helpers.store,
+    data: () => ({
+      users,
+      content: `
+       <a class="embed" href="https://telegram.org/">
+         <em>https://telegram.org/</em>
+       </a>
+      `,
+    }),
+    template: `<hc-editor :users="users" :value="content" />`,
+  }))

webapp/components/Editor/nodes/Embed.js

@@ -5,67 +5,38 @@ import { mapGetters, mapMutations } from 'vuex'
 import { allowEmbedIframesMutation } from '~/graphql/User.js'
 
 const template = `
-  <a class="embed" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank">
+  
-    <div v-if="embedHtml" v-html="embedHtml" />
+    <a  class="embed" :href="dataEmbedUrl" style="cursor: none">
-    <em> {{ dataEmbedUrl }} </em>
+      <ds-container width="medium">
-  </a>
+        <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>      
-const templateVideoPreview = `
+          <ds-text v-if="!currentUser.allowEmbedIframes" size="small" align="right" color="softer">
-<div>
+            automatisches Einbinden <b>zulassen?</b> | 
- 
+          </ds-text>
-  <ds-container width="small">
+          <ds-text v-else size="small" align="right" color="softer">
-    <ds-placeholder>
+            automatisches Einbinden <b>zugelassen</b> | 
-      <div style="font-size: 1em"><span style="color:#17b53f">{{embedPublisher}}</span> - <b>@{{ embedAuthor }}</b> </div>
+          </ds-text>   
-      <ds-icon
+          <input type="checkbox" v-model="currentUser.allowEmbedIframes"  @click.prevent="check($event)">  
-        name="play-circle"
-        v-if="!showEmbed"
-        style="
-          position: absolute;
-          font-size: 4em; 
-          color:#17b53f;
-          border-radius: 67px;
-          background-color: cornsilk;
-          margin: 80px;
-          opacity: 0.9;
-          z-index: 1"
-      />
-      <div style="height:270px">
-        <ds-section secondary v-if="showOverlay"  style="height: 270px;width:100%;position:absolute;z-index:1">
-          <ds-placeholder>
-            Deine Daten sind noch nicht weitergegeben. Wenn Du die das jetzt ansiehst dann werden auch Daten mit dem Anbieter ausgetauscht!
-            <ds-button @click="setConfirm">dauerhaft speichern</ds-button>
-            <ds-button size="x-large" @click="allowEmbedTemporar('openIframe', embedHtml)" >jetzt ansehen</ds-button>           
-          </ds-placeholder>
         </ds-section>
-        <ds-section primary v-if="showchangeEmbedStatus"  style="height: 270px;width:100%;position:absolute;z-index:1">
+        <p v-if="!showEmbed" style="cursor: pointer" >
-          <ds-placeholder>
+          <img :src="embedImage" alt="dataEmbedUrl"  @click.prevent="clickPreview" height="270" width="auto" />
-            Deine Daten sind noch nicht weitergegeben. Wenn Du die das jetzt ansiehst dann werden auch Daten mit dem Anbieter ausgetauscht!
+        <div v-else v-html="embedHtml" />
-            <ds-button v-if="!this.currentUser.allowEmbedIframes" @click="setConfirm">dauerhaft speichern</ds-button>
+        <p style="color:black">
-            <ds-button v-if="this.currentUser.allowEmbedIframes" size="x-large" @click="setCancel" >abstellen</ds-button>         
+        <div style="font-size: 1.5em">{{ embedTitle }}</div>
-          </ds-placeholder>
+        <div style="font-size: 1em">{{ embedDescription }}</div>
-        </ds-section>
+        <a  class="embed" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank"  >
-        <img v-if="!showEmbed"  :src="embedImage" @click="clickPreview"  height="270" width="auto" style="position:absolute" />             
+          <em> {{ dataEmbedUrl }} </em>
-        <div v-if="showEmbed" v-html="embedHtml" />        
+        </a>
-      </div>      
+      </ds-container>
-      <div style="font-size: 1.5em">{{ embedTitle }}</div>
+    </a>
-      <div style="font-size: 1em">{{ embedDescription }}</div>
-      <div style="font-size: 1em"><a  :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank" ><em> {{ dataEmbedUrl }} </em></a></div>
-      <ds-text v-if="!currentUser.allowEmbedIframes" size="small" align="right" color="softer">
-      automatisches Einbinden <b>abgestellt</b> | <a href="#" @click="modalOpen">ändern</a></ds-text>
-      <ds-text v-else size="small" align="right" color="softer">
-      automatisches Einbinden <b>zugelassen</b> | <a href="#" @click="modalOpen">ändern</a></ds-text>
-    </ds-placeholder>
-  </ds-container>
-</div>
 `
 
 const compiledTemplate = compileToFunctions(template)
-const compiledTemplateVideoPreview = compileToFunctions(templateVideoPreview)
 
 export default class Embed extends Node {
   get name() {
-    return 'embed'
+    return 'embedUrl'
   }
 
   get defaultOptions() {
@@ -120,10 +91,6 @@ export default class Embed extends Node {
         embedData: {},
         showEmbed: true,
         showOverlay: false,
-        embedcode: null,
-        isOpen: false,
-        showchangeEmbedStatus: false,
-        // allowEmbedIframes: this.currentUser.allowEmbedIframes
       }),
       async created() {
         if (!this.options) return {}
@@ -134,9 +101,6 @@ export default class Embed extends Node {
         ...mapGetters({
           currentUser: 'auth/user',
         }),
-        embedClass() {
-          return this.embedHtml ? 'embed' : ''
-        },
         embedHtml() {
           const { html = '' } = this.embedData
           return html
@@ -176,32 +140,26 @@ export default class Embed extends Node {
         ...mapMutations({
           setCurrentUser: 'auth/SET_USER',
         }),
-        clickPreview: function(xx, html) {
+        clickPreview() {
           this.showOverlay = true
         },
-        allowEmbedTemporar: function(xx, html) {
+        allowEmbedTemporar(xx) {
           if (xx === 'openIframe') {
-            this.embedcode = html
             this.showEmbed = true
+            this.showOverlay = false
           } else {
-            this.embedcode = null
             this.showEmbed = false
+            this.showOverlay = true
+          }
+        },
+        check(e) {
+          if (e.target.checked) {
+            this.submit(true)
+          } else {
+            this.submit(false)
           }
           this.showOverlay = false
         },
-        modalOpen: function() {
-          this.showOverlay = false
-          this.showchangeEmbedStatus = true
-        },
-        setConfirm: function() {
-          this.submit(true)
-          this.showOverlay = false
-          this.showchangeEmbedStatus = false
-        },
-        setCancel: function() {
-          this.submit(false)
-          this.showchangeEmbedStatus = false
-        },
         async submit(allowEmbedIframes) {
           try {
             await this.$apollo.mutate({
@@ -226,9 +184,7 @@ export default class Embed extends Node {
         },
       },
       render(createElement) {
-        if (this.embedHtml !== '')
+        return compiledTemplate.render.call(this, createElement)
-          return compiledTemplateVideoPreview.render.call(this, createElement)
-        if (this.embedHtml === '') return compiledTemplate.render.call(this, createElement)
       },
     }
   }

webapp/components/Editor/plugins/eventHandler.js

@@ -10,7 +10,6 @@ export default class EventHandler extends Extension {
       new Plugin({
         props: {
           transformPastedText(text) {
-            // console.log('#### transformPastedText', text)
             return text.trim()
           },
           transformPastedHTML(html) {
@@ -33,7 +32,6 @@ export default class EventHandler extends Extension {
               .replace(/<p>(\s*<br ?\/?>\s*)+/gim, '<p>')
               // remove additional linebreaks when last child inside p tags
               .replace(/(\s*<br ?\/?>\s*)+<\/p>/gim, '</p>')
-            // console.log('#### transformPastedHTML', html)
             return html
           },
           // transformPasted(slice) {

webapp/package.json

@@ -129,4 +129,4 @@
     "vue-svg-loader": "~0.12.0",
     "vue-template-compiler": "^2.6.10"
   }
-}
+}