made blabla article lightbox display for video and images

This commit is contained in:
Bachir Soussi Chiadmi 2020-02-20 12:12:35 +01:00
parent b32e609538
commit f69853bb46
7 changed files with 146 additions and 123 deletions

8
package-lock.json generated
View File

@ -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",

View File

@ -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

View File

@ -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'

View File

@ -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});

View File

@ -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: {