made blabla article lightbox display for video and images

package-lock.json

@@ -9190,6 +9190,14 @@
         "@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": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "axios": "^0.18.1",
     "vue": "^2.6.10",
     "vue-autofocus-directive": "^1.0.4",
+    "vue-cool-lightbox": "^1.0.11",
     "vue-infinite-loading": "^2.4.4",
     "vue-meta": "^1.6.0",
     "vue-router": "^3.1.3",

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -12,10 +12,12 @@ Vue.use(InfiniteLoading, {
   // }
 });
 
-import vueVimeoPlayer from 'vue-vimeo-player'
-Vue.use(vueVimeoPlayer)
-import VueYouTubeEmbed from 'vue-youtube-embed'
-Vue.use(VueYouTubeEmbed)
+// import vueVimeoPlayer from 'vue-vimeo-player'
+// Vue.use(vueVimeoPlayer)
+// import VueYouTubeEmbed from 'vue-youtube-embed'
+// Vue.use(VueYouTubeEmbed)
+import CoolLightBox from 'vue-cool-lightbox'
+Vue.use(CoolLightBox)
 
 import store from 'vuejs/store'
 import router from 'vuejs/route'

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -547,7 +547,10 @@ article.node--type-frontpage{
 article.card{
   position: relative;
   box-shadow: 0 0 5px rgba(0,0,0,0.2);
-  width:$column_width*2 + $column_goutiere; height:$card_height;
+  width:$column_width; height:$card_height;
+  &.article{
+    width:$column_width*2 + $column_goutiere; height:$card_height;
+  }
   // &.card-small{
   //   width:100px; height:140px;
   // }
@@ -649,34 +652,43 @@ article.card{
       padding:0 0.5em 0 0;
     }
   }
-  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;
+  div.gallery-wrapper{
+    .image{
       display: inline-block;
-      vertical-align: top;
-      width:$column_width*2 + $column_goutiere;
+      width:$column_width;
       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;
-      }
+      height:$card_height / 2;
+      background-size: cover;
     }
   }
+  // 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{
     ul{
       width:calc(100% + #{$column_goutiere});

web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue

@@ -50,48 +50,36 @@
             </ul>
           </div>
         </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 class="col col-right">
-        <section class="visuels">
-          <figure v-for="visuel in content.field_visuel" v-bind:key="visuel.id">
-            <img
-              :src="visuel.src"
-              :alt="visuel.alt"
-              :title="visuel.title"
-              />
-            <caption v-if="visuel.title">{{ visuel.title }}</caption>
-          </figure>
-        </section>
+        <section class="body" v-html="content.body"></section>
+        <CoolLightBox
+          :items="content.lightbox_items"
+          :index="lightbox_index"
+          loop
+          @close="lightbox_index = null">
+        </CoolLightBox>
+        <div class="gallery-wrapper">
+          <div
+            class="image"
+            v-for="(image, imageIndex) in content.lightbox_items"
+            :key="imageIndex"
+            @click="setLightboxIndex(imageIndex)"
+            :style="{ backgroundImage: 'url(' + image.thumb + ')' }"
+          ></div>
+        </div>
+        <aside class="linked-materials">
+          <h3 class="field__label">Linked Materials</h3>
+          <div class="card-list">
+            <ul class="">
+              <li v-for="node in content.field_linked_materials" v-bind:key="node.id">
+                <Card :item="node" />
+              </li>
+            </ul>
+          </div>
+        </aside>
       </div> <!-- // col-right -->
     </div> <!-- // cols -->
-    <aside class="linked-materials">
-      <h3 class="field__label">Linked Materials</h3>
-      <div class="card-list">
-        <ul class="">
-          <li v-for="node in content.field_linked_materials" v-bind:key="node.id">
-            <Card :item="node" />
-          </li>
-        </ul>
-      </div>
-    </aside>
     <nav class="prevnext bottom">
       <ul>
         <li>
@@ -136,6 +124,7 @@ export default {
       uuid:null,
       content:null,
       loading:true,
+      lightbox_index:null,
     }
   },
   computed: {
@@ -223,6 +212,56 @@ export default {
         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
       for (let key in relations) {
         // skip loop if the property is from prototype
@@ -245,9 +284,11 @@ export default {
             // fill the item values
             switch (key) {
               case 'field_visuel':
+                // build the field object (not used for now)
                 field = e.meta
                 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;
               case 'field_linked_materials':
                 field = included.attributes
@@ -282,39 +323,18 @@ export default {
       // extract first visuel as accroche
       this.content.image_accroche = this.content.field_visuel.shift()
 
-      // 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;
-        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);
-
-        this.content.videos.push({
-          provider:match.groups.provider,
-          id:video_id
-        });
+      // fill the lightbox
+      for(let visuel of this.content.field_visuel){
+        this.content.lightbox_items.push(visuel);
       }
-      console.log(this.content.videos);
+      console.log('this.content.lightbox_items', this.content.lightbox_items);
 
       // update main page title
       this.$store.commit('Common/setPagetitle', this.content.title)
 
       this.loading = false;
       console.log('article.content',this.content);
+
     },
     onNext(){
       // console.log('clicked on next', this.prevnext.next);
@@ -333,6 +353,9 @@ export default {
         params: { alias:alias },
         query: { uuid: this.prevnext.prev.uuid }
       })
+    },
+    setLightboxIndex(index) {
+      this.lightbox_index = index
     }
   },
   components: {