ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

toggle overlay with methods

Browse Source
This commit is contained in:
Alina Beck 2019-10-02 16:37:52 +02:00
parent 99629991d0
commit c46c13dbdf
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -374,6 +374,14 @@ li > p {
height: auto; height: auto;
} }
.embed-html {
width: 100%;
iframe {
width: 100%;
}
}
.embed-overlay { .embed-overlay {
position: absolute; position: absolute;
top: 0; top: 0;

18
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="clickPreview" class="embed-content"> <section @click.prevent="openOverlay()" class="embed-content">
<img v-show="showPreviewImage" :src="embedImage" class="embed-preview-image" /> <div v-if="!showPreviewImage" v-html="embedHtml" class="embed-html" />
<div v-show="!showPreviewImage" v-html="embedHtml" /> <img v-else :src="embedImage" class="embed-preview-image" />
<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>
@ -18,7 +18,7 @@ const template = `
<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="allowEmbedTemporar('openIframe')">jetzt ansehen</ds-button>
<ds-button ghost @click.prevent="showOverlay = false">Abbrechen</ds-button> <ds-button ghost @click.prevent="closeOverlay()">Abbrechen</ds-button>
</div> </div>
<label class="embed-checkbox"> <label class="embed-checkbox">
<input type="checkbox" v-model="currentUser.allowEmbedIframes" @click.prevent="check($event)" /> <input type="checkbox" v-model="currentUser.allowEmbedIframes" @click.prevent="check($event)" />
@ -87,7 +87,7 @@ export default class Embed extends Node {
embedData: {}, embedData: {},
showPreviewImage: true, showPreviewImage: true,
showEmbed: null, showEmbed: null,
showOverlay: null, showOverlay: false,
isOnlyLink: false, isOnlyLink: false,
}), }),
async created() { async created() {
@ -150,9 +150,12 @@ export default class Embed extends Node {
...mapMutations({ ...mapMutations({
setCurrentUser: 'auth/SET_USER', setCurrentUser: 'auth/SET_USER',
}), }),
clickPreview() { openOverlay() {
this.showOverlay = true this.showOverlay = true
}, },
closeOverlay() {
this.showOverlay = false
},
check(e) { check(e) {
if (e.target.checked) { if (e.target.checked) {
this.submit(true) this.submit(true)
@ -163,11 +166,10 @@ export default class Embed extends Node {
allowEmbedTemporar(xx) { allowEmbedTemporar(xx) {
if (!this.isOnlyLink) { if (!this.isOnlyLink) {
this.showEmbed = true this.showEmbed = true
this.showOverlay = false
} else { } else {
this.showEmbed = false this.showEmbed = false
this.showOverlay = false
} }
this.closeOverlay()
}, },
async submit(allowEmbedIframes) { async submit(allowEmbedIframes) {
try { try {