fixed coollightbox

This commit is contained in:
Bachir Soussi Chiadmi 2022-02-22 13:43:18 +01:00
parent 96b343b246
commit 99384d32c4
12 changed files with 2679 additions and 48 deletions

46
package-lock.json generated
View File

@ -3632,6 +3632,11 @@
"array-find-index": "^1.0.1" "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": { "cyclist": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz", "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": { "locate-path": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@ -8112,6 +8122,25 @@
"semver-compare": "^1.0.0" "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": { "posix-character-classes": {
"version": "0.1.1", "version": "0.1.1",
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@ -8360,6 +8389,11 @@
"safe-buffer": "^5.1.0" "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": { "rc": {
"version": "1.2.8", "version": "1.2.8",
"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@ -10694,6 +10728,11 @@
"prepend-http": "^1.0.1" "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": { "use": {
"version": "3.1.1", "version": "3.1.1",
"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@ -10753,11 +10792,12 @@
} }
}, },
"vue-cool-lightbox": { "vue-cool-lightbox": {
"version": "2.7.1", "version": "2.7.4",
"resolved": "https://registry.npmjs.org/vue-cool-lightbox/-/vue-cool-lightbox-2.7.1.tgz", "resolved": "https://registry.npmjs.org/vue-cool-lightbox/-/vue-cool-lightbox-2.7.4.tgz",
"integrity": "sha512-LxcUirNblEi2izgmeLqyWBwSz+fhJVAOvrV4jGJ6Wmz3ip80r0kQlMkgoEGI0ZTAPQwRZqGHbU7Wj1vh8nacVg==", "integrity": "sha512-5l2nvS7LPGNpf4gp76W+tJ2rL8Yg2HD2S5uVRRkDWxDj62muHImePMQcwkPjpYoUU39TNVsB5fld6+we4LfRnw==",
"requires": { "requires": {
"body-scroll-lock": "^3.1.5", "body-scroll-lock": "^3.1.5",
"plyr": "^3.6.7",
"vue": "^2.6.10" "vue": "^2.6.10"
} }
}, },

View File

@ -24,7 +24,7 @@
"pretty-bytes": "^5.5.0", "pretty-bytes": "^5.5.0",
"vue": "^2.6.12", "vue": "^2.6.12",
"vue-autofocus-directive": "^1.0.4", "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-infinite-loading": "^2.4.5",
"vue-router": "^3.4.9", "vue-router": "^3.4.9",
"vue-vimeo-player": "^0.1.0", "vue-vimeo-player": "^0.1.0",

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -17,8 +17,9 @@ Vue.use(InfiniteLoading, {
// 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' // LOADED IN COMPONENT
Vue.use(CoolLightBox) // import CoolLightBox from 'vue-cool-lightbox'
// Vue.use(CoolLightBox)
import VModal from 'vue-js-modal' import VModal from 'vue-js-modal'
Vue.use(VModal, { dialog: true }) Vue.use(VModal, { dialog: true })
@ -49,10 +50,11 @@ import VMainContent from 'vuejs/components/Content/MainContent'
import VSearchBlock from 'vuejs/components/Block/SearchBlock' import VSearchBlock from 'vuejs/components/Block/SearchBlock'
import VLeftContent from 'vuejs/components/Content/LeftContent' import VLeftContent from 'vuejs/components/Content/LeftContent'
import VHeaderMenu from 'vuejs/components/Content/HeaderMenu' import VHeaderMenu from 'vuejs/components/Content/HeaderMenu'
import GlobCoolLightBox from 'vuejs/components/Content/GlobCoolLightBox'
import { mapState } from 'vuex' 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 'slim-select/slimselect.min.css'
import 'theme/assets/styles/main.scss' 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, export let _v_sitebranding_block, _v_user_block, _v_header_menu,
_v_pagetitle_block, _v_search_block, _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) { (function (Drupal, drupalSettings, drupalDecoupled) {
const MaterioTheme = function () { const MaterioTheme = function () {
@ -121,6 +124,7 @@ export let _v_sitebranding_block, _v_user_block, _v_header_menu,
initVStore() initVStore()
initVi18n() initVi18n()
initVLeftContent() initVLeftContent()
initCoolLightBox()
} }
initVUserBlock() initVUserBlock()
} }
@ -390,6 +394,20 @@ export let _v_sitebranding_block, _v_user_block, _v_header_menu,
render: h => h(VLeftContent, { props: { id: id } }) render: h => h(VLeftContent, { props: { id: id } })
}).$mount('#' + 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() init()
} // end MaterioTheme() } // end MaterioTheme()

View File

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

View File

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

View File

@ -8,7 +8,9 @@ export default {
// initial state // initial state
state: { state: {
pagetitle: null, pagetitle: null,
hamburgerMenuToggle: document.querySelector('input#header-block-right-toggle') hamburgerMenuToggle: document.querySelector('input#header-block-right-toggle'),
coolLightBoxItems: null,
coolLightBoxIndex: null
}, },
// getters // getters
@ -22,6 +24,12 @@ export default {
}, },
setHamMenuState (state, s) { setHamMenuState (state, s) {
state.hamburgerMenuToggle.checked = 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) { openCloseHamMenu ({ dispatch, commit, state }, s) {
console.log('openCloseHamMenu', s) console.log('openCloseHamMenu', s)
commit('setHamMenuState', 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)
} }
} }