<script> import Vue from 'vue' import productsMixins from 'vuejs/components/productsMixins' export default { props: ['html', 'full'], // get the html from parent with props mixins: [productsMixins], 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, full', this.full) // 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', this.$t('default.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))) console.log('compileTemplate, full', this.full) if (this.full) { 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.length, this.showrooms) if (!this.showrooms.length) { return } // console.log('TEST') for (let 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){ console.log('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++) { 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') 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) // record the target before event finish the propagation as currentTarget will be deleted after let target = e.currentTarget console.log('target', target) if (target.protocol == "mailto:") { // https://stackoverflow.com/questions/10172499/mailto-using-javascript window.location.href = target.href }else { let path = null; let article = null; // if we have an article link with appropriate data attributes // 'data-id' // 'data-entity-type' // 'data-bundle' if (target.dataset.entityType == 'node' && target.dataset.bundle == 'article') { let matches = target.pathname.match(/^\/\w{2}\/[^\/]+\/(.*)/i) console.log('matches', matches) article = { nid: target.dataset.id, alias: matches[1] } } else { // find existing router route compared with link href let pathbase = target.pathname.match(/^(\/\w{2}\/[^\/]+)\/?.*/i) console.log('pathbase', pathbase) for (let i = 0; i < this.$router.options.routes.length; i++) { if (this.$router.options.routes[i].path == pathbase[1]) { if (target.pathname !== this.$route.path) { path = target.pathname } break } } } if (article) { this.$router.push({ name:`article`, params: { alias: article.alias, id: article.nid } }) } else if (path) { this.$router.push({ path: path }) } } }, onClickFieldLabel(e, part){ console.log("onClickFieldLabel", part, e, this.$router, this.$route) } }, watch: { html: function(val) { // console.log('html prop changed', val) this.compileTemplate() } } } </script> <style lang="scss" scoped> </style>