142 lines
3.1 KiB
Vue
142 lines
3.1 KiB
Vue
<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>
|