materio-d8/web/themes/custom/materiotheme/vuejs/components/cardMixins.js

// https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266/5
export default {
  directives: {
    lazy: {
      bind(img,binding){
        // console.log('lazy bind', img, binding);
        // show only the first image
        if(binding.value === 0){
          img.setAttribute('src', img.getAttribute('data-src'))
          img.removeAttribute('data-src')
          img.classList.remove('lazy')
        }
      }
    },
    switcher: {
      inserted(el,binding){
        // switch images on mousemove
        el.addEventListener('mousemove', function(event) {
          let figs = this.querySelectorAll('figure')
          // console.log('mousemove', this, event, figs.length);
          // let len = figs.length
          // let w = this.clientWidth;
          // let g = w / len;
          // let delta = Math.floor(event.layerX / g)
          let delta = Math.floor(event.layerX / (this.clientWidth / figs.length))
          // console.log('delta', delta);
          figs.forEach((fig, index) => {
            // console.log(index);
            if(index == delta){
              // fig.style.display = "block"
              fig.classList.remove("hide")
              fig.classList.add("show")
            }else{
              // fig.style.display = "none"
              fig.classList.remove("show")
              fig.classList.add("hide")
            }
          })
        })
      }
    }
  },
  mounted() {
    // lazy load images on mouseover
    console.log('card mounted', this.$options.name);
    // if (this.$options.name ==! 'ModalCard') {
      this.$el.addEventListener('mouseover', function(event) {
        let imgs = this.querySelectorAll('.images figure img.lazy')
        console.log('mousemove', this, imgs);
        imgs.forEach((img) => {
          // console.log('forEach img',img);
          img.setAttribute('src', img.getAttribute('data-src'))
          img.removeAttribute('data-src')
          img.classList.remove('lazy')
        })
      }, {once : true})
    // }
  },
  methods: {
    activateLazyLoad () {
      console.log('card activateLazyLoad', this.$options.name);

      this.$el.addEventListener('mousemove', function(event) {
        let imgs = this.querySelectorAll('.images figure img.lazy')
        console.log('mousemove', this, imgs);
        imgs.forEach((img) => {
          // console.log('forEach img',img);
          img.setAttribute('src', img.getAttribute('data-src'))
          img.removeAttribute('data-src')
          img.classList.remove('lazy')
        })
      }, {once : true})
    }
    // deg2rad (deg) {
    //   return deg * (Math.PI / 180)
    // },
  }
}