enfrancais-app/src/components/layouts/PageView.vue

<template lang="html">
  <div class="page" :class="'page-' + slug">
    <div class="btn-close-wrapper">
      <button-close @click="$emit('close')" />
    </div>

    <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 }
  },

  methods: {
    addFootnotes () {
      const links = this.$el.querySelectorAll('.page-wrapper a')
      links.forEach((link, i) => {
        const number = parseInt(link.hash.replace('#', ''))
        if (!isNaN(number) && this.page.notes.find(note => note.number === number)) {
          link.classList.add('page-footnote-link')
          link.id = `footnote-${this.slug}-${number}`
          link.setAttribute('href', 'javascript:;')
          link.dataset.number = number
          link.textContent = i + 1
          if (link.parentElement.nodeName === 'SUP') {
            link.parentElement.replaceWith(link)
          }
          link.onclick = this.onFootnoteLinkClick

          this.addFootnoteContent(link, number)
        }
      })
    },

    addFootnoteContent (link, i) {
      const noteContainer = document.createElement('DIV')
      noteContainer.classList.add('page-footnote-content')
      noteContainer.id = link.id + '-content'
      noteContainer.innerHTML = this.page.notes.find(note => note.number === i).content
      link.insertAdjacentElement('afterend', noteContainer)
    },

    onFootnoteLinkClick (e) {
      const container = document.getElementById(e.target.id + '-content')
      if (container) {
        container.classList.toggle('show')
      }
    }
  },

  mounted () {
    if (this.page.notes) this.addFootnotes()
  }
}
</script>

<style lang="scss">
.page {
  font-size: 1rem;
  position: relative;

  .btn-close-wrapper {
    position: sticky;
    z-index: 2;
    float: right;
    height: 0;
    right: 0;
    top: $node-view-spacer-sm-y;

    @include media-breakpoint-up($size-bp) {
      top: $node-view-spacer-y;
    }

    .btn-close {
      position: absolute;
      padding: 0.5rem;
      width: 2.25rem;
      height: 2.25rem;
      top: -.5rem;
      right: -.5rem;
      background-color: $white;
    }
  }

  @include media-breakpoint-up($size-bp) {
    font-size: 1.5rem;
  }

  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;

    @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>