materio-d8/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue

<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>