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 (figure, binding) {
        // console.log('lazy bind', figure, binding)
        // show only the first image
        if (binding.value === 0) {
          const img = figure.querySelector('img:not(.blank)')
          figure.classList.add('loading')
          img.addEventListener('load', function (e) {
            console.log('img loaded', e)
            figure.classList.remove('loading')
            figure.classList.add('loaded')
          })
          img.addEventListener('error', function (e) {
            console.error('img ERROR', e)
            e.target.classList.remove('loading')
            e.target.classList.add('error')
          })
          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) {
          const figs = this.querySelectorAll('figure.loaded')
          // 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)
          const 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) {
      const figures = this.querySelectorAll('.images figure.lazy:not(.loaded):not(.loading)')
      // console.log('mousemove', this, imgs)
      figures.forEach((figure, index) => {
        const img = figure.querySelector('img:not(.blank)')
        // console.log('forEach img',img)
        img.classList.add('loading')
        img.addEventListener('load', function (e) {
          // console.log('img loaded', e)
          figure.classList.remove('loading')
          figure.classList.add('loaded')
        })
        img.addEventListener('error', function (e) {
          console.error('img ERROR', figure, e)
        })
        const src = img.getAttribute('data-src')

        // for debug purpose
        console.log(figures.length, index)
        // let src = img.getAttribute('data-src')
        // if (index > 0 && index < figures.length - 1) {
        //   src = img.getAttribute('data-src').replace('?', '/bad?')
        // }

        img.setAttribute('src', src)
        // img.removeAttribute('data-src')
        // img.classList.remove('lazy')
      })
    }, { once: true })
    // }
  }
  // ,
  // methods: {
  //   // not used
  //   activateLazyLoad () {
  //     console.log('card activateLazyLoad', this.$options.name)

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