Header.vue

<!-- eslint-disable -->
<template>
  <div>
    <h2 class="article_header">{{header_text}}</h2>
      {{group_list}}
      <details :title="inflect_tooltip" @toggle="toggle()" v-if="group_list" :class="$vuetify.breakpoint.name">
        <summary :class="dictionary" onclick="this.blur()">bøying</summary>
        <div class="inflection-wrapper">
          <div class="inflection">
            <div v-for="(lemma, index) in inflection_groups_by_lemma" :key="index">
              <h4>{{lemma.lemma}}</h4>
              <component  v-for="grp in Object.keys(lemma.inflection_groups)"
                          :key="grp.replace('/', '_')"
                          :is="grp.replace('/', '_')"
                          :dictionary="dictionary"
                          :standardisations="lemma.inflection_groups[grp]"></component>
            </div>
          </div>
        </div>
      </details>
      <span class="dict-label">{{dict_label}}</span>
  </div>
</template>

<script>
  /* eslint-disable */
import helpers from '../utils/helpers.js'
import ADJ from './inflection/Adjective.vue'
import ADJ_adv from './inflection/AdjectiveAdv.vue'
import ADJ_masc_fem from './inflection/AdjectiveMF.vue'
import ADJ_masc_fem_fem from './inflection/AdjectiveMF_F.vue'
import DET from './inflection/Determinative.vue'
import DET_adj from './inflection/DeterminativeAdj.vue'
import PRON from './inflection/Pronoun.vue'
import NOUN from './inflection/Noun.vue'
import NOUN_reg_fem from './inflection/NounRegFem.vue'
import VERB from './inflection/Verb.vue'
import VERB_sPass from './inflection/VerbSPass.vue'

export default {
  name: 'Header',
  props: {
    lemmas: Array,
    dictionary: String,
    article_id: Number
  },
  computed: {
    header_text: function() {
      return this.lemmas.map(lemma => lemma.lemma).join(', ')
    },
    inflect_tooltip: function() {
      return this.dictionary == 'bob' ? 'Klikk for å se bøyinger' : 'Klikk for å sjå bøyingar'
    },
    dict_label: function() {
      return {
        'bob': 'bokmålsordboka',
        'nob': 'nynorskordboka'
      }[this.dictionary] || ''
    },
    group_list: function() {
      return helpers.group_list(this.lemmas, this.dictionary)
    },
    inflection_groups_by_lemma: function() {
      let components = Object.keys(this.$options.components)
      return this.lemmas.map(
        function(lemma_){
          let inflection_groups = lemma_.paradigm_info.reduce((acc, std) =>  Object.assign(acc, {[std.inflection_group]: []}), {})
          lemma_.paradigm_info.forEach(std => inflection_groups[std.inflection_group].push(std))
          return {
            lemma: lemma_.lemma,
            inflection_groups: Object.fromEntries(Object.entries(inflection_groups).filter(e => components.includes(e[0].replace('/', '_'))))
          }
        }
      )
    }
  },
  components: {
    ADJ,
    ADJ_adv,
    ADJ_masc_fem,
    ADJ_masc_fem_fem,
    DET,
    DET_adj,
    PRON,
    NOUN,
    NOUN_reg_fem,
    VERB,
    VERB_sPass
  },
  data: function() {
    return {
      inflect_reported: false
    }
  },
  methods: {
    toggle: function() {
      if (! this.inflect_reported) {
        this.$plausible.trackEvent('open inflection', {props: {article: `/${this.dictionary}/${this.article_id}/${this.lemmas[0].lemma}`}})
      }
      this.inflect_reported = true
    }
  }
}

</script>

<style>

article (table, th, td) {
  border: solid 1px;
}

summary {
  width: 30em;
  text-align: center;
}

article h2 {
  padding: 4px;
  font-family: Inria Serif;
  font-size: 36px;
}

.word-classification {
  text-decoration: underline dashed;
}

.dict-label {
  color: var(--v-primary-base)  ;
  font-weight: bold;
  padding-left: 5px;
  position: absolute;
  top: 0px;
  left: 15px;
  font-variant-caps: all-small-caps;
}

details {
  margin-top: 10px;
  position: relative;
}

details > summary {
  position: relative;
  max-width: 130px;
  list-style: none;
  border: solid 2px var(--v-primary-base);
  border-radius: 30px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-right: 10px;
  color: var(--v-primary-base);
  background-color: #ffffff;
  cursor: pointer;
}

details[open] > summary {
  box-shadow: 5px 5px 0px var(--v-primary-base)
}

details > summary:after {
  content: "⌄";
  font-weight: bold;
  position: absolute;
  right: 0;
  top: 1px;
  margin-right: 3px;
}

details > summary.bob:before {
  content: "Se ";
}

details > summary.nob:before {
  content: "Sjå ";
}

details[open] > summary.bob:before, details[open] > summary.nob:before {
  content: "Skjul  ";
}

details[open] > summary:after {
  content: "⌃";
  font-weight: bold;
  position: absolute;
  right: 0;
  top: 8px;
  margin-right: 3px;
}

@keyframes open {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

details[open] summary ~ * {
  animation: open 0.3s ease-in-out;
}

.inflection-wrapper {
  overflow-x: auto;
  position: absolute;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0);
  max-width: 100vw;
}


.inflection table {
  border-collapse: collapse;
  margin: 10px;
}

.inflection td, .inflection th {
  border: solid;
  border-width: 1px;
  margin: 0px 0px 0px 0px;
  padding: 3px;
}


details > summary::-webkit-details-marker {
  display: none;
}

.inflection {
  color: var(--v-primary-base);
  margin-top: 5px;
  background-color: #ffffff;
  width: max-content;
  border-radius: 30px;
  padding: 10px;
  margin: 10px;
  border-style: solid;
  border-width:  1px;
  border-color: var(--primary-base)
}

article:not(.righ_hand_column) .inflection-wrapper {
  left: -35px;
}

</style>