fixed blabla lightbox #1969

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

@@ -29,4 +29,4 @@
           }
         }
         ${n}
-        `;s.Z.post("",{query:(0,c.S)(a)}).then((t=>{e(r,{items:t.data.data.materiaux,callBackArgs:o})})).catch((e=>{console.warn("Issue with loadMaterials",e),Promise.reject(e)}))}}}})}},r={};function o(e){var t=r[e];if(void 0!==t)return t.exports;var n=r[e]={exports:{}};return i[e].call(n.exports,n,n.exports,o),n.exports}o.m=i,e=[],o.O=(t,n,i,r)=>{if(!n){var a=1/0;for(l=0;l<e.length;l++){for(var[n,i,r]=e[l],s=!0,c=0;c<n.length;c++)(!1&r||a>=r)&&Object.keys(o.O).every((e=>o.O[e](n[c])))?n.splice(c--,1):(s=!1,r<a&&(a=r));s&&(e.splice(l--,1),t=i())}return t}r=r||0;for(var l=e.length;l>0&&e[l-1][2]>r;l--)e[l]=e[l-1];e[l]=[n,i,r]},o.F={},o.E=e=>{Object.keys(o.F).map((t=>{o.F[t](e)}))},o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.f={},o.e=e=>Promise.all(Object.keys(o.f).reduce(((t,n)=>(o.f[n](e,t),t)),[])),o.u=e=>({67:"module-blabla",204:"module-showrooms",282:"module-thematique",665:"module-pricing",694:"module-base",790:"module-article"}[e]+"."+{67:"d2a190261f0858b2929c",204:"f4e99dc6af9efd6ef724",282:"8b067b3da8f434cd4886",665:"46c403a3723d5309dc4b",694:"caf964cb87814d5d91ab",790:"86caee458383dab87430"}[e]+".bundle.js"),o.miniCssF=e=>{},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),t={},n="materio.com:",o.l=(e,i,r,a)=>{if(t[e])t[e].push(i);else{var s,c;if(void 0!==r)for(var l=document.getElementsByTagName("script"),u=0;u<l.length;u++){var d=l[u];if(d.getAttribute("src")==e||d.getAttribute("data-webpack")==n+r){s=d;break}}s||(c=!0,(s=document.createElement("script")).charset="utf-8",s.timeout=120,o.nc&&s.setAttribute("nonce",o.nc),s.setAttribute("data-webpack",n+r),s.src=e),t[e]=[i];var f=(n,i)=>{s.onerror=s.onload=null,clearTimeout(p);var r=t[e];if(delete t[e],s.parentNode&&s.parentNode.removeChild(s),r&&r.forEach((e=>e(i))),n)return n(i)},p=setTimeout(f.bind(null,void 0,{type:"timeout",target:s}),12e4);s.onerror=f.bind(null,s.onerror),s.onload=f.bind(null,s.onload),c&&document.head.appendChild(s)}},o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.p="/themes/custom/materiotheme/assets/dist/",(()=>{var e={179:0};o.f.j=(t,n)=>{var i=o.o(e,t)?e[t]:void 0;if(0!==i)if(i)n.push(i[2]);else{var r=new Promise(((n,r)=>i=e[t]=[n,r]));n.push(i[2]=r);var a=o.p+o.u(t),s=new Error;o.l(a,(n=>{if(o.o(e,t)&&(0!==(i=e[t])&&(e[t]=void 0),i)){var r=n&&("load"===n.type?"missing":n.type),a=n&&n.target&&n.target.src;s.message="Loading chunk "+t+" failed.\n("+r+": "+a+")",s.name="ChunkLoadError",s.type=r,s.request=a,i[1](s)}}),"chunk-"+t,t)}},o.F.j=t=>{if(!o.o(e,t)||void 0===e[t]){e[t]=null;var n=document.createElement("link");o.nc&&n.setAttribute("nonce",o.nc),n.rel="prefetch",n.as="script",n.href=o.p+o.u(t),document.head.appendChild(n)}},o.O.j=t=>0===e[t];var t=(t,n)=>{var i,r,[a,s,c]=n,l=0;for(i in s)o.o(s,i)&&(o.m[i]=s[i]);for(c&&c(o),t&&t(n);l<a.length;l++)r=a[l],o.o(e,r)&&e[r]&&e[r][0](),e[a[l]]=0;o.O()},n=self.webpackChunkmaterio_com=self.webpackChunkmaterio_com||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))})(),o.O(0,[179],(()=>[694,282,67,790,204,665].map(o.E)),5);var a=o.O(void 0,[289],(()=>o(470)));a=o.O(a)})();
+        `;s.Z.post("",{query:(0,c.S)(a)}).then((t=>{e(r,{items:t.data.data.materiaux,callBackArgs:o})})).catch((e=>{console.warn("Issue with loadMaterials",e),Promise.reject(e)}))}}}})}},r={};function o(e){var t=r[e];if(void 0!==t)return t.exports;var n=r[e]={exports:{}};return i[e].call(n.exports,n,n.exports,o),n.exports}o.m=i,e=[],o.O=(t,n,i,r)=>{if(!n){var a=1/0;for(l=0;l<e.length;l++){for(var[n,i,r]=e[l],s=!0,c=0;c<n.length;c++)(!1&r||a>=r)&&Object.keys(o.O).every((e=>o.O[e](n[c])))?n.splice(c--,1):(s=!1,r<a&&(a=r));s&&(e.splice(l--,1),t=i())}return t}r=r||0;for(var l=e.length;l>0&&e[l-1][2]>r;l--)e[l]=e[l-1];e[l]=[n,i,r]},o.F={},o.E=e=>{Object.keys(o.F).map((t=>{o.F[t](e)}))},o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.f={},o.e=e=>Promise.all(Object.keys(o.f).reduce(((t,n)=>(o.f[n](e,t),t)),[])),o.u=e=>({67:"module-blabla",204:"module-showrooms",282:"module-thematique",665:"module-pricing",694:"module-base",790:"module-article"}[e]+"."+{67:"d2a190261f0858b2929c",204:"f4e99dc6af9efd6ef724",282:"8b067b3da8f434cd4886",665:"46c403a3723d5309dc4b",694:"caf964cb87814d5d91ab",790:"287271970a4e18761afe"}[e]+".bundle.js"),o.miniCssF=e=>{},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),t={},n="materio.com:",o.l=(e,i,r,a)=>{if(t[e])t[e].push(i);else{var s,c;if(void 0!==r)for(var l=document.getElementsByTagName("script"),u=0;u<l.length;u++){var d=l[u];if(d.getAttribute("src")==e||d.getAttribute("data-webpack")==n+r){s=d;break}}s||(c=!0,(s=document.createElement("script")).charset="utf-8",s.timeout=120,o.nc&&s.setAttribute("nonce",o.nc),s.setAttribute("data-webpack",n+r),s.src=e),t[e]=[i];var f=(n,i)=>{s.onerror=s.onload=null,clearTimeout(p);var r=t[e];if(delete t[e],s.parentNode&&s.parentNode.removeChild(s),r&&r.forEach((e=>e(i))),n)return n(i)},p=setTimeout(f.bind(null,void 0,{type:"timeout",target:s}),12e4);s.onerror=f.bind(null,s.onerror),s.onload=f.bind(null,s.onload),c&&document.head.appendChild(s)}},o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.p="/themes/custom/materiotheme/assets/dist/",(()=>{var e={179:0};o.f.j=(t,n)=>{var i=o.o(e,t)?e[t]:void 0;if(0!==i)if(i)n.push(i[2]);else{var r=new Promise(((n,r)=>i=e[t]=[n,r]));n.push(i[2]=r);var a=o.p+o.u(t),s=new Error;o.l(a,(n=>{if(o.o(e,t)&&(0!==(i=e[t])&&(e[t]=void 0),i)){var r=n&&("load"===n.type?"missing":n.type),a=n&&n.target&&n.target.src;s.message="Loading chunk "+t+" failed.\n("+r+": "+a+")",s.name="ChunkLoadError",s.type=r,s.request=a,i[1](s)}}),"chunk-"+t,t)}},o.F.j=t=>{if(!o.o(e,t)||void 0===e[t]){e[t]=null;var n=document.createElement("link");o.nc&&n.setAttribute("nonce",o.nc),n.rel="prefetch",n.as="script",n.href=o.p+o.u(t),document.head.appendChild(n)}},o.O.j=t=>0===e[t];var t=(t,n)=>{var i,r,[a,s,c]=n,l=0;for(i in s)o.o(s,i)&&(o.m[i]=s[i]);for(c&&c(o),t&&t(n);l<a.length;l++)r=a[l],o.o(e,r)&&e[r]&&e[r][0](),e[a[l]]=0;o.O()},n=self.webpackChunkmaterio_com=self.webpackChunkmaterio_com||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))})(),o.O(0,[179],(()=>[694,282,67,790,204,665].map(o.E)),5);var a=o.O(void 0,[289],(()=>o(470)));a=o.O(a)})();

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

@@ -2158,6 +2158,7 @@ article.card{
       margin:0 $column_goutiere 0 0;
       img{
         width:100%;
+        cursor: pointer;
       }
     }
   }
@@ -2178,6 +2179,7 @@ article.card{
       margin:0 $column_goutiere $column_goutiere*0.6 0;
       height:$card_height / 2;
       background-size: cover;
+      cursor: pointer;
     }
 		@include col-mediaquery-max(3){
 			display: flex;

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

@@ -31,7 +31,7 @@
               :src="image_accroche.url"
               :alt="image_accroche.alt"
               :title="image_accroche.title"
-              @click="setLightboxIndex(0)"
+              @click="setcoolLightBoxIndex(0)"
             />
           </figure>
         </section>
@@ -62,20 +62,13 @@
       </div> <!-- //col-left -->
       <div class="col col-right">
         <section class="body" v-html="article.body"></section>
-        <CoolLightBox
-          :items="lightbox_items"
-          :index="lightbox_index"
-          :loop="true"
-          srcName="url"
-          @close="lightbox_index = null">
-        </CoolLightBox>
         <div class="gallery-wrapper">
           <div
             class="image"
             v-for="(image, imageIndex) in lightbox_items"
             v-if="imageIndex > 0"
             :key="imageIndex"
-            @click="setLightboxIndex(imageIndex)"
+            @click="setcoolLightBoxIndex(imageIndex)"
             :style="{ backgroundImage: 'url(' + image.thumb + ')' }"
           ></div>
         </div>
@@ -156,7 +149,9 @@ export default {
   },
   computed: {
     ...mapState({
-      items: state => state.Blabla.items
+      items: state => state.Blabla.items,
+      coolLightBoxItems: state => state.Common.coolLightBoxItems,
+      coolLightBoxIndex: state => state.Common.coolLightBoxIndex
     })
   },
   created(){
@@ -166,7 +161,9 @@ export default {
     ...mapActions({
       getItems: 'Blabla/getItems',
       getItemIndex: 'Blabla/getItemIndex',
-      getPrevNextItems: 'Blabla/getPrevNextItems'
+      getPrevNextItems: 'Blabla/getPrevNextItems',
+      setcoolLightBoxItems: 'Common/setcoolLightBoxItems',
+      setcoolLightBoxIndex: 'Common/setcoolLightBoxIndex'
     }),
     getArticle(){
       console.log('getArticle', this.$route)
@@ -278,6 +275,7 @@ export default {
       }
 
       console.log('Article this.content.lightbox_items', this.lightbox_items)
+      this.setcoolLightBoxItems(this.lightbox_items)
 
       // update main page title
       this.$store.commit('Common/setPagetitle', article.title)
@@ -293,9 +291,6 @@ export default {
         name:`article`,
         params: { alias:alias, id: pn.nid }
       })
-    },
-    setLightboxIndex(index) {
-      this.lightbox_index = index
     }
   },
   components: {