made blabla article lightbox display for video and images
This commit is contained in:
parent
b32e609538
commit
f69853bb46
|
@ -9190,6 +9190,14 @@
|
||||||
"@babel/runtime": "^7.4.5"
|
"@babel/runtime": "^7.4.5"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"vue-cool-lightbox": {
|
||||||
|
"version": "1.0.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-cool-lightbox/-/vue-cool-lightbox-1.0.11.tgz",
|
||||||
|
"integrity": "sha512-S/PFFotWS5TI8Ia6chPDo0ZfMMlvd3zCL7punJ3GpB9k2xu+vwEkU483H1LnialHJVBjEjRx4v6VwKWa0vfXmg==",
|
||||||
|
"requires": {
|
||||||
|
"vue": "^2.6.10"
|
||||||
|
}
|
||||||
|
},
|
||||||
"vue-eslint-parser": {
|
"vue-eslint-parser": {
|
||||||
"version": "5.0.0",
|
"version": "5.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",
|
||||||
|
|
|
@ -21,6 +21,7 @@
|
||||||
"axios": "^0.18.1",
|
"axios": "^0.18.1",
|
||||||
"vue": "^2.6.10",
|
"vue": "^2.6.10",
|
||||||
"vue-autofocus-directive": "^1.0.4",
|
"vue-autofocus-directive": "^1.0.4",
|
||||||
|
"vue-cool-lightbox": "^1.0.11",
|
||||||
"vue-infinite-loading": "^2.4.4",
|
"vue-infinite-loading": "^2.4.4",
|
||||||
"vue-meta": "^1.6.0",
|
"vue-meta": "^1.6.0",
|
||||||
"vue-router": "^3.1.3",
|
"vue-router": "^3.1.3",
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -12,10 +12,12 @@ Vue.use(InfiniteLoading, {
|
||||||
// }
|
// }
|
||||||
});
|
});
|
||||||
|
|
||||||
import vueVimeoPlayer from 'vue-vimeo-player'
|
// import vueVimeoPlayer from 'vue-vimeo-player'
|
||||||
Vue.use(vueVimeoPlayer)
|
// Vue.use(vueVimeoPlayer)
|
||||||
import VueYouTubeEmbed from 'vue-youtube-embed'
|
// import VueYouTubeEmbed from 'vue-youtube-embed'
|
||||||
Vue.use(VueYouTubeEmbed)
|
// Vue.use(VueYouTubeEmbed)
|
||||||
|
import CoolLightBox from 'vue-cool-lightbox'
|
||||||
|
Vue.use(CoolLightBox)
|
||||||
|
|
||||||
import store from 'vuejs/store'
|
import store from 'vuejs/store'
|
||||||
import router from 'vuejs/route'
|
import router from 'vuejs/route'
|
||||||
|
|
|
@ -547,7 +547,10 @@ article.node--type-frontpage{
|
||||||
article.card{
|
article.card{
|
||||||
position: relative;
|
position: relative;
|
||||||
box-shadow: 0 0 5px rgba(0,0,0,0.2);
|
box-shadow: 0 0 5px rgba(0,0,0,0.2);
|
||||||
|
width:$column_width; height:$card_height;
|
||||||
|
&.article{
|
||||||
width:$column_width*2 + $column_goutiere; height:$card_height;
|
width:$column_width*2 + $column_goutiere; height:$card_height;
|
||||||
|
}
|
||||||
// &.card-small{
|
// &.card-small{
|
||||||
// width:100px; height:140px;
|
// width:100px; height:140px;
|
||||||
// }
|
// }
|
||||||
|
@ -649,34 +652,43 @@ article.card{
|
||||||
padding:0 0.5em 0 0;
|
padding:0 0.5em 0 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
section.videos{
|
div.gallery-wrapper{
|
||||||
ul{
|
.image{
|
||||||
margin:0; padding:0;
|
|
||||||
li{
|
|
||||||
margin:0; padding:0;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width:100%; overflow: hidden;
|
width:$column_width;
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
section.visuels{
|
|
||||||
width:calc(100% + #{$column_goutiere});
|
|
||||||
figure{
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: top;
|
|
||||||
width:$column_width*2 + $column_goutiere;
|
|
||||||
margin:0 $column_goutiere $column_goutiere*0.6 0;
|
margin:0 $column_goutiere $column_goutiere*0.6 0;
|
||||||
img{
|
height:$card_height / 2;
|
||||||
width:100%;
|
background-size: cover;
|
||||||
}
|
|
||||||
caption{
|
|
||||||
position: absolute; bottom: 0; left:0;
|
|
||||||
box-sizing: border-box; width: 100%; padding:0.5em;
|
|
||||||
background-color: $transparent-bg-blk; color: #fff;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// section.videos{
|
||||||
|
// ul{
|
||||||
|
// margin:0; padding:0;
|
||||||
|
// li{
|
||||||
|
// margin:0; padding:0;
|
||||||
|
// display: inline-block;
|
||||||
|
// width:100%; overflow: hidden;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// section.visuels{
|
||||||
|
// width:calc(100% + #{$column_goutiere});
|
||||||
|
// figure{
|
||||||
|
// position: relative;
|
||||||
|
// display: inline-block;
|
||||||
|
// vertical-align: top;
|
||||||
|
// width:$column_width*2 + $column_goutiere;
|
||||||
|
// margin:0 $column_goutiere $column_goutiere*0.6 0;
|
||||||
|
// img{
|
||||||
|
// width:100%;
|
||||||
|
// }
|
||||||
|
// caption{
|
||||||
|
// position: absolute; bottom: 0; left:0;
|
||||||
|
// box-sizing: border-box; width: 100%; padding:0.5em;
|
||||||
|
// background-color: $transparent-bg-blk; color: #fff;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
aside.linked-materials{
|
aside.linked-materials{
|
||||||
ul{
|
ul{
|
||||||
width:calc(100% + #{$column_goutiere});
|
width:calc(100% + #{$column_goutiere});
|
||||||
|
|
|
@ -50,38 +50,24 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="body" v-html="content.body"></section>
|
|
||||||
<section v-if="content.videos" class="videos">
|
|
||||||
<ul>
|
|
||||||
<li v-for="video in content.videos" v-bind:key="video.id">
|
|
||||||
<vimeo-player
|
|
||||||
v-if="video.provider == 'vimeo'"
|
|
||||||
ref="player"
|
|
||||||
:video-id="video.id"
|
|
||||||
:player-width="480"
|
|
||||||
/>
|
|
||||||
<youtube
|
|
||||||
v-if="video.provider == 'youtube'"
|
|
||||||
:video-id="video.id"
|
|
||||||
:player-width="480"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
</div> <!-- //col-left -->
|
</div> <!-- //col-left -->
|
||||||
<div class="col col-right">
|
<div class="col col-right">
|
||||||
<section class="visuels">
|
<section class="body" v-html="content.body"></section>
|
||||||
<figure v-for="visuel in content.field_visuel" v-bind:key="visuel.id">
|
<CoolLightBox
|
||||||
<img
|
:items="content.lightbox_items"
|
||||||
:src="visuel.src"
|
:index="lightbox_index"
|
||||||
:alt="visuel.alt"
|
loop
|
||||||
:title="visuel.title"
|
@close="lightbox_index = null">
|
||||||
/>
|
</CoolLightBox>
|
||||||
<caption v-if="visuel.title">{{ visuel.title }}</caption>
|
<div class="gallery-wrapper">
|
||||||
</figure>
|
<div
|
||||||
</section>
|
class="image"
|
||||||
</div> <!-- // col-right -->
|
v-for="(image, imageIndex) in content.lightbox_items"
|
||||||
</div> <!-- // cols -->
|
:key="imageIndex"
|
||||||
|
@click="setLightboxIndex(imageIndex)"
|
||||||
|
:style="{ backgroundImage: 'url(' + image.thumb + ')' }"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
<aside class="linked-materials">
|
<aside class="linked-materials">
|
||||||
<h3 class="field__label">Linked Materials</h3>
|
<h3 class="field__label">Linked Materials</h3>
|
||||||
<div class="card-list">
|
<div class="card-list">
|
||||||
|
@ -92,6 +78,8 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
</div> <!-- // col-right -->
|
||||||
|
</div> <!-- // cols -->
|
||||||
<nav class="prevnext bottom">
|
<nav class="prevnext bottom">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
|
@ -136,6 +124,7 @@ export default {
|
||||||
uuid:null,
|
uuid:null,
|
||||||
content:null,
|
content:null,
|
||||||
loading:true,
|
loading:true,
|
||||||
|
lightbox_index:null,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -223,6 +212,56 @@ export default {
|
||||||
body: attrs.body.value
|
body: attrs.body.value
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// build lightbox array
|
||||||
|
// will be filled by videos and field_visuel
|
||||||
|
this.content.lightbox_items = [];
|
||||||
|
|
||||||
|
// parse embeded videos
|
||||||
|
this.content.videos = [];
|
||||||
|
for(let key in attrs.field_video){
|
||||||
|
let videolink = attrs.field_video[key]
|
||||||
|
console.log('videolink', videolink);
|
||||||
|
let provider_regex = /https:\/\/(www\.)?(?<provider>youtube|vimeo)\.com\/.+/;
|
||||||
|
let match = provider_regex.exec(videolink)
|
||||||
|
console.log('provider', match.groups.provider);
|
||||||
|
let video_id = null;
|
||||||
|
let video_thumb = null;
|
||||||
|
switch (match.groups.provider) {
|
||||||
|
case 'vimeo':
|
||||||
|
let vimeo_regex = /https:\/\/vimeo\.com\/(?<id>\d+)/;
|
||||||
|
video_id = vimeo_regex.exec(videolink).groups.id || null;
|
||||||
|
// TODO: get the vimeo thumb https://coderwall.com/p/fdrdmg/get-a-thumbnail-from-a-vimeo-video
|
||||||
|
video_thumb = "http://blogpeda.ac-poitiers.fr/ent-lyc/files/2015/06/Vimeo_icon_block.png"
|
||||||
|
break;
|
||||||
|
case 'youtube':
|
||||||
|
let youtube_regex = /https:\/\/(www\.)?youtube\.com\/watch\?v=(?<id>.+)/;
|
||||||
|
video_id = youtube_regex.exec(videolink).groups.id || null;
|
||||||
|
video_thumb = "http://img.youtube.com/vi/"+video_id+"/0.jpg"
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
console.log('video_id', video_id);
|
||||||
|
|
||||||
|
this.content.lightbox_items.push({
|
||||||
|
src: videolink,
|
||||||
|
title: "",
|
||||||
|
description: "",
|
||||||
|
thumb: video_thumb
|
||||||
|
});
|
||||||
|
// this.content.videos.push({
|
||||||
|
// provider: match.groups.provider,
|
||||||
|
// id: video_id,
|
||||||
|
// href: videolink
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
console.log(this.content.videos);
|
||||||
|
// for(let key in this.content.videos){
|
||||||
|
// this.content.lightbox_items.push(this.content.videos[key].href)
|
||||||
|
// }
|
||||||
|
// for(let key in this.content.field_visuel){
|
||||||
|
// this.content.lightbox_items.push(this.content.field_visuel[key].src)
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
// parse all relationships
|
// parse all relationships
|
||||||
for (let key in relations) {
|
for (let key in relations) {
|
||||||
// skip loop if the property is from prototype
|
// skip loop if the property is from prototype
|
||||||
|
@ -245,9 +284,11 @@ export default {
|
||||||
// fill the item values
|
// fill the item values
|
||||||
switch (key) {
|
switch (key) {
|
||||||
case 'field_visuel':
|
case 'field_visuel':
|
||||||
|
// build the field object (not used for now)
|
||||||
field = e.meta
|
field = e.meta
|
||||||
field.id = e.id
|
field.id = e.id
|
||||||
field.src = included.links.article_card_medium.href
|
field.src = included.attributes.uri.url
|
||||||
|
field.thumb = included.links.article_card_medium.href
|
||||||
break;
|
break;
|
||||||
case 'field_linked_materials':
|
case 'field_linked_materials':
|
||||||
field = included.attributes
|
field = included.attributes
|
||||||
|
@ -282,39 +323,18 @@ export default {
|
||||||
// extract first visuel as accroche
|
// extract first visuel as accroche
|
||||||
this.content.image_accroche = this.content.field_visuel.shift()
|
this.content.image_accroche = this.content.field_visuel.shift()
|
||||||
|
|
||||||
// parse embeded videos
|
// fill the lightbox
|
||||||
this.content.videos = [];
|
for(let visuel of this.content.field_visuel){
|
||||||
for(let key in attrs.field_video){
|
this.content.lightbox_items.push(visuel);
|
||||||
let videolink = attrs.field_video[key]
|
|
||||||
console.log('videolink', videolink);
|
|
||||||
let provider_regex = /https:\/\/(www\.)?(?<provider>youtube|vimeo)\.com\/.+/;
|
|
||||||
let match = provider_regex.exec(videolink)
|
|
||||||
console.log('provider', match.groups.provider);
|
|
||||||
let video_id = null;
|
|
||||||
switch (match.groups.provider) {
|
|
||||||
case 'vimeo':
|
|
||||||
let vimeo_regex = /https:\/\/vimeo\.com\/(?<id>\d+)/;
|
|
||||||
video_id = vimeo_regex.exec(videolink).groups.id || null;
|
|
||||||
break;
|
|
||||||
case 'youtube':
|
|
||||||
let youtube_regex = /https:\/\/(www\.)?youtube\.com\/watch\?v=(?<id>.+)/;
|
|
||||||
video_id = youtube_regex.exec(videolink).groups.id || null;
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
console.log('video_id', video_id);
|
console.log('this.content.lightbox_items', this.content.lightbox_items);
|
||||||
|
|
||||||
this.content.videos.push({
|
|
||||||
provider:match.groups.provider,
|
|
||||||
id:video_id
|
|
||||||
});
|
|
||||||
}
|
|
||||||
console.log(this.content.videos);
|
|
||||||
|
|
||||||
// update main page title
|
// update main page title
|
||||||
this.$store.commit('Common/setPagetitle', this.content.title)
|
this.$store.commit('Common/setPagetitle', this.content.title)
|
||||||
|
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
console.log('article.content',this.content);
|
console.log('article.content',this.content);
|
||||||
|
|
||||||
},
|
},
|
||||||
onNext(){
|
onNext(){
|
||||||
// console.log('clicked on next', this.prevnext.next);
|
// console.log('clicked on next', this.prevnext.next);
|
||||||
|
@ -333,6 +353,9 @@ export default {
|
||||||
params: { alias:alias },
|
params: { alias:alias },
|
||||||
query: { uuid: this.prevnext.prev.uuid }
|
query: { uuid: this.prevnext.prev.uuid }
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
setLightboxIndex(index) {
|
||||||
|
this.lightbox_index = index
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
Loading…
Reference in New Issue