made card image switcher

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

@@ -9,7 +9,7 @@
         {{ searchinfos }}
       </aside>
       <ul>
-        <li v-for="item in items" v-bind:key="item.nid">
+        <li v-for="item in items" v-bind:key="item.uuid">
           <Card :item="item"/>
         </li>
       </ul>

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

@@ -4,8 +4,19 @@
       <h1>{{ item.title }}</h1>
       <h4>{{ item.description }}</h4>
     </header>
-    <section class=images>
-      <img class="images" v-for="img in item.images" :src="img.url" :title="img.title"/>
+    <section class="images" v-switcher>
+      <figure
+        v-for="(img, index) in item.images"
+        :key="img.url"
+      >
+        <img
+          class="lazy"
+          v-lazy="index"
+          :data-src="img.url"
+          :title="img.title"
+        />
+        <img class="blank" :src="blanksrc">
+      </figure>
     </section>
   </div>
 </template>
@@ -15,9 +26,59 @@
 export default {
   name: "Card",
   props: ['item'],
-  data: () => ({
-
-  })
+  data() {
+    return {
+      blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`
+    }
+  },
+  directives: {
+    lazy: {
+      bind(img,binding){
+        // console.log('lazy bind', img, binding);
+        if(binding.value === 0){
+          img.setAttribute('src', img.getAttribute('data-src'))
+          img.removeAttribute('data-src')
+          img.classList.remove('lazy')
+        }
+      }
+    },
+    switcher: {
+      inserted(el,binding){
+        // switch images on mousemove
+        el.addEventListener('mousemove', function(event) {
+          let 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);
+          figs.forEach((fig, index) => {
+            // console.log(index);
+            if(index == delta){
+              fig.style.display = "block"
+            }else{
+              fig.style.display = "none"
+            }
+          })
+        })
+      }
+    }
+  },
+  mounted() {
+    // lazy load images on mouseover
+    this.$el.addEventListener('mouseover', function(event) {
+      let imgs = this.querySelectorAll('.images figure img.lazy')
+      console.log('mouseover', 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})
+  }
 }
 
 </script>

web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

@@ -40,6 +40,14 @@ export default {
       this.autocomplete = ui.item.value
     }
   },
+  directives: {
+    focus: {
+      // directive definition
+      inserted: function (el) {
+        el.focus()
+      }
+    }
+  },
   beforeMount() {
     // console.log('SearchForm beforeMount');
     if(this._props.form){
@@ -70,8 +78,8 @@ export default {
     Drupal.attachBehaviors(this.$el);
     // get the search input
     let $input = this.$el.querySelector('#edit-search')
-    // focus on input
-    $input.focus()
+    // // focus on input
+    // $input.focus()
     // Catch the jquery ui events for autocmplete widget
     jQuery($input).on('autocompleteselect', this.onAutoCompleteSelect);
   },