<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.compileTemplate() } }, render(h) { if(!this.template){ return h('span', 'Loading ...') }else{ return this.template.render.call(this) } }, mounted(){ // this.initShowroomCarroussel() }, methods: { 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"); 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), 15000); 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 }) } }, onClickFieldLabel(e){ console.log("onClickFieldLabel", e, this.$router, this.$route); } }, watch: { html: function(val) { console.log('html prop changed', val) this.compileTemplate() } } } </script> <style lang="scss" scoped> </style>