|
@@ -1,23 +1,66 @@
|
|
|
<template lang="html">
|
|
|
<div class="page" :class="'page-' + slug">
|
|
|
- <div class="btn-close-wrapper">
|
|
|
+ <div v-if="!noClose" class="btn-close-wrapper">
|
|
|
<button-close @click="$emit('close')" />
|
|
|
</div>
|
|
|
|
|
|
<div class="page-wrapper" v-html="page.content" />
|
|
|
+
|
|
|
+ <div class="page-footnotes" v-if="page.notes">
|
|
|
+ <div
|
|
|
+ v-for="note in page.notes" :key="`note-${note.number}`"
|
|
|
+ :id="`note-${note.number}`"
|
|
|
+ >
|
|
|
+ <div v-if="note.content" class="footnote-content" v-html="note.content" />
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-if="note.links"
|
|
|
+ class="footnote-child-list"
|
|
|
+ >
|
|
|
+ <node-view-title
|
|
|
+ v-for="link in note.links" :key="link.id"
|
|
|
+ :node="getLinkObj(link)"
|
|
|
+ link
|
|
|
+ @open-node="onFootnoteLinkClick(link)"
|
|
|
+ >
|
|
|
+ <dot-button
|
|
|
+ :variant="link.variant"
|
|
|
+ class="mr-2"
|
|
|
+ active
|
|
|
+ >
|
|
|
+ {{ $t('variants.' + link.variant) }}
|
|
|
+ </dot-button>
|
|
|
+ </node-view-title>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { getRelation } from '@/store/utils'
|
|
|
+import { NodeViewTitle } from '@/components/nodes'
|
|
|
+
|
|
|
export default {
|
|
|
name: 'PageView',
|
|
|
|
|
|
+ components: {
|
|
|
+ NodeViewTitle
|
|
|
+ },
|
|
|
+
|
|
|
props: {
|
|
|
page: { type: Object, default: undefined },
|
|
|
- slug: { type: String, required: true }
|
|
|
+ slug: { type: String, required: true },
|
|
|
+ noClose: { type: Boolean, default: false }
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
+ getLinkObj (link) {
|
|
|
+ if (link.preTitle || link.italTitle) return link
|
|
|
+ if (link.type === 'prod' && link.parents && link.parents.length) return link.parents[0]
|
|
|
+ return link
|
|
|
+ },
|
|
|
+
|
|
|
addFootnotes () {
|
|
|
const links = this.$el.querySelectorAll('.page-wrapper a')
|
|
|
links.forEach((link, i) => {
|
|
@@ -31,7 +74,7 @@ export default {
|
|
|
if (link.parentElement.nodeName === 'SUP') {
|
|
|
link.parentElement.replaceWith(link)
|
|
|
}
|
|
|
- link.onclick = this.onFootnoteLinkClick
|
|
|
+ link.onclick = this.onFootnoteClick
|
|
|
|
|
|
this.addFootnoteContent(link, number)
|
|
|
}
|
|
@@ -39,23 +82,35 @@ export default {
|
|
|
},
|
|
|
|
|
|
addFootnoteContent (link, i) {
|
|
|
+ const note = document.getElementById(`note-${i}`)
|
|
|
const noteContainer = document.createElement('DIV')
|
|
|
- noteContainer.classList.add('page-footnote-content')
|
|
|
+ noteContainer.classList.add('footnote')
|
|
|
noteContainer.id = link.id + '-content'
|
|
|
- noteContainer.innerHTML = this.page.notes.find(note => note.number === i).content
|
|
|
+ noteContainer.appendChild(note)
|
|
|
+ // noteContainer.innerHTML = this.page.notes.find(note => note.number === i).content
|
|
|
link.insertAdjacentElement('afterend', noteContainer)
|
|
|
},
|
|
|
|
|
|
- onFootnoteLinkClick (e) {
|
|
|
+ onFootnoteClick (e) {
|
|
|
const container = document.getElementById(e.target.id + '-content')
|
|
|
if (container) {
|
|
|
container.classList.toggle('show')
|
|
|
}
|
|
|
+ },
|
|
|
+
|
|
|
+ onFootnoteLinkClick (node) {
|
|
|
+ this.$store.dispatch('OPEN_NODE', getRelation(node))
|
|
|
}
|
|
|
},
|
|
|
|
|
|
mounted () {
|
|
|
- if (this.page.notes) this.addFootnotes()
|
|
|
+ if (this.page.notes) {
|
|
|
+ const ids = this.page.notes.filter(note => (note.links)).reduce((ids, note) => {
|
|
|
+ return [...ids, ...note.links.map(link => link.id)]
|
|
|
+ }, [])
|
|
|
+ this.$store.dispatch('GET_NODES', { ids, dataLevel: 'initial' })
|
|
|
+ this.addFootnotes()
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -110,6 +165,16 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 90vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-footnotes {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
&-footnote-link {
|
|
|
display: inline-block;
|
|
|
text-align: center;
|
|
@@ -122,7 +187,7 @@ export default {
|
|
|
border-radius: 1em;
|
|
|
padding: 0 .5em;
|
|
|
min-width: 1.25em;
|
|
|
- max-height: 1.4em;
|
|
|
+ max-height: 1.5em;
|
|
|
margin: 0 .2em;
|
|
|
|
|
|
&:hover,
|
|
@@ -132,7 +197,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- &-footnote-content {
|
|
|
+ .footnote {
|
|
|
background-color: $black;
|
|
|
color: $white;
|
|
|
font-size: 1.5rem;
|
|
@@ -148,6 +213,14 @@ export default {
|
|
|
// @include media-breakpoint-up(lg) {
|
|
|
// max-width: 50%;
|
|
|
// }
|
|
|
+ &-child-list {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-content + .footnote-child-list {
|
|
|
+ margin-top: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
&:not(.show) {
|
|
|
display: none;
|
|
@@ -161,5 +234,15 @@ export default {
|
|
|
margin: 0 0 1em 2em;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ &.small {
|
|
|
+ font-size: 1rem;
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+ .footnote {
|
|
|
+ font-size: 1rem;
|
|
|
+ padding: $node-card-spacer-y $node-card-spacer-x;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|