Header.vue

<!-- eslint-disable -->
<template>
  <div class = "header">
    <router-link id="main_content"  :to="$parent.link_to_self.ref" @click.native="$parent.details_click($parent.link_to_self)" class="article_header"><h2>{{header_text}}</h2>
    <span :aria-label="hgno_arabic" class="hgno" v-if="$store.state.showHGNO">{{hgno}}</span></router-link>
    <span class="dict-label">{{dict_label}}</span>
    <h2 class="secondary_header" v-if="secondary_header_text.length">{{secondary_header_text}}</h2>
    <span class="header_group_list" v-if="group_list.length">{{group_list}}</span>
    <span v-if="$store.state.showInflectionNo">{{inflection_classes}}</span>

    <span v-if="split_inf"> (kløyvd infinitiv: <em>-a</em>
      <v-menu tile v-model="menu" offset-x max-width="200px">
        <template v-slot:activator="{ on, attrs }">
          <v-btn aria-label="Mer informasjon om kløyvd infinitiv" x-small icon v-on="on" v-bind="attrs" class="info-button">
            <v-icon color="primary" size="14px">$vuetify.icons.value.info</v-icon>
          </v-btn>
        </template>
        <v-card tile class="info-card">
          Dersom du bruker kløyvd infinitiv, skal dette verbet ha <em>-a</em> i infinitiv. Les meir
          <a target="_blank" href="https://www.sprakradet.no/svardatabase/sporsmal-og-svar/kloyvd-infinitiv-/">her</a>.
        </v-card>
      </v-menu>)
    </span>
    <span v-if="$parent.collapsed && $parent.has_content" class="definition_snippet">
      | {{$parent.snippet}}
    </span>                <span v-if="$parent.collapsable" >
          <v-btn class="expand_icon"
           :title="$parent.collapsed? 'Vis mer' : 'Kollaps'"
           width="100%"       
           plain
           medium
           @click="$parent.collapsed=!$parent.collapsed">
           <v-icon small>{{$parent.collapsed ? 'expand_more': 'expand_less'}}</v-icon></v-btn></span> 
  </div>
</template>

<script>
  /* eslint-disable */
import helpers from '../utils/helpers.js'

export default {
  name: 'Header',
  props: {
    lemmas: Array,
    dictionary: String,
    article_id: Number
  },
  computed: {
    header_text: function() {
      return this.lemmas.map(lemma => lemma.lemma).join(', ')
    },
    secondary_header_text: function() {
      let a_forms = []
      this.lemmas.forEach((lemma, i) => {
        if (lemma.paradigm_info[0] && lemma.paradigm_info[0].inflection_group == 'VERB') {
          let inf2 = lemma.paradigm_info[0].inflection[1] && lemma.paradigm_info[0].inflection[1].word_form
          if (inf2 && inf2.length) {
            a_forms.push(inf2)
          }
        }
      });
      return a_forms.join(', ')
    },
    dict_label: function() {
      return {
        'bm': 'bokmålsordboka',
        'nn': 'nynorskordboka'
      }[this.dictionary] || ''
    },
    hgno: function() {
      let hgnos = []
      this.lemmas.forEach(lemma => {
        let hgint = parseInt(lemma.hgno)
        if (hgint > 0) {
          hgnos.push(["I","II","III","IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII", "XIII", "XIV", "XV", "XVI"][hgint-1])
          }
      })
      return hgnos.join(", ")
    },
    hgno_arabic: function() {
    let hgnos = []
    this.lemmas.forEach(lemma => {
      let hgint = parseInt(lemma.hgno)
      if (hgint > 0) {
        hgnos.push(hgint)
        }
    })
    return hgnos.join(", ")
    },
    group_list: function() {
      return helpers.group_list(this.lemmas, this.dictionary)
    },
    inflection_classes: function() {
      let inf_classes = new Set()
      let ureg = false
      this.lemmas.forEach((lemma, i) => {

           if (lemma.inflection_class) inf_classes.add(lemma.inflection_class)
           else ureg = true

      })
      if (inf_classes.size){

      let class_array = Array.from(inf_classes).sort()
      if (ureg) class_array.push("ureg.")
      let class_list
      if (class_array.length < 3) {
        class_list = class_array.join(" og ")
      }
      else {
        class_list = class_array.slice(0, -1).join(", ") + " og " + class_array[class_array.length -1]
      }

      return " ("+ class_list +")"
      }
    },
    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('/', '_'))))
          }
        }
      )
    },
    split_inf: function() {
      return this.lemmas[0].split_inf
    }
  },
  data: function() {
    return {
      menu: false,
    }
  }
}

</script>

<style>


article h2 {
  padding-top: 4px;
  padding-bottom: 0px;
  font-family: Inria Serif;
  font-size: 30px;
}

article h2.secondary_header {
  padding-top: 0px;
  padding-bottom: 4px;
}

.info-button {
  margin-left: 6px;
  margin-right: -2px;
  height: 10px;
  width: 10px;
}

.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;
}



div.lemma {
  display: none;
}



.article_header {
  display: flex;
  align-items: baseline;
  text-decoration: none;
}

.hgno {
  padding-left: 3px;
  color: var(--v-text-base) !important;
}

.expand_icon {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  text-align: center;
  border-bottom-right-radius: 28px;
  border-bottom-left-radius: 28px;
}

</style>