field video on paragraphe source
This commit is contained in:
parent
820edbd36e
commit
a96230ebe7
@ -14,6 +14,7 @@ fragment EntiteFields on Entite {
|
||||
}
|
||||
sources {
|
||||
id
|
||||
uuid
|
||||
description
|
||||
images {
|
||||
alt
|
||||
|
||||
@ -397,7 +397,7 @@ body{
|
||||
>section{
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
>section.image{
|
||||
// >section.image{
|
||||
figure{
|
||||
// border: #333 1px solid;
|
||||
position: relative;
|
||||
@ -421,11 +421,14 @@ body{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
// }
|
||||
.sources{
|
||||
// padding-top: 1em;
|
||||
.source{
|
||||
padding-top: 0.5em;
|
||||
>section{
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
// div.date{
|
||||
// display: block;
|
||||
// font-weight: 100;
|
||||
@ -436,11 +439,20 @@ body{
|
||||
>div{
|
||||
// @include font_reponses();
|
||||
font-size: inherit;
|
||||
padding-bottom: 1em;
|
||||
// padding-bottom: 1em;
|
||||
}
|
||||
|
||||
}
|
||||
.liens{
|
||||
section.audio{
|
||||
padding:1em 0;
|
||||
label{
|
||||
padding: 0;
|
||||
}
|
||||
div.plyr__controls{
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
section.liens{
|
||||
a{
|
||||
text-decoration: underline;
|
||||
@include font_reponses();
|
||||
@ -1056,10 +1068,11 @@ body{
|
||||
}
|
||||
}
|
||||
|
||||
div.editable-image{
|
||||
div.editable-image,
|
||||
div.editable-video{
|
||||
background: #eee;
|
||||
max-width: 100%;
|
||||
div.btn{
|
||||
div.file-btn{
|
||||
border: #eee 2px solid;
|
||||
border-radius: 5px;
|
||||
margin: 1em 0 0;
|
||||
@ -1083,6 +1096,14 @@ div.editable-image{
|
||||
}
|
||||
|
||||
}
|
||||
div.video-btn{
|
||||
cursor: pointer;
|
||||
}
|
||||
div.editable-wrapper{
|
||||
padding:0.3em 0.5em;
|
||||
margin:0.5em 0;
|
||||
}
|
||||
|
||||
div.delete-btn{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -52,11 +52,11 @@ export default {
|
||||
<section v-if="entite.image.length || entite.can_update" class="image">
|
||||
<ImageEditable
|
||||
:can_update="entite.can_update"
|
||||
:image="entite.image"
|
||||
:image="entite.image[0]"
|
||||
:data="{
|
||||
entitytype: 'node',
|
||||
bundle: 'entite',
|
||||
nid: this.entite.id,
|
||||
id: this.entite.id,
|
||||
uuid: this.entite.uuid,
|
||||
field: 'field_image'
|
||||
}"
|
||||
|
||||
@ -8,12 +8,16 @@ import { UserStore } from '@stores/user'
|
||||
import ContentEditable from '@components/editable/ContentEditable.vue';
|
||||
import CheckboxEditable from '@components/editable/CheckboxEditable.vue';
|
||||
import ImageEditable from '@components/editable/ImageEditable.vue';
|
||||
import VideoEditable from '@components/editable/VideoEditable.vue';
|
||||
|
||||
export default {
|
||||
props: ['concernement', 'entite', "eid", 'source'],
|
||||
emits: ['reloadEntite'],
|
||||
data() {
|
||||
return {
|
||||
// plyr_options: {
|
||||
// controls: ['play', 'progress', 'current-time', 'mute', 'volume']
|
||||
// }
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -37,6 +41,7 @@ export default {
|
||||
ContentEditable,
|
||||
CheckboxEditable,
|
||||
ImageEditable,
|
||||
VideoEditable,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -61,33 +66,41 @@ export default {
|
||||
v-on:updated="reloadEntite" />
|
||||
</section>
|
||||
|
||||
<!-- v-if="source.images.length"
|
||||
:key="j"
|
||||
-->
|
||||
<section
|
||||
v-if="source.images.length"
|
||||
class="images">
|
||||
<figure
|
||||
v-for="(image, j) in source.images"
|
||||
:key="j">
|
||||
<figure>
|
||||
<img :src="image.url" :alt="image.alt"/>
|
||||
<figcaption>{{ image.alt }}</figcaption>
|
||||
</figure>
|
||||
</figure>
|
||||
<ImageEditable
|
||||
:can_update="entite.can_update"
|
||||
:image="source.images[0]"
|
||||
:data="{
|
||||
entitytype: 'paragraph',
|
||||
bundle: 'source',
|
||||
id: this.source.id,
|
||||
uuid: this.source.uuid,
|
||||
field: 'field_images'
|
||||
}"
|
||||
v-on:updated="reloadEntite" />
|
||||
</section>
|
||||
|
||||
<!-- v-if="source.videos.length" -->
|
||||
<section
|
||||
v-if="source.videos.length"
|
||||
class="video multiple">
|
||||
<vue-plyr
|
||||
v-for="(video,v) in source.videos"
|
||||
:key="v">
|
||||
<div class="plyr__video-embed">
|
||||
<!-- TODO fix vimeo embed url -->
|
||||
<iframe
|
||||
:src="video.url"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</vue-plyr>
|
||||
class="video">
|
||||
<VideoEditable
|
||||
:can_update="entite.can_update"
|
||||
:video="source.videos[0]"
|
||||
:data="{
|
||||
entitytype: 'paragraph',
|
||||
bundle: 'source',
|
||||
id: this.source.id,
|
||||
uuid: this.source.uuid,
|
||||
field: {
|
||||
field_name: 'field_videos',
|
||||
value: 'value'
|
||||
}
|
||||
}"
|
||||
v-on:updated="reloadEntite"/>
|
||||
</section>
|
||||
|
||||
<section
|
||||
@ -98,7 +111,7 @@ export default {
|
||||
:key="a">
|
||||
<label v-if="audio.description">{{ audio.description }}</label>
|
||||
<label v-else>{{ audio.file.filename }}</label>
|
||||
<vue-plyr>
|
||||
<vue-plyr :options="plyr_options">
|
||||
<audio>
|
||||
<source :src="audio.file.url" :type="audio.file.filemime" />
|
||||
</audio>
|
||||
|
||||
@ -202,9 +202,9 @@ export default {
|
||||
})
|
||||
},
|
||||
onMainScrolled(scrolled){
|
||||
console.log('this.$refs', this.$refs);
|
||||
// console.log('this.$refs', this.$refs);
|
||||
let cartouche_main = this.$refs.cartouche_layout.$refs.cartouche_main;
|
||||
console.log('cartouche_main', cartouche_main);
|
||||
// console.log('cartouche_main', cartouche_main);
|
||||
if(scrolled && cartouche_main.scrollHeight > 600){
|
||||
this.headerreduced = true;
|
||||
} else {
|
||||
|
||||
@ -39,12 +39,14 @@ export default {
|
||||
console.log('ContentEditable created');
|
||||
},
|
||||
mounted () {
|
||||
this.editor = new MediumEditor(this.$refs.html_editable, {
|
||||
toolbar: {
|
||||
allowMultiParagraphSelection: false,
|
||||
buttons: ['anchor'],
|
||||
}
|
||||
});
|
||||
if (this.contenteditable && this.html) {
|
||||
this.editor = new MediumEditor(this.$refs.html_editable, {
|
||||
toolbar: {
|
||||
allowMultiParagraphSelection: false,
|
||||
buttons: ['anchor'],
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
},
|
||||
@ -91,7 +93,7 @@ export default {
|
||||
this.$emit('updated');
|
||||
})
|
||||
.catch(error => {
|
||||
console.warn(`Issue with patch node ${this.data.bundle}`, error)
|
||||
console.warn(`Issue with patch ${this.data.entitytype} ${this.data.bundle}`, error)
|
||||
Promise.reject(error)
|
||||
})
|
||||
}
|
||||
@ -106,7 +108,7 @@ export default {
|
||||
v-if="!html"
|
||||
:is="tag"
|
||||
:contenteditable="contenteditable"
|
||||
:spellcheck="speelcheck"
|
||||
:spellcheck="spellcheck"
|
||||
@focusout="onContentEditableFocusOut"
|
||||
>{{ value }}</component>
|
||||
<component
|
||||
@ -116,7 +118,7 @@ export default {
|
||||
ref="html_editable"
|
||||
v-html="value"
|
||||
:contenteditable="contenteditable"
|
||||
:spellcheck="speelcheck"
|
||||
:spellcheck="spellcheck"
|
||||
@focusout="onContentEditableFocusOut"
|
||||
/>
|
||||
</template>
|
||||
@ -71,13 +71,21 @@ export default {
|
||||
|
||||
const params = {
|
||||
type: this.data.bundle,
|
||||
nid: [{"value":this.data.nid}],
|
||||
// nid: [{"value":this.data.id}],
|
||||
[this.data.field]: {value: null}
|
||||
};
|
||||
if (this.data.entitytype === 'node') {
|
||||
params.nid = [{"value":this.data.id}];
|
||||
} else {
|
||||
params.id = [{"value":this.data.id}];
|
||||
}
|
||||
|
||||
const configs = {
|
||||
headers: {'X-CSRF-Token': this.csrf_token}
|
||||
};
|
||||
REST.patch(`/node/${this.data.nid}?_format=json`, params, configs)
|
||||
|
||||
let url_base = `/${this.data.entitytype === 'node' ? '' : 'entity/'}${this.data.entitytype}`;
|
||||
REST.patch(`${url_base}/${this.data.id}?_format=json`, params, configs)
|
||||
.then(({ data }) => {
|
||||
console.log(`user REST patch node ${this.data.bundle} ${this.data.field}`, data)
|
||||
// TODO if success update the data in pinia
|
||||
@ -122,24 +130,24 @@ export default {
|
||||
<template>
|
||||
<div class="editable-image">
|
||||
<!-- with img -->
|
||||
<template v-if="image.length">
|
||||
<template v-if="image">
|
||||
<figure>
|
||||
<img :src="image[0].url" :alt="image[0].alt"/>
|
||||
<figcaption
|
||||
<img :src="image.url" :alt="image.alt"/>
|
||||
<!-- <figcaption
|
||||
:contenteditable="can_update"
|
||||
v-if="image[0].alt || can_update"
|
||||
v-if="image.alt || can_update"
|
||||
>
|
||||
{{ image[0].alt }}
|
||||
</figcaption>
|
||||
{{ image.alt }}
|
||||
</figcaption> -->
|
||||
<ContentEditable
|
||||
tag="figcaption"
|
||||
:value="image[0].alt"
|
||||
:value="image.alt"
|
||||
:contenteditable="can_update"
|
||||
:data="{
|
||||
entitytype: data.entitytype,
|
||||
bundle: data.bundle,
|
||||
nid: data.nid,
|
||||
field: {field_name: data.field, value:'alt', additional_values:{target_id:image[0].id}}
|
||||
id: data.id,
|
||||
field: {field_name: data.field, value:'alt', additional_values:{target_id:image.id}}
|
||||
}" />
|
||||
|
||||
</figure>
|
||||
@ -149,7 +157,7 @@ export default {
|
||||
</template>
|
||||
<!-- with out img -->
|
||||
<template v-else-if="can_update">
|
||||
<div @click="addImage" class="btn">
|
||||
<div @click="addImage" class="file-btn">
|
||||
<svg-icon type="mdi" :path="mdiImagePlus_path" @click="onDeleteImg" />
|
||||
<!-- <span>ajouter une image</span> -->
|
||||
</div>
|
||||
|
||||
211
src/components/editable/VideoEditable.vue
Normal file
211
src/components/editable/VideoEditable.vue
Normal file
@ -0,0 +1,211 @@
|
||||
<script>
|
||||
|
||||
import JSONAPI from '@api/json-axios'
|
||||
import REST from '@api/rest-axios'
|
||||
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import { ConcernementsStore } from '@stores/concernements'
|
||||
import { UserStore } from '@stores/user'
|
||||
|
||||
import ContentEditable from '@components/editable/ContentEditable.vue';
|
||||
|
||||
import SvgIcon from '@jamescoyle/vue-icon';
|
||||
import { mdiTrashCanOutline } from '@mdi/js';
|
||||
import { mdiMovieOpenPlusOutline } from '@mdi/js';
|
||||
|
||||
|
||||
export default {
|
||||
props: {
|
||||
can_update: Boolean,
|
||||
video: Object,
|
||||
data: Object
|
||||
},
|
||||
emits: ['updated'],
|
||||
data(){
|
||||
return {
|
||||
mdiTrashCanOutline_path: mdiTrashCanOutline,
|
||||
mdiMovieOpenPlusOutline_path: mdiMovieOpenPlusOutline,
|
||||
plyr_options: {
|
||||
controls: ['play', 'progress', 'current-time', 'mute', 'volume']
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(UserStore,['csrf_token']),
|
||||
},
|
||||
created () {
|
||||
console.log('VideoEditable created');
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
...mapActions(ConcernementsStore, ['reloadConcernements']),
|
||||
// addImage(e){
|
||||
// console.log('addImage', this.$refs);
|
||||
// this.$refs.image_input.click();
|
||||
// },
|
||||
onSaveVideoLink(e){
|
||||
console.log('onSaveVideoLink', e);
|
||||
let url = this.$refs.video_link_input.innerText;
|
||||
console.log('onSaveVideoLink url', url);
|
||||
this.save(url);
|
||||
},
|
||||
save(content){
|
||||
// console.log('save csrf_token', this.csrf_token);
|
||||
const params = {
|
||||
type: this.data.bundle,
|
||||
[this.data.field.field_name]: [{[this.data.field.value]: content}]
|
||||
};
|
||||
if (this.data.entitytype === 'node') {
|
||||
params.nid = [{"value":this.data.id}];
|
||||
} else {
|
||||
params.id = [{"value":this.data.id}];
|
||||
}
|
||||
// we need additional values for image alt for example
|
||||
// console.log('additional_values', this.data.field.additional_values);
|
||||
if (this.data.field.additional_values) {
|
||||
for (const key in this.data.field.additional_values) {
|
||||
if (Object.hasOwnProperty.call(this.data.field.additional_values, key)) {
|
||||
params[this.data.field.field_name][0][key] = this.data.field.additional_values[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const configs = {
|
||||
headers: {'X-CSRF-Token': this.csrf_token}
|
||||
};
|
||||
|
||||
let url_base = `/${this.data.entitytype === 'node' ? '' : 'entity/'}${this.data.entitytype}`;
|
||||
REST.patch(`${url_base}/${this.data.id}?_format=json`, params, configs)
|
||||
.then(({ data }) => {
|
||||
console.log('user REST post node data', data)
|
||||
// TODO if success update the data in pinia
|
||||
// this.reloadConcernements();
|
||||
this.$emit('updated');
|
||||
})
|
||||
.catch(error => {
|
||||
console.warn(`Issue with patch ${this.data.entitytype} ${this.data.bundle}`, error)
|
||||
Promise.reject(error)
|
||||
})
|
||||
},
|
||||
onDeleteVideo(e){
|
||||
console.log('onDeleteVideo', e);
|
||||
|
||||
const params = {
|
||||
type: this.data.bundle,
|
||||
// nid: [{"value":this.data.id}],
|
||||
[this.data.field.field_name]: {[this.data.field.value]: null}
|
||||
};
|
||||
if (this.data.entitytype === 'node') {
|
||||
params.nid = [{"value":this.data.id}];
|
||||
} else {
|
||||
params.id = [{"value":this.data.id}];
|
||||
}
|
||||
|
||||
const configs = {
|
||||
headers: {'X-CSRF-Token': this.csrf_token}
|
||||
};
|
||||
|
||||
let url_base = `/${this.data.entitytype === 'node' ? '' : 'entity/'}${this.data.entitytype}`;
|
||||
REST.patch(`${url_base}/${this.data.id}?_format=json`, params, configs)
|
||||
.then(({ data }) => {
|
||||
console.log(`user REST patch node ${this.data.bundle} ${this.data.field}`, data)
|
||||
this.$emit('updated');
|
||||
})
|
||||
.catch(error => {
|
||||
console.warn(`Issue with patch node ${this.data.bundle} ${this.data.field}`, error)
|
||||
Promise.reject(error)
|
||||
})
|
||||
|
||||
// 405 JSONAPI operation not allowed, don't know why
|
||||
|
||||
// const configs = {
|
||||
// headers: {
|
||||
// 'X-CSRF-Token': this.csrf_token,
|
||||
// 'Content-Type': 'application/octet-stream',
|
||||
// 'Content-Disposition': `file; filename=""`,
|
||||
// },
|
||||
// };
|
||||
|
||||
// JSONAPI.delete(`/${this.data.entitytype}/${this.data.bundle}/${this.data.uuid}/${this.data.field}`, {}, configs)
|
||||
// .then(({ data : { data } }) => {
|
||||
// console.log('jsonapi delete image', data)
|
||||
// this.$emit('updated');
|
||||
// })
|
||||
// .catch(error => {
|
||||
// console.warn('Issue with jsonapi post image', error)
|
||||
// Promise.reject(error)
|
||||
// })
|
||||
// console.log('save csrf_token', this.csrf_token);
|
||||
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SvgIcon,
|
||||
ContentEditable
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="editable-video">
|
||||
<!-- with video -->
|
||||
<template v-if="video">
|
||||
<!-- v-for="(video,v) in source.videos"
|
||||
:key="v" -->
|
||||
<vue-plyr
|
||||
>
|
||||
<div class="plyr__video-embed">
|
||||
<!-- TODO fix vimeo embed url -->
|
||||
<iframe
|
||||
:src="video.url"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</vue-plyr>
|
||||
<div v-if="can_update" @click="onDeleteVideo" class="delete-btn">
|
||||
<svg-icon type="mdi" :path="mdiTrashCanOutline_path" />
|
||||
</div>
|
||||
</template>
|
||||
<!-- with out video -->
|
||||
<template v-else-if="can_update">
|
||||
<!-- <input ref="videolink_input" type="text" @input="onInput"> -->
|
||||
<div class="editable-wrapper">
|
||||
<div
|
||||
ref="video_link_input"
|
||||
:contenteditable="can_update"
|
||||
:spellcheck="spellcheck"
|
||||
data-placeholder="coller un lien de video" />
|
||||
<!-- @focusout="onVideoInputFocusOut" -->
|
||||
<svg-icon class="video-btn" type="mdi" :path="mdiMovieOpenPlusOutline_path" @click="onSaveVideoLink"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.editable-wrapper{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
}
|
||||
[contenteditable] {
|
||||
flex: auto 1 0;
|
||||
/* display: inline-block; */
|
||||
/* padding:12px; */
|
||||
/* background:red; */
|
||||
/* min-height: 1em; */
|
||||
}
|
||||
[data-placeholder]:empty:before{
|
||||
content: attr(data-placeholder);
|
||||
color: #888;
|
||||
font-style: italic;
|
||||
}
|
||||
svg{
|
||||
/* display: inline-block; */
|
||||
flex: auto 0 0;
|
||||
}
|
||||
</style>
|
||||
@ -26,7 +26,7 @@ export default {
|
||||
mounted () {
|
||||
// console.log('cartouche layout mounted', this);
|
||||
this.$refs.cartouche_main.addEventListener('scroll', (event) => {
|
||||
console.log('main is scrolling', event);
|
||||
// console.log('main is scrolling', event);
|
||||
let $main = event.target;
|
||||
let scrolled = $main.scrollTop > 0;
|
||||
this.$emit('main_scrolled', scrolled);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user