diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue index 8d3ce281b..6ab4a0db6 100644 --- a/webapp/components/Editor/Editor.vue +++ b/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); +} diff --git a/webapp/components/Editor/nodes/Embed.js b/webapp/components/Editor/nodes/Embed.js index b2a8ffec8..f508589ba 100644 --- a/webapp/components/Editor/nodes/Embed.js +++ b/webapp/components/Editor/nodes/Embed.js @@ -4,32 +4,33 @@ import { compileToFunctions } from 'vue-template-compiler' import { mapGetters, mapMutations } from 'vuex' import { allowEmbedIframesMutation } from '~/graphql/User.js' -const template = ` - - - Deine Daten sind noch nicht weitergegeben. Wenn Du die das jetzt ansiehst dann werden auch Daten mit dem Anbieter ({{embedPublisher}}) ausgetauscht! - Du verlässt jetzt Human Connection! Du wirst zu ({{embedPublisher}}) weitergeleitet! - jetzt ansehen - Webseite aufrufen -

- - - automatisches Einbinden zulassen? | - - - automatisches Einbinden zugelassen | - -

- - dataEmbedUrl -
-

-

{{ embedTitle }}
-
{{ embedDescription }}
- - {{ dataEmbedUrl }} - - +const template = ` + {{dataEmbedUrl}} + +
+
+ +

{{embedTitle}}

+

{{embedDescription}}

+ {{dataEmbedUrl}} +
+ + +
` const compiledTemplate = compileToFunctions(template) @@ -89,16 +90,17 @@ export default class Embed extends Node { props: ['node', 'updateAttrs', 'options'], data: () => ({ embedData: {}, - showPreviewImage: true, - showEmbed: null, - showOverlay: null, - isOnlyLink: false, - findimg: null, + checkedAlwaysAllowEmbeds: false, + showEmbed: false, + showOverlay: false, + removeEmbeds: false, }), async created() { - if (!this.options) return {} - this.embedData = await this.options.onEmbed({ url: this.dataEmbedUrl }) - this.showEmbed = this.currentUser.allowEmbedIframes + 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) { - if (e.target.checked) { - this.submit(true) - } else { - this.submit(false) - } + closeOverlay() { this.showOverlay = false }, - allowEmbedTemporar(xx) { - if (!this.isOnlyLink) { - this.showEmbed = true - this.showOverlay = false - } else { - this.showEmbed = false - this.showOverlay = false + allowEmbed() { + this.showEmbed = true + this.closeOverlay() + + if (this.checkedAlwaysAllowEmbeds !== this.currentUser.allowEmbedIframes) { + 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(),