<template> <article class="card card-thematique search-card"> <header> <a :href="item.path" @click.prevent="openThematique" > <h1>{{ item.title }}</h1> <h4>{{ item.short_description }}</h4> </a> </header> <section class="images" v-switcher> <figure v-for="(img, index) in item.images" :key="img.url" class="lazy" v-lazy="index" > <img :data-src="img.style_cardmedium_url" :title="img.title" /> <img class="blank" :src="blanksrc" @click.prevent="openThematique" > </figure> </section> <!-- <CoolLightBox :items="item.images" :index="lightbox_index" srcName="style_hd_url" :loop="true" @close="lightbox_index = null"> </CoolLightBox> --> </article> </template> <script> import { mapState, mapActions } from 'vuex' import cardMixins from 'vuejs/components/cardMixins' // import ModalCard from 'vuejs/components/Content/ModalCard' export default { name: "Card", props: ['item'], mixins: [cardMixins], // components: { // ModalCard // }, data() { return { blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`, // loadingFlag: false, lightbox_index: null, alias: this.item.path.replace(/^.*\/thematique\//g, '') } }, // computed: { // ...mapState({ // flagcolls: state => state.User.flagcolls // }) // }, methods: { // ...mapActions({ // flagUnflag: 'User/flagUnflag' // }), // flagIsActive(collid) { // // console.log("Card flagIsActive", // // this.item.id, // // this.flagcolls[collid].items, // // this.flagcolls[collid].items.indexOf(this.item.id) // // ); // // console.log(this.flagcolls[collid].items_uuids) // // return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1; // return this.flagcolls[collid].items.indexOf(this.item.id) !== -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, this.item) // if (!this.loadingFlag) { // let collid = e.target.getAttribute('collid'); // let isActive = this.flagIsActive(collid); // let action = isActive ? 'unflag' : 'flag'; // // console.log('collid', collid) // // console.log("this.item", this.item) // this.loadingFlag = collid; // this.flagUnflag({ action: action, id: this.item.id, collid: collid}) // .then(data => { // console.log("onFlagActionCard then", data) // this.loadingFlag = false; // }) // } // }, openThematique (e) { console.log('openThematique', e, this.alias) this.$router.push({ name:`thematique`, params: { alias:this.alias, id: this.item.id } // query: { id: this.item.id }, // meta: { id:this.item.id } }) } } } </script> <style lang="scss" scoped> </style>