109 lines
3.9 KiB
JavaScript
109 lines
3.9 KiB
JavaScript
// 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('directive 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', figs.length, this, event)
|
|
// let len = figs.length
|
|
// let w = this.clientWidth;
|
|
// let g = w / len;
|
|
// let delta = Math.floor(event.layerX / g)
|
|
// console.log(event.offsetX, this.clientWidth, figs.length)
|
|
// console.log(event.offsetX / (this.clientWidth / figs.length))
|
|
let delta = Math.floor(event.offsetX / (this.clientWidth / figs.length))
|
|
delta = delta < 0 ? 0 : delta >= figs.length ? figs.length - 1 : delta
|
|
// 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.activateLazyLoad()
|
|
// }
|
|
},
|
|
updated () {
|
|
// lazy load images on mouseover
|
|
console.log('card updated', this.$options.name)
|
|
// if (this.$options.name ==! 'ModalCard') {
|
|
this.activateLazyLoad()
|
|
// }
|
|
},
|
|
methods: {
|
|
// used by ModalCard
|
|
activateLazyLoad () {
|
|
console.log('card activateLazyLoad', this.$options.name)
|
|
|
|
this.$el.addEventListener('mouseover', function (event) {
|
|
const figures = this.querySelectorAll('.images figure.lazy:not(.loaded):not(.loading)')
|
|
console.log('mouseover', this, figures)
|
|
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 })
|
|
}
|
|
}
|
|
}
|