CardThematique.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <template>
  2. <article class="card card-thematique search-card">
  3. <header>
  4. <a
  5. :href="item.path"
  6. @click.prevent="openThematique"
  7. >
  8. <h1>{{ item.title }}</h1>
  9. <h4>{{ item.short_description }}</h4>
  10. </a>
  11. </header>
  12. <section class="images" v-switcher>
  13. <figure
  14. v-for="(img, index) in item.images"
  15. :key="img.url"
  16. >
  17. <img
  18. class="lazy"
  19. v-lazy="index"
  20. :data-src="img.style_cardmedium_url"
  21. :title="img.title"
  22. />
  23. <img
  24. class="blank"
  25. :src="blanksrc"
  26. @click.prevent="openThematique"
  27. >
  28. </figure>
  29. </section>
  30. <!-- <CoolLightBox
  31. :items="item.images"
  32. :index="lightbox_index"
  33. srcName="style_hd_url"
  34. :loop="true"
  35. @close="lightbox_index = null">
  36. </CoolLightBox> -->
  37. </article>
  38. </template>
  39. <script>
  40. import { mapState, mapActions } from 'vuex'
  41. import cardMixins from 'vuejs/components/cardMixins'
  42. // import ModalCard from 'vuejs/components/Content/ModalCard'
  43. export default {
  44. name: "Card",
  45. props: ['item'],
  46. mixins: [cardMixins],
  47. // components: {
  48. // ModalCard
  49. // },
  50. data() {
  51. return {
  52. blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
  53. // loadingFlag: false,
  54. lightbox_index: null,
  55. alias: this.item.path.replace(/^.*\/thematique\//g, '')
  56. }
  57. },
  58. // computed: {
  59. // ...mapState({
  60. // flagcolls: state => state.User.flagcolls
  61. // })
  62. // },
  63. methods: {
  64. // ...mapActions({
  65. // flagUnflag: 'User/flagUnflag'
  66. // }),
  67. // flagIsActive(collid) {
  68. // // console.log("Card flagIsActive",
  69. // // this.item.id,
  70. // // this.flagcolls[collid].items,
  71. // // this.flagcolls[collid].items.indexOf(this.item.id)
  72. // // );
  73. // // console.log(this.flagcolls[collid].items_uuids);
  74. // // return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
  75. // return this.flagcolls[collid].items.indexOf(this.item.id) !== -1;
  76. // },
  77. // flagIsLoading(collid) {
  78. // // console.log(this.item.uuid);
  79. // // console.log(this.flagcolls[collid].items_uuids);
  80. // return collid === this.loadingFlag;
  81. // },
  82. // onFlagActionCard (e) {
  83. // console.log("Card onFlagActionCard", e, this.item);
  84. // if (!this.loadingFlag) {
  85. // let collid = e.target.getAttribute('collid');
  86. // let isActive = this.flagIsActive(collid);
  87. // let action = isActive ? 'unflag' : 'flag';
  88. // // console.log('collid', collid);
  89. // // console.log("this.item", this.item);
  90. // this.loadingFlag = collid;
  91. // this.flagUnflag({ action: action, id: this.item.id, collid: collid})
  92. // .then(data => {
  93. // console.log("onFlagActionCard then", data);
  94. // this.loadingFlag = false;
  95. // })
  96. // }
  97. // },
  98. openThematique (e) {
  99. console.log('openThematique', e, this.alias);
  100. this.$router.push({
  101. name:`thematique`,
  102. params: { alias:this.alias, id: this.item.id }
  103. // query: { id: this.item.id },
  104. // meta: { id:this.item.id }
  105. })
  106. }
  107. }
  108. }
  109. </script>
  110. <style lang="scss" scoped>
  111. </style>