fixed coollightbox

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

@@ -17,8 +17,9 @@ Vue.use(InfiniteLoading, {
 // Vue.use(vueVimeoPlayer)
 // import VueYouTubeEmbed from 'vue-youtube-embed'
 // Vue.use(VueYouTubeEmbed)
-import CoolLightBox from 'vue-cool-lightbox'
-Vue.use(CoolLightBox)
+// LOADED IN COMPONENT
+// import CoolLightBox from 'vue-cool-lightbox'
+// Vue.use(CoolLightBox)
 
 import VModal from 'vue-js-modal'
 Vue.use(VModal, { dialog: true })
@@ -49,10 +50,11 @@ import VMainContent from 'vuejs/components/Content/MainContent'
 import VSearchBlock from 'vuejs/components/Block/SearchBlock'
 import VLeftContent from 'vuejs/components/Content/LeftContent'
 import VHeaderMenu from 'vuejs/components/Content/HeaderMenu'
+import GlobCoolLightBox from 'vuejs/components/Content/GlobCoolLightBox'
 
 import { mapState } from 'vuex'
 
-import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
+// import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
 import 'slim-select/slimselect.min.css'
 
 import 'theme/assets/styles/main.scss'
@@ -62,7 +64,8 @@ import MA from 'vuejs/api/ma-axios'
 
 export let _v_sitebranding_block, _v_user_block, _v_header_menu,
   _v_pagetitle_block, _v_search_block,
-  _v_main_content, _v_left_content
+  _v_main_content, _v_left_content,
+  _v_glob_coollightbox
 
 (function (Drupal, drupalSettings, drupalDecoupled) {
   const MaterioTheme = function () {
@@ -121,6 +124,7 @@ export let _v_sitebranding_block, _v_user_block, _v_header_menu,
         initVStore()
         initVi18n()
         initVLeftContent()
+        initCoolLightBox()
       }
       initVUserBlock()
     }
@@ -390,6 +394,20 @@ export let _v_sitebranding_block, _v_user_block, _v_header_menu,
         render: h => h(VLeftContent, { props: { id: id } })
       }).$mount('#' + id)
     }
+    function initCoolLightBox () {
+      const id = 'glog-coollightbox'
+      const $clb_elmt = document.createElement('div')
+      $clb_elmt.setAttribute('id', id)
+      const $body = document.querySelector('body')
+      $body.appendChild($clb_elmt)
+
+      _v_glob_coollightbox = new Vue({
+        store,
+        i18n,
+        render: h => h(GlobCoolLightBox, { props: { } })
+      }).$mount('#' + id)
+      console.log('_v_glob_coollightbox', _v_glob_coollightbox)
+    }
     init()
   } // end MaterioTheme()
 

web/themes/custom/materiotheme/vuejs/components/Content/GlobCoolLightBox.vue

@@ -0,0 +1,51 @@
+<template lang="html">
+      <CoolLightBox
+      :items="coolLightBoxItems"
+      :index="coolLightBoxIndex"
+      srcName="url"
+      :loop="true"
+      :fullscreen="true"
+      @close="setcoolLightBoxIndex(null)">
+    </CoolLightBox>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+
+// import MA from 'vuejs/api/ma-axios'
+import router from 'vuejs/route'
+
+import CoolLightBox from 'vue-cool-lightbox'
+import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
+
+export default {
+  router,
+  // props:[],
+  data() {
+    return {
+      // isOpened: false
+    }
+  },
+  computed: {
+    ...mapState({
+      coolLightBoxItems: state => state.Common.coolLightBoxItems,
+      coolLightBoxIndex: state => state.Common.coolLightBoxIndex,
+    })
+  },
+  beforeMount() {
+
+  },
+  methods: {
+    ...mapActions({
+      setcoolLightBoxIndex: 'Common/setcoolLightBoxIndex'
+    }),
+  },
+  components: {
+    CoolLightBox
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue

@@ -271,23 +271,27 @@
         <img
           class="blank"
           :src="blanksrc"
-          @click="lightbox_index = index"
+          @click="setcoolLightBoxIndex(index)"
         >
       </figure>
     </section>
-    <CoolLightBox
+    <!-- <CoolLightBox
       :items="material.images"
       :index="lightbox_index"
       srcName="url"
       :loop="true"
+      :fullScreen="true"
       @close="lightbox_index = null">
-    </CoolLightBox>
+    </CoolLightBox> -->
   </article>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex'
 
+// import CoolLightBox from 'vue-cool-lightbox'
+// import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
+
 import {
   VsaList,
   VsaItem,
@@ -317,6 +321,7 @@ export default {
   mixins: [cardMixins],
   components: {
     LinkedMaterialCard,
+    // CoolLightBox,
     VsaList,
     VsaItem,
     VsaHeading,
@@ -365,7 +370,9 @@ export default {
     ...mapState({
       csrf_token: state => state.User.csrf_token,
       flagcolls: state => state.User.flagcolls,
-      showrooms: state => state.Showrooms.showrooms_by_tid
+      showrooms: state => state.Showrooms.showrooms_by_tid,
+      coolLightBoxItems: state => state.Common.coolLightBoxItems,
+      coolLightBoxIndex: state => state.Common.coolLightBoxIndex
     }),
     collsLength() {
       return Object.keys(this.flagcolls).length
@@ -397,7 +404,9 @@ export default {
     ...mapActions({
       // refreshItem: 'Search/refreshItem',
       createFlagColl: 'User/createFlagColl',
-      flagUnflag: 'User/flagUnflag'
+      flagUnflag: 'User/flagUnflag',
+      setcoolLightBoxItems: 'Common/setcoolLightBoxItems',
+      setcoolLightBoxIndex: 'Common/setcoolLightBoxIndex'
     }),
     loadMaterial(){
       console.log('loadMaterial', this.item.id)
@@ -424,6 +433,7 @@ export default {
           // setTimeout(function () {
           //   this.activateLazyLoad()
           // }.bind(this), 5)
+          this.setcoolLightBoxItems(this.material.images)
         })
         .catch(error => {
           console.warn('Issue with loadMaterial', error)

web/themes/custom/materiotheme/vuejs/store/modules/common.js

@@ -8,7 +8,9 @@ export default {
   // initial state
   state: {
     pagetitle: null,
-    hamburgerMenuToggle: document.querySelector('input#header-block-right-toggle')
+    hamburgerMenuToggle: document.querySelector('input#header-block-right-toggle'),
+    coolLightBoxItems: null,
+    coolLightBoxIndex: null
   },
 
   // getters
@@ -22,6 +24,12 @@ export default {
     },
     setHamMenuState (state, s) {
       state.hamburgerMenuToggle.checked = s
+    },
+    setcoolLightBoxItems (state, items) {
+      state.coolLightBoxItems = items
+    },
+    setcoolLightBoxIndex (state, i) {
+      state.coolLightBoxIndex = i
     }
   },
 
@@ -30,6 +38,14 @@ export default {
     openCloseHamMenu ({ dispatch, commit, state }, s) {
       console.log('openCloseHamMenu', s)
       commit('setHamMenuState', s)
+    },
+    setcoolLightBoxIndex ({ dispatch, commit, state }, i) {
+      console.log('setcoolLightBoxIndex', i)
+      commit('setcoolLightBoxIndex', i)
+    },
+    setcoolLightBoxItems ({ dispatch, commit, state }, items) {
+      console.log('setcoolLightBoxItems', items)
+      commit('setcoolLightBoxItems', items)
     }
   }