fixed linked card image lazy load, fixed linked material openModal

web/themes/custom/materiotheme/vuejs/components/Content/LinkedMaterialCard.vue

@@ -14,10 +14,10 @@
       <figure
         v-for="(img, index) in item.images"
         :key="img.url"
+        class="lazy"
+        v-lazy="index"
       >
         <img
-          class="lazy"
-          v-lazy="index"
           :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'
+          }
+        )
       }
     }
   }

web/themes/custom/materiotheme/vuejs/components/cardMixins.js

@@ -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')
+    this.activateLazyLoad()
+    // }
+  },
+  methods: {
+    // used by ModalCard
+    activateLazyLoad () {
+      console.log('card activateLazyLoad', this.$options.name)
 
-        // 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?')
-        // }
+      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')
 
-        img.setAttribute('src', src)
-        // img.removeAttribute('data-src')
-        // img.classList.remove('lazy')
-      })
-    }, { once: true })
-    // }
-  }
-  // ,
-  // methods: {
-  //   // used by ModalCard
-  //   activateLazyLoad () {
-  //     console.log('card activateLazyLoad', this.$options.name)
+          // 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?')
+          // }
 
-  //     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)
-  //   // },
-  // }
+          img.setAttribute('src', src)
+          // img.removeAttribute('data-src')
+          // img.classList.remove('lazy')
+        })
+      }, { once: true })
+    }
+  }
 }