123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156 |
- <script>
- import Vue from 'vue'
- export default {
- props: ['html', 'full'], // 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, 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', '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)
- 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){
- // 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 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 (let 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>
|