IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

toggle preview image with showEmbed

Browse Source
This commit is contained in:
Alina Beck 2019-10-02 16:55:30 +02:00
parent c46c13dbdf
commit 8c78fef457
2 changed files with 7 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/components/Editor/Editor.vue
View File

@ -356,7 +356,6 @@ li > p {
.embed-content { .embed-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
cursor: pointer;
h4 { h4 {
margin: $space-small 0 0 $space-small; margin: $space-small 0 0 $space-small;
@ -372,6 +371,7 @@ li > p {
.embed-preview-image { .embed-preview-image {
width: 100%; width: 100%;
height: auto; height: auto;
cursor: pointer;
} }
.embed-html { .embed-html {

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

@ -6,9 +6,9 @@ import { allowEmbedIframesMutation } from '~/graphql/User.js'
const template = ` const template = `
<ds-container width="small" class="embed-container"> <ds-container width="small" class="embed-container">
<section @click.prevent="openOverlay()" class="embed-content"> <section class="embed-content">
<div v-if="!showPreviewImage" v-html="embedHtml" class="embed-html" /> <div v-if="showEmbed" v-html="embedHtml" class="embed-html" />
<img v-else :src="embedImage" class="embed-preview-image" /> <img v-else :src="embedImage" class="embed-preview-image" @click.prevent="openOverlay()" />
<h4>{{embedTitle}}</h4> <h4>{{embedTitle}}</h4>
<p>{{embedDescription}}</p> <p>{{embedDescription}}</p>
<a class="embed" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank">{{dataEmbedUrl}}</a> <a class="embed" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank">{{dataEmbedUrl}}</a>
@ -17,7 +17,7 @@ const template = `
<h3>Achte auf deine Daten!</h3> <h3>Achte auf deine Daten!</h3>
<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>Deine Daten sind noch nicht weitergegeben. Wenn Du die das jetzt ansiehst dann werden auch Daten mit dem Anbieter ({{embedPublisher}}) ausgetauscht!</ds-text>
<div class="embed-buttons"> <div class="embed-buttons">
<ds-button primary @click.prevent="allowEmbedTemporar('openIframe')">jetzt ansehen</ds-button> <ds-button primary @click.prevent="allowEmbedTemporarily()">jetzt ansehen</ds-button>
<ds-button ghost @click.prevent="closeOverlay()">Abbrechen</ds-button> <ds-button ghost @click.prevent="closeOverlay()">Abbrechen</ds-button>
</div> </div>
<label class="embed-checkbox"> <label class="embed-checkbox">
@ -85,10 +85,8 @@ export default class Embed extends Node {
props: ['node', 'updateAttrs', 'options'], props: ['node', 'updateAttrs', 'options'],
data: () => ({ data: () => ({
embedData: {}, embedData: {},
showPreviewImage: true,
showEmbed: null, showEmbed: null,
showOverlay: false, showOverlay: false,
isOnlyLink: false,
}), }),
async created() { async created() {
if (!this.options) return {} if (!this.options) return {}
@ -101,18 +99,6 @@ export default class Embed extends Node {
}), }),
embedHtml() { embedHtml() {
const { html = '' } = this.embedData 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 return html
}, },
embedImage() { embedImage() {
@ -163,12 +149,8 @@ export default class Embed extends Node {
this.submit(false) this.submit(false)
} }
}, },
allowEmbedTemporar(xx) { allowEmbedTemporarily() {
if (!this.isOnlyLink) {
this.showEmbed = true this.showEmbed = true
} else {
this.showEmbed = false
}
this.closeOverlay() this.closeOverlay()
}, },
async submit(allowEmbedIframes) { async submit(allowEmbedIframes) {