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',

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

@@ -0,0 +1,93 @@
+<template>
+  <article class="card minicard">
+    <header>
+      <h1>{{ item.title }}</h1>
+      <span class="ref">{{ item.field_reference }}</span>
+    </header>
+    <nav class="tools">
+      <section class="tool flags">
+        <span class="mdi mdi-folder-remove-outline"/>
+      </section>
+    </nav>
+    <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>
+  </article>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+import cardMixins from 'vuejs/components/cardMixins'
+
+export default {
+  name: "MiniCard",
+  props: ['item'],
+  mixins: [cardMixins],
+  data() {
+    return {
+      blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
+      // loadingFlag: false
+    }
+  },
+  computed: {
+    // ...mapState({
+    //   flagcolls: state => state.User.flagcolls
+    // })
+  },
+  methods: {
+    // ...mapActions({
+    //   flag: 'User/flag',
+    //   unFlag: 'User/unFlag'
+    // }),
+    // flagIsActive(collid) {
+    //   // console.log(this.item.uuid);
+    //   // console.log(this.flagcolls[collid].items_uuids);
+    //   return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
+    // },
+    // flagIsLoading(collid) {
+    //   // console.log(this.item.uuid);
+    //   // console.log(this.flagcolls[collid].items_uuids);
+    //   return collid === this.loadingFlag;
+    // },
+    // onFlagActionCard (e) {
+    //   console.log("Card onFlagActionCard", e);
+    //   if (!this.loadingFlag) {
+    //     let collid = e.target.getAttribute('collid');
+    //     let isActive = this.flagIsActive(collid);
+    //     // console.log('collid', collid);
+    //     // console.log("this.item", this.item);
+    //     this.loadingFlag = collid;
+    //     if (isActive) {
+    //       this.unFlag({uuid: this.item.uuid, collid: collid})
+    //       .then(data => {
+    //         console.log("onFlagActionCard then", data);
+    //         this.loadingFlag = false;
+    //       })
+    //     }else{
+    //       this.flag({uuid: this.item.uuid, collid: collid})
+    //       .then(data => {
+    //         console.log("onFlagActionCard then", data);
+    //         this.loadingFlag = false;
+    //       })
+    //     }
+    //   }
+    // }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>