fixed coollightbox

package-lock.json

@@ -3632,6 +3632,11 @@
         "array-find-index": "^1.0.1"
       }
     },
+    "custom-event-polyfill": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
+      "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -6912,6 +6917,11 @@
         }
       }
     },
+    "loadjs": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/loadjs/-/loadjs-4.2.0.tgz",
+      "integrity": "sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA=="
+    },
     "locate-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@@ -8112,6 +8122,25 @@
         "semver-compare": "^1.0.0"
       }
     },
+    "plyr": {
+      "version": "3.6.12",
+      "resolved": "https://registry.npmjs.org/plyr/-/plyr-3.6.12.tgz",
+      "integrity": "sha512-42WhYpMS/FEyX2unSEvhYtj1RvJgWvOsjZQFDongOQHA4eVzsyr7b06bzVpinMAOVC9e5H7RCbK+6CCAFIl2VQ==",
+      "requires": {
+        "core-js": "^3.20.0",
+        "custom-event-polyfill": "^1.0.7",
+        "loadjs": "^4.2.0",
+        "rangetouch": "^2.0.1",
+        "url-polyfill": "^1.1.12"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "3.21.1",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.21.1.tgz",
+          "integrity": "sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig=="
+        }
+      }
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -8360,6 +8389,11 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "rangetouch": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/rangetouch/-/rangetouch-2.0.1.tgz",
+      "integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA=="
+    },
     "rc": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@@ -10694,6 +10728,11 @@
         "prepend-http": "^1.0.1"
       }
     },
+    "url-polyfill": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.12.tgz",
+      "integrity": "sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A=="
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -10753,11 +10792,12 @@
       }
     },
     "vue-cool-lightbox": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/vue-cool-lightbox/-/vue-cool-lightbox-2.7.1.tgz",
-      "integrity": "sha512-LxcUirNblEi2izgmeLqyWBwSz+fhJVAOvrV4jGJ6Wmz3ip80r0kQlMkgoEGI0ZTAPQwRZqGHbU7Wj1vh8nacVg==",
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/vue-cool-lightbox/-/vue-cool-lightbox-2.7.4.tgz",
+      "integrity": "sha512-5l2nvS7LPGNpf4gp76W+tJ2rL8Yg2HD2S5uVRRkDWxDj62muHImePMQcwkPjpYoUU39TNVsB5fld6+we4LfRnw==",
       "requires": {
         "body-scroll-lock": "^3.1.5",
+        "plyr": "^3.6.7",
         "vue": "^2.6.10"
       }
     },

package.json

@@ -24,7 +24,7 @@
     "pretty-bytes": "^5.5.0",
     "vue": "^2.6.12",
     "vue-autofocus-directive": "^1.0.4",
-    "vue-cool-lightbox": "^2.6.9",
+    "vue-cool-lightbox": "^2.7.4",
     "vue-infinite-loading": "^2.4.5",
     "vue-router": "^3.4.9",
     "vue-vimeo-player": "^0.1.0",

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