|
@@ -0,0 +1,141 @@
|
|
|
+<template lang="html">
|
|
|
+ <div class="page wh-100" :class="'page-' + slug">
|
|
|
+ <div class="page-wrapper" v-html="page.content" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'PageView',
|
|
|
+
|
|
|
+ props: {
|
|
|
+ page: { type: Object, default: undefined },
|
|
|
+ slug: { type: String, required: true }
|
|
|
+ },
|
|
|
+
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ links: undefined
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ addFootnotes () {
|
|
|
+ const links = this.$el.querySelectorAll('.page-wrapper a')
|
|
|
+ console.log('addFootnotes', links)
|
|
|
+ links.forEach((link, i) => {
|
|
|
+ const number = parseInt(link.hash.replace('#', ''))
|
|
|
+ if (!isNaN(number)) {
|
|
|
+ link.classList.add('page-footnote-link')
|
|
|
+ link.id = `footnote-${this.slug}-${number}`
|
|
|
+ link.setAttribute('href', 'javascript:;')
|
|
|
+ link.dataset.number = number
|
|
|
+ if (link.parentElement.nodeName === 'SUP') {
|
|
|
+ link.parentElement.replaceWith(link)
|
|
|
+ }
|
|
|
+ link.onclick = this.onFootnoteLinkClick
|
|
|
+
|
|
|
+ this.addFootnoteContent(link, i)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ this.links = links
|
|
|
+ },
|
|
|
+
|
|
|
+ addFootnoteContent (link, i) {
|
|
|
+ const noteContainer = document.createElement('DIV')
|
|
|
+ noteContainer.classList.add('page-footnote-content')
|
|
|
+ noteContainer.id = link.id + '-content'
|
|
|
+ noteContainer.innerHTML = this.page.notes[i].content
|
|
|
+ link.insertAdjacentElement('afterend', noteContainer)
|
|
|
+ },
|
|
|
+
|
|
|
+ onFootnoteLinkClick (e) {
|
|
|
+ document.getElementById(e.target.id + '-content').classList.toggle('show')
|
|
|
+ console.log('onFootnoteLinkClick', e.target.dataset.number, e)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted () {
|
|
|
+ console.log('mounted', this.page.notes)
|
|
|
+ if (this.page.notes) this.addFootnotes()
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.page {
|
|
|
+ padding: $node-view-spacer-sm-y $node-view-spacer-sm-x;
|
|
|
+
|
|
|
+ @include media-breakpoint-up($size-bp) {
|
|
|
+ padding: $node-view-spacer-y $node-view-spacer-x;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin-bottom: 1em;
|
|
|
+ }
|
|
|
+
|
|
|
+ blockquote {
|
|
|
+ margin: 0 0 50px 50px;
|
|
|
+ font-style: italic;
|
|
|
+
|
|
|
+ @include media-breakpoint-up($size-bp) {
|
|
|
+ margin: 50px 0 110px 180px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-footnote-link {
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ background-color: $black;
|
|
|
+ color: $white;
|
|
|
+ font-weight: $font-weight-bold;
|
|
|
+ font-size: 0.8em;
|
|
|
+ font-style: normal;
|
|
|
+ text-decoration: none;
|
|
|
+ border-radius: 1em;
|
|
|
+ padding: 0 .5em;
|
|
|
+ min-width: 1.25em;
|
|
|
+ max-height: 1.4em;
|
|
|
+ margin: 0 .2em;
|
|
|
+
|
|
|
+ &:hover,
|
|
|
+ &:active {
|
|
|
+ color: $white;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-footnote-content {
|
|
|
+ background-color: $black;
|
|
|
+ color: $white;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ font-style: normal;
|
|
|
+ padding: $node-view-spacer-sm-y $node-view-spacer-sm-x;
|
|
|
+ margin: $node-view-spacer-sm-y 0;
|
|
|
+
|
|
|
+ @include media-breakpoint-up($size-bp) {
|
|
|
+ padding: $node-view-spacer-y $node-view-spacer-x;
|
|
|
+ margin: $node-view-spacer-y 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ // @include media-breakpoint-up(lg) {
|
|
|
+ // max-width: 50%;
|
|
|
+ // }
|
|
|
+
|
|
|
+ &:not(.show) {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ p:last-of-type {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ blockquote {
|
|
|
+ margin: 0 0 1em 2em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|