|
@@ -4,12 +4,14 @@
|
|
|
:class="['node-view-body-' + mode, 'node-view-body-' + type]"
|
|
|
>
|
|
|
<slot name="default">
|
|
|
- <div class="node-view-body-wrapper" v-html="content" />
|
|
|
+ <div class="node-view-body-wrapper" v-html="node.content" />
|
|
|
+
|
|
|
+ <fullscreen-modal v-if="image" :image="image" :id="'modal-image-' + node.id" />
|
|
|
|
|
|
<b-popover
|
|
|
- v-for="note in notes" :key="note.number"
|
|
|
+ v-for="note in node.notes" :key="note.number"
|
|
|
custom-class="footnote"
|
|
|
- :target="'note-' + note.number" :container="`node-${mode}-${nodeId}`"
|
|
|
+ :target="'note-' + note.number" :container="`node-${mode}-${node.id}`"
|
|
|
placement="top" :fallback-placement="['bottom', 'right', 'left']"
|
|
|
:triggers="['focus']"
|
|
|
>
|
|
@@ -49,13 +51,17 @@ export default {
|
|
|
},
|
|
|
|
|
|
props: {
|
|
|
- content: { type: String, default: null },
|
|
|
- notes: { type: Array, default: null },
|
|
|
- nodeId: { type: Number, required: true },
|
|
|
+ node: { type: Object, required: true },
|
|
|
type: { type: String, required: true },
|
|
|
mode: { type: String, required: true }
|
|
|
},
|
|
|
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ image: { id: '', url: '', alt: '' }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
methods: {
|
|
|
addFootnotes () {
|
|
|
const links = this.$el.querySelectorAll('a')
|
|
@@ -73,6 +79,25 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
|
|
|
+ mountMedias () {
|
|
|
+ const template = document.getElementById('expand-image-tmp')
|
|
|
+ this.$el.querySelectorAll('.node-view-body-wrapper img').forEach(img => {
|
|
|
+ const image = { id: img.dataset.entityUuid, url: img.src, alt: img.alt }
|
|
|
+
|
|
|
+ const clone = document.importNode(template.content, true)
|
|
|
+ const cloneImg = clone.querySelector('img')
|
|
|
+ cloneImg.setAttribute('src', image.url)
|
|
|
+ cloneImg.setAttribute('alt', image.alt)
|
|
|
+ cloneImg.setAttribute('id', image.id)
|
|
|
+ clone.querySelector('button').onclick = () => {
|
|
|
+ this.image = image
|
|
|
+ this.$bvModal.show('modal-image-' + this.node.id)
|
|
|
+ }
|
|
|
+
|
|
|
+ img.parentElement.replaceWith(clone)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
onFootnoteLinkClick (node, popoverBtnId) {
|
|
|
this.$root.$emit('bv::hide::popover', popoverBtnId)
|
|
|
this.$parent.$emit('open-node', getRelation(node))
|
|
@@ -80,9 +105,9 @@ export default {
|
|
|
},
|
|
|
|
|
|
created () {
|
|
|
- if (this.mode === 'view' && this.notes) {
|
|
|
+ if (this.mode === 'view' && this.node.notes) {
|
|
|
// Query partial data for linked nodes in notes
|
|
|
- const ids = this.notes.filter(note => (note.links)).reduce((ids, note) => {
|
|
|
+ const ids = this.node.notes.filter(note => (note.links)).reduce((ids, note) => {
|
|
|
return [...ids, ...note.links.map(link => link.id)]
|
|
|
}, [])
|
|
|
this.$store.dispatch('GET_NODES', { ids, dataLevel: 'initial' })
|
|
@@ -90,8 +115,12 @@ export default {
|
|
|
},
|
|
|
|
|
|
mounted () {
|
|
|
- if (this.mode === 'view' && this.notes) this.addFootnotes()
|
|
|
- this.$el.querySelectorAll('img, video, audio').forEach(elem => elem.parentElement.classList.add('media-container'))
|
|
|
+ if (this.mode === 'view') {
|
|
|
+ if (this.node.notes) {
|
|
|
+ this.addFootnotes()
|
|
|
+ }
|
|
|
+ this.mountMedias()
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|