materio-d9/web/themes/custom/materiotheme/vuejs/components/Content/CardThematique.vue

116 lines
3.0 KiB
Vue

<template>
<article class="card card-thematique search-card">
<header
@click="openThematique"
>
<h1>{{ item.title }}</h1>
<h4>{{ item.short_description }}</h4>
</header>
<section class="images" v-switcher>
<figure
v-for="(img, index) in item.visuels"
:key="img.url"
>
<img
class="lazy"
v-lazy="index"
:data-src="img.style_cardmedium.url"
:title="img.title"
/>
<img
class="blank"
:src="blanksrc"
@click="lightbox_index = index"
>
</figure>
</section>
<CoolLightBox
:items="item.visuels"
:index="lightbox_index"
srcName="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
}
},
// 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.$modal.show(
// ModalCard,
// { item: this.item },
// {
// draggable: true,
// width: '850px',
// height: '610px'
// }
// )
}
}
}
</script>
<style lang="scss" scoped>
</style>