79 lines
2.6 KiB
JavaScript
79 lines
2.6 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(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)
|
|
// },
|
|
}
|
|
}
|