LinkedMaterialCard.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <template>
  2. <article class="card linkedmaterialcard">
  3. <header
  4. @click.prevent="openModalCard"
  5. >
  6. <h1>{{ item.title }}</h1>
  7. <h4>{{ item.short_description }}</h4>
  8. <span v-if="isloggedin" class="ref">{{ item.reference }}</span>
  9. </header>
  10. <nav class="tools">
  11. </nav>
  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_linkedmaterialcard.url"
  21. :title="img.title"
  22. />
  23. <img
  24. class="blank"
  25. :src="blanksrc"
  26. @click.prevent="openModalCard"
  27. />
  28. </figure>
  29. </section>
  30. </article>
  31. </template>
  32. <script>
  33. import { mapState, mapActions } from 'vuex'
  34. import cardMixins from 'vuejs/components/cardMixins'
  35. import ModalCard from 'vuejs/components/Content/ModalCard'
  36. export default {
  37. name: "LinkedMaterialCard",
  38. props: ['item'],
  39. mixins: [cardMixins],
  40. // components: {
  41. // ModalCard
  42. // },
  43. data() {
  44. return {
  45. blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
  46. loadingItem: false
  47. }
  48. },
  49. computed: {
  50. ...mapState({
  51. isloggedin: state => state.User.isloggedin
  52. })
  53. },
  54. methods: {
  55. itemIsLoading(id) {
  56. return this.loadingItem
  57. },
  58. openModalCard (e) {
  59. console.log('openModalCard', this.isLoggedin);
  60. if(this.isloggedin){
  61. this.$modal.show(
  62. ModalCard,
  63. { item: this.item },
  64. {
  65. name: `modal-${this.item.id}`,
  66. draggable: false,
  67. maxWidth: 850,
  68. maxHeight: 610,
  69. width: '95%',
  70. height: '95%'
  71. }
  72. )
  73. }
  74. }
  75. }
  76. }
  77. </script>
  78. <style lang="scss" scoped>
  79. </style>