materio-d8/web/themes/custom/materiotheme/vuejs/components/Pages/Home.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.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>