materio-d9/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue

154 lines
4.9 KiB
Vue
Raw Normal View History

<script>
import Vue from 'vue'
export default {
props: ['html'], // get the html from parent with props
data() {
return {
2020-12-27 17:46:04 +01:00
template: null, // compiled template from html used in render
showrooms: [],
showroomsOdd: [],
showroomsEven: [],
showroomMode: 1,
showroomInterval: 0,
showroomI:0,
showroomJ:0
}
},
beforeMount() {
// console.log('Home beforeMount')
// compile the html src (coming from parent with props or from ajax call)
if (this.html) {
// console.log('html', this.html)
2021-01-04 11:31:01 +01:00
this.compileTemplate()
}
},
render(h) {
if (!this.template) {
return h('span', 'Loading ...')
} else {
return this.template.render.call(this)
}
},
mounted(){
2021-01-04 11:31:01 +01:00
// this.initShowroomCarroussel()
},
methods: {
2021-01-04 11:31:01 +01:00
compileTemplate(){
this.template = Vue.compile(this.html)
this.$options.staticRenderFns = []
this._staticTrees = []
this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)))
setTimeout(this.initShowroomCarroussel.bind(this), 250)
},
initShowroomCarroussel(){
console.log('startShowroomCarroussel')
2020-12-27 17:46:04 +01:00
this.showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item')
console.log('showrooms', this.showrooms)
2020-12-27 17:46:04 +01:00
for (let i = 0; i < this.showrooms.length; i++) {
2020-12-27 17:46:04 +01:00
if (i%2 === 0) {
this.showroomsOdd.push(this.showrooms[i])
} else {
2020-12-27 17:46:04 +01:00
this.showroomsEven.push(this.showrooms[i])
}
}
console.log('Odd', this.showroomsOdd)
console.log('Even', this.showroomsEven)
// TODO: share media query and variables between scss and js
let column_width= 205
let column_goutiere= 13
let bp = (column_width + column_goutiere )*7 +1
const mediaQuery = window.matchMedia(`(min-width: ${bp}px)`)
2020-12-27 17:46:04 +01:00
// Register event listener
mediaQuery.addListener(this.checkShowroomMode)
this.checkShowroomMode(mediaQuery)
// this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000);
// console.log('this.showroomInterval', this.showroomInterval)
2020-12-27 17:46:04 +01:00
// this.switchShowroomCarroussel()
},
checkShowroomMode(mq){
// default mode 1
let newmode = 1
if (mq.matches) {
// if mediaquery match switch to mode 2
newmode = 2
}
if(newmode !== this.showroomMode) {
// if new mode different from old mode
// reset sowrooms classes
for (let i = 0; i < this.showrooms.length; i++) {
2020-12-27 17:46:04 +01:00
this.showrooms[i].classList.remove('active')
}
2020-12-27 17:46:04 +01:00
// record new mode
this.showroomMode = newmode
// clear interval
// if (this.showroomInterval) {
clearInterval(this.showroomInterval)
this.showroomInterval = 0
// }
// reset indexes
this.showroomI = 0
this.showroomJ = 0
}
2020-12-27 17:46:04 +01:00
// in any case (re)launch the animation
this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 15000);
console.log('this.showroomInterval', this.showroomInterval)
2020-12-27 17:46:04 +01:00
this.switchShowroomCarroussel()
},
2020-12-27 17:46:04 +01:00
switchShowroomCarroussel(){
// console.log('switchShowroomCarroussel i', $elmts, i)
2020-12-27 17:46:04 +01:00
if (this.showroomMode === 1) {
this.showrooms[this.showroomI].classList.add('active')
this.showrooms[this.showroomI-1 < 0 ? this.showrooms.length -1 : this.showroomI-1].classList.remove('active')
this.showroomI = this.showroomI+1 >= this.showrooms.length ? 0 : this.showroomI+1
} else {
2020-12-27 17:46:04 +01:00
this.showroomsOdd[this.showroomI].classList.add('active')
this.showroomsOdd[this.showroomI-1 < 0 ? this.showroomsOdd.length -1 : this.showroomI-1].classList.remove('active')
this.showroomI = this.showroomI+1 >= this.showroomsOdd.length ? 0 : this.showroomI+1
2020-12-27 17:46:04 +01:00
this.showroomsEven[this.showroomJ].classList.add('active')
this.showroomsEven[this.showroomJ-1 < 0 ? this.showroomsEven.length -1 : this.showroomJ-1].classList.remove('active')
this.showroomJ = this.showroomJ+1 >= this.showroomsEven.length ? 0 : this.showroomJ+1
}
},
onClickLink(e){
console.log("onClickLink", e, this.$router, this.$route)
let path = null;
2020-12-27 11:09:03 +01:00
// find existing router route compared with link href
for (let i = 0; i < this.$router.options.routes.length; i++) {
2020-12-27 11:09:03 +01:00
if (this.$router.options.routes[i].path == e.originalTarget.pathname) {
if (e.originalTarget.pathname !== this.$route.path) {
path = e.originalTarget.pathname
}
break
}
2020-12-27 11:09:03 +01:00
}
if (path) {
this.$router.push({
path: path
})
}
2021-01-04 14:20:04 +01:00
},
onClickFieldLabel(e){
console.log("onClickFieldLabel", e, this.$router, this.$route)
}
2021-01-04 11:31:01 +01:00
},
watch: {
html: function(val) {
console.log('html prop changed', val)
this.compileTemplate()
}
}
}
</script>
<style lang="scss" scoped>
</style>