From d8131ef96305d12c136c34ba5c9da4a8d98f6541 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 6 Jul 2021 20:40:42 +0200
Subject: [PATCH] add NodeViewFigure component

---
 src/components/nodes/NodeViewFigure.vue | 73 +++++++++++++++++++++++++
 src/components/nodes/index.js           |  1 +
 2 files changed, 74 insertions(+)
 create mode 100644 src/components/nodes/NodeViewFigure.vue

diff --git a/src/components/nodes/NodeViewFigure.vue b/src/components/nodes/NodeViewFigure.vue
new file mode 100644
index 0000000..566c226
--- /dev/null
+++ b/src/components/nodes/NodeViewFigure.vue
@@ -0,0 +1,73 @@
+<template>
+  <figure class="node-view-figure mt-2 mb-4">
+    <div class="node-view-img-wrapper">
+      <img :src="image.url" :alt="image.alt">
+
+      <button-expand @click="onImageExpand" v-b-modal="'modal-image-' + node.id" />
+      <b-button variant="creation" class="btn-shadow btn-artwork" @click="onCreationClick">
+        {{ $t('text.read-artwork') }}
+      </b-button>
+    </div>
+
+    <figcaption class="mt-3">
+      <p class="m-0">
+        <strong>{{ toCommaList(node.authors) }}</strong>,
+        <em v-html="' ' + trim(node.title)" />
+        <br class="d-none d-md-inline">
+        {{ node.date.start }}
+      </p>
+    </figcaption>
+  </figure>
+</template>
+
+<script>
+import { trim, toCommaList } from '@/helpers/common'
+
+export default {
+  name: 'NodeViewFigure',
+
+  props: {
+    node: { type: Object, required: true }
+  },
+
+  data () {
+    return {
+      image: undefined
+    }
+  },
+
+  methods: {
+    trim,
+    toCommaList,
+
+    onImageExpand () {
+      this.$emit('expand-image', this.image)
+    },
+
+    onCreationClick () {
+      this.$store.dispatch('OPEN_CREATION', this.node.id)
+    }
+  },
+
+  created () {
+    if (this.node.images && this.node.images.length) {
+      const { url, alt, id } = this.node.images[0]
+      this.image = { alt, id, url: url.replace('api', 'api/sites/default/files') }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.node-view-figure {
+  .btn-artwork {
+    position: absolute;
+    right: $node-view-spacer-sm-x;
+    bottom: $node-view-spacer-sm-y;
+  }
+
+  img {
+    max-width: 100%;
+  }
+}
+</style>
diff --git a/src/components/nodes/index.js b/src/components/nodes/index.js
index 485a6e0..f4be424 100644
--- a/src/components/nodes/index.js
+++ b/src/components/nodes/index.js
@@ -1,3 +1,4 @@
+export { default as NodeViewFigure } from './NodeViewFigure'
 export { default as NodeViewChildList } from './NodeViewChildList'
 export { default as NodeViewChildListGroup } from './NodeViewChildListGroup'
 export { default as NodeViewTitle } from './NodeViewTitle'