141 lines
4.6 KiB
Vue
141 lines
4.6 KiB
Vue
<script>
|
|
|
|
import Vue from 'vue'
|
|
|
|
export default {
|
|
props: ['html'], // get the html from parent with props
|
|
data() {
|
|
return {
|
|
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);
|
|
this.template = Vue.compile(this.html)
|
|
this.$options.staticRenderFns = []
|
|
this._staticTrees = []
|
|
this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)))
|
|
}
|
|
},
|
|
render(h) {
|
|
if(!this.template){
|
|
return h('span', 'Loading ...')
|
|
}else{
|
|
return this.template.render.call(this)
|
|
}
|
|
},
|
|
mounted(){
|
|
this.initShowroomCarroussel()
|
|
},
|
|
methods: {
|
|
initShowroomCarroussel(){
|
|
console.log("startShowroomCarroussel");
|
|
this.showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item')
|
|
console.log('showrooms', this.showrooms);
|
|
|
|
for (var i = 0; i < this.showrooms.length; i++) {
|
|
if (i%2 === 0) {
|
|
this.showroomsOdd.push(this.showrooms[i])
|
|
}else{
|
|
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)`)
|
|
// Register event listener
|
|
mediaQuery.addListener(this.checkShowroomMode)
|
|
this.checkShowroomMode(mediaQuery)
|
|
|
|
// this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000);
|
|
// console.log('this.showroomInterval', this.showroomInterval);
|
|
// 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 (var i = 0; i < this.showrooms.length; i++) {
|
|
this.showrooms[i].classList.remove('active')
|
|
}
|
|
// 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
|
|
}
|
|
// in any case (re)launch the animation
|
|
this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000);
|
|
console.log('this.showroomInterval', this.showroomInterval);
|
|
this.switchShowroomCarroussel()
|
|
},
|
|
switchShowroomCarroussel(){
|
|
// console.log('switchShowroomCarroussel i', $elmts, i);
|
|
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{
|
|
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
|
|
|
|
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;
|
|
// find existing router route compared with link href
|
|
for (var i = 0; i < this.$router.options.routes.length; i++) {
|
|
if (this.$router.options.routes[i].path == e.originalTarget.pathname) {
|
|
if (e.originalTarget.pathname !== this.$route.path) {
|
|
path = e.originalTarget.pathname
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (path) {
|
|
this.$router.push({
|
|
path: path
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style>
|