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"
-      >
-        <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'
+          }
+        )
       }
     }
   }

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

@@ -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)
-  //   // },
-  // }
+  }
 }