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

fixed all eslint errors and warning, compiled as PROD

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2021-03-31 18:42:05 +02:00
parent ae3c8f1234
commit 3042f97b29
46 changed files with 388 additions and 42514 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,10 +2,10 @@
export default {
directives: {
lazy: {
bind(img,binding){
// console.log('lazy bind', img, binding);
bind (img, binding) {
// console.log('lazy bind', img, binding)
// show only the first image
if(binding.value === 0){
if (binding.value === 0) {
img.setAttribute('src', img.getAttribute('data-src'))
img.removeAttribute('data-src')
img.classList.remove('lazy')
@@ -13,63 +13,63 @@ export default {
}
},
switcher: {
inserted(el,binding){
inserted (el, binding) {
// switch images on mousemove
el.addEventListener('mousemove', function(event) {
let figs = this.querySelectorAll('figure')
// console.log('mousemove', this, event, figs.length);
el.addEventListener('mousemove', function (event) {
const 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);
const delta = Math.floor(event.layerX / (this.clientWidth / figs.length))
// console.log('delta', delta)
figs.forEach((fig, index) => {
// console.log(index);
if(index == delta){
// console.log(index)
if (index === delta) {
// fig.style.display = "block"
fig.classList.remove("hide")
fig.classList.add("show")
}else{
fig.classList.remove('hide')
fig.classList.add('show')
} else {
// fig.style.display = "none"
fig.classList.remove("show")
fig.classList.add("hide")
fig.classList.remove('show')
fig.classList.add('hide')
}
})
})
}
}
},
mounted() {
mounted () {
// lazy load images on mouseover
console.log('card mounted', this.$options.name);
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})
this.$el.addEventListener('mouseover', function (event) {
const 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);
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);
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);
// console.log('forEach img',img)
img.setAttribute('src', img.getAttribute('data-src'))
img.removeAttribute('data-src')
img.classList.remove('lazy')
})
}, {once : true})
}, { once: true })
}
// deg2rad (deg) {
// return deg * (Math.PI / 180)