big refactoring, opening flagcollection (folder) on the left of main-content

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

@@ -1,5 +1,5 @@
 <template>
-  <article class="card">
+  <article class="card search-card">
     <header>
       <h1>{{ item.title }}</h1>
       <h4>{{ item.field_short_description }}</h4>
@@ -45,10 +45,12 @@
 
 <script>
 import { mapState, mapActions } from 'vuex'
+import cardMixins from 'vuejs/components/cardMixins'
 
 export default {
   name: "Card",
   props: ['item'],
+  mixins: [cardMixins],
   data() {
     return {
       blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
@@ -60,54 +62,6 @@ export default {
       flagcolls: state => state.User.flagcolls
     })
   },
-  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})
-  },
   methods: {
     ...mapActions({
       flag: 'User/flag',