bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fixed linked card image lazy load, fixed linked material openModal

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2021-08-04 18:26:50 +02:00
parent 8c0d992feb
commit bb2d915a36
10 changed files with 83 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
web/themes/custom/materiotheme/vuejs/components/cardMixins.js
View File

@@ -52,64 +52,54 @@ export default {
}
}
},
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 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 })
this.activateLazyLoad()
// }
}
// ,
// methods: {
// // used by ModalCard
// activateLazyLoad () {
// console.log('card activateLazyLoad', this.$options.name)
},
methods: {
// used by ModalCard
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)
// // },
// }
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 })
}
}
}