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

117 lines
3.2 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
2021-03-03 17:55:32 +01:00
v-for="(img, index) in item.images"
: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.prevent="openThematique"
>
</figure>
</section>
<!-- <CoolLightBox
2021-03-03 17:55:32 +01:00
:items="item.images"
: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,
2021-03-03 17:55:32 +01:00
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)
2020-12-25 17:37:15 +01:00
this.$router.push({
name:`thematique`,
params: { alias:this.alias, id: this.item.id }
// query: { id: this.item.id },
// meta: { id:this.item.id }
2020-12-25 17:37:15 +01:00
})
}
}
}
</script>
<style lang="scss" scoped>
</style>