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

117 lines
3.1 KiB
Vue
Raw Normal View History

<template>
<article class="card card-thematique search-card">
2020-12-25 17:37:15 +01:00
<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.visuels"
:key="img.url"
>
<img
class="lazy"
v-lazy="index"
2020-12-25 17:37:15 +01:00
: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"
2020-12-25 17:37:15 +01:00
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,
2020-12-25 17:37:15 +01:00
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);
2020-12-25 17:37:15 +01:00
this.$router.push({
name:`thematique`,
params: { alias:this.alias }
// query: { nid: this.item.nid }
// meta: { uuid:this.item.uuid },
})
}
}
}
</script>
<style lang="scss" scoped>
</style>