mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
break two
This commit is contained in:
ogerly
parent
e8f771b59a
commit
27121a1077
@ -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" />`,
|
||||
}))
|
||||
|
||||
@ -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" />
|
||||
<em> {{ dataEmbedUrl }} </em>
|
||||
</a>
|
||||
`
|
||||
|
||||
const templateVideoPreview = `
|
||||
<div>
|
||||
|
||||
<ds-container width="small">
|
||||
<ds-placeholder>
|
||||
<div style="font-size: 1em"><span style="color:#17b53f">{{embedPublisher}}</span> - <b>@{{ embedAuthor }}</b> </div>
|
||||
<ds-icon
|
||||
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>
|
||||
|
||||
<a class="embed" :href="dataEmbedUrl" style="cursor: none">
|
||||
<ds-container width="medium">
|
||||
<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>
|
||||
<ds-text v-if="!currentUser.allowEmbedIframes" size="small" align="right" color="softer">
|
||||
automatisches Einbinden <b>zulassen?</b> |
|
||||
</ds-text>
|
||||
<ds-text v-else size="small" align="right" color="softer">
|
||||
automatisches Einbinden <b>zugelassen</b> |
|
||||
</ds-text>
|
||||
<input type="checkbox" v-model="currentUser.allowEmbedIframes" @click.prevent="check($event)">
|
||||
</ds-section>
|
||||
<ds-section primary v-if="showchangeEmbedStatus" 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 v-if="!this.currentUser.allowEmbedIframes" @click="setConfirm">dauerhaft speichern</ds-button>
|
||||
<ds-button v-if="this.currentUser.allowEmbedIframes" size="x-large" @click="setCancel" >abstellen</ds-button>
|
||||
</ds-placeholder>
|
||||
</ds-section>
|
||||
<img v-if="!showEmbed" :src="embedImage" @click="clickPreview" height="270" width="auto" style="position:absolute" />
|
||||
<div v-if="showEmbed" v-html="embedHtml" />
|
||||
</div>
|
||||
<div style="font-size: 1.5em">{{ embedTitle }}</div>
|
||||
<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>
|
||||
<p v-if="!showEmbed" style="cursor: pointer" >
|
||||
<img :src="embedImage" alt="dataEmbedUrl" @click.prevent="clickPreview" height="270" width="auto" />
|
||||
<div v-else v-html="embedHtml" />
|
||||
<p style="color:black">
|
||||
<div style="font-size: 1.5em">{{ embedTitle }}</div>
|
||||
<div style="font-size: 1em">{{ embedDescription }}</div>
|
||||
<a class="embed" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank" >
|
||||
<em> {{ dataEmbedUrl }} </em>
|
||||
</a>
|
||||
</ds-container>
|
||||
</a>
|
||||
`
|
||||
|
||||
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 compiledTemplateVideoPreview.render.call(this, createElement)
|
||||
if (this.embedHtml === '') return compiledTemplate.render.call(this, createElement)
|
||||
return compiledTemplate.render.call(this, createElement)
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -129,4 +129,4 @@
|
||||
"vue-svg-loader": "~0.12.0",
|
||||
"vue-template-compiler": "^2.6.10"
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user