add PageView layout component

2021-07-02 17:07:24 +02:00
parent cfc02993b8
commit f46eaf846a
2 changed files with 142 additions and 0 deletions
@@ -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>
@@ -1,3 +1,4 @@
 export { default as MapZoom } from './MapZoom'
 export { default as NodePreviewZone } from './NodePreviewZone'
 export { default as NodeBook } from './NodeBook'
+export { default as PageView } from './PageView'