fixed linked card image lazy load, fixed linked material openModal

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -14,10 +14,10 @@
<figure
v-for="(img, index) in item.images"
:key="img.url"
>
<img
class="lazy"
v-lazy="index"
>
<img
:data-src="img.style_linkedmaterialcard.url"
:title="img.title"
/>
@ -63,16 +63,46 @@ export default {
if (this.isloggedin) {
this.$modal.show(
ModalCard,
{ item: this.item },
{
item: this.item,
// not really an event
// more a callback function passed as prop to the component
addNoteId:(id) => {
// no needs to refresh the entire item via searchresults
// plus if we are in article, there is not searchresults
// this.refreshItem({id: this.item.id})
// instead create the note id directly
this.item.note = {id: id}
}
},
{
name: `modal-${this.item.id}`,
draggable: false,
maxWidth: 850,
maxHeight: 610,
classes: "vm--modale-card",
// this does not work
// adaptative: true,
// maxWidth: 850,
// maxHeight: 610,
width: '95%',
height: '95%'
}
)
} else {
this.$modal.show(
MemberWarning,
{},
{
// name: `modal-${this.item.id}`,
draggable: false,
// classes: "vm--modale-card",
// this does not work
// adaptative: true,
// maxWidth: 850,
// maxHeight: 610,
width: '400px',
height: '250px'
}
)
}
}
}

View File

@ -52,10 +52,25 @@ 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.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('mousemove', this, imgs)
@ -85,31 +100,6 @@ export default {
// img.classList.remove('lazy')
})
}, { once: true })
// }
}
// ,
// 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)
// // },
// }
}
}