enfrancais-app/src/components/nodes/NodeViewBody.vue

<template>
  <div
    class="node-view-body"
    :class="['node-view-body-' + mode, 'node-view-body-' + type]"
  >
    <slot name="default">
      <div class="node-view-body-wrapper" v-html="content" />

      <b-popover
        v-for="note in notes" :key="note.number"
        custom-class="footnote"
        :target="'note-' + note.number" :container="`node-${mode}-${nodeId}`"
        placement="top" :fallback-placement="['bottom', 'right', 'left']"
        :triggers="['focus']"
      >
        <div class="footnote-content" v-html="note.content" />

        <div class="footnote-child-list" v-if="note.links">
          <node-view-title
            v-for="link in note.links" :key="link.id"
            :node="link.parents && link.parents.length ? link.parents[0] : link"
            link
            @open-node="onFootnoteLinkClick(link, 'note-' + note.number)"
          >
            <dot-button
              :variant="link.variant"
              class="mr-2"
              active
            >
              {{ $t('variants.' + link.variant) }}
            </dot-button>
          </node-view-title>
        </div>
      </b-popover>
    </slot>
  </div>
</template>

<script>
import { getRelation } from '@/store/utils'
import { NodeViewTitle } from '@/components/nodes'


export default {
  name: 'NodeViewBody',

  components: {
    NodeViewTitle
  },

  props: {
    content: { type: String, default: null },
    notes: { type: Array, default: null },
    nodeId: { type: Number, required: true },
    type: { type: String, required: true },
    mode: { type: String, required: true }
  },

  methods: {
    addFootnotes () {
      const links = this.$el.querySelectorAll('a')
      links.forEach((link, i) => {
        const number = parseInt(link.hash.replace('#', ''))
        if (!isNaN(number)) {
          link.classList.add('footnote-link')
          link.id = 'note-' + number
          link.innerHTML = link.textContent
          if (link.parentElement.nodeName === 'SUP') {
            link.parentElement.replaceWith(link)
          }
          link.setAttribute('href', 'javascript:;')
        }
      })
    },

    onFootnoteLinkClick (node, popoverBtnId) {
      this.$root.$emit('bv::hide::popover', popoverBtnId)
      this.$parent.$emit('open-node', getRelation(node))
    }
  },

  created () {
    if (this.mode === 'view' && this.notes) {
      // Query partial data for linked nodes in notes
      const ids = this.notes.filter(note => (note.links)).reduce((ids, note) => {
        return [...ids, ...note.links.map(link => link.id)]
      }, [])
      this.$store.dispatch('GET_NODES', { ids, dataLevel: 'initial' })
    }
  },

  mounted () {
    if (this.mode === 'view' && this.notes) this.addFootnotes()
    this.$el.querySelectorAll('img, video, audio').forEach(elem => elem.parentElement.classList.add('media-container'))
  }
}
</script>

<style lang="scss">
.node-view-body {
  width: 100%;

  img {
    max-width: 100%;
  }

  font: {
    family: $font-family-text;
    line-height: inherit;
  }

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

  &-view {
    padding: 0 $node-view-spacer-sm-x;
    font-size: 1.25rem;
    word-wrap: break-word;

    @include media-breakpoint-up($size-bp) {
      padding: 0 $node-view-spacer-x;

      &.node-view-body-ref {
        font-size: 2.6rem;
      }

      &.node-view-body-prod {
        font-size: 1.5rem;
      }
    }
  }

  &-card {
    padding: 0 $node-card-spacer-sm-x;
    font-size: 1.1rem;
    word-wrap: anywhere;

    @include media-breakpoint-up($size-bp) {
      font-size: 2rem;
      padding: 0 $node-card-spacer-x;
    }
  }

  &-card &-wrapper {
    @include line-clamp(3, 1.5em);
  }
  &-card#{&}-prod &-wrapper {
    @include line-clamp(4, 1.5em);
  }

  .footnote-link {
    display: inline-block;
    text-align: center;
    background-color: $black;
    color: $white;
    font-family: $font-family-text;
    font-weight: $font-weight-bold;
    font-size: 0.8em;
    text-decoration: none;
    border-radius: 1em;
    padding: 0 .5em;
    min-width: 1.25em;
    max-height: 1.4em;
    margin: 0 .2em;
  }
}

.footnote {
  background-color: $black;
  color: $white;
  font-size: 1.25rem;

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

  h6 {
    font-size: inherit;
  }

  &-content,
  &-child-list {
    > :last-child {
      margin-bottom: 0;
    }
  }

  &-child-list {
    margin-top: .5rem;
  }
}
</style>