Header.vue

<!-- eslint-disable -->
<template>
  <div class = "header">
    <span class="dict-label" tabindex="0">{{dict_label}}</span>
    <h2 class="article_header" tabindex="0">{{header_text}}</h2>
    <h2 class="secondary_header" v-if="secondary_header_text.length" tabindex="0">{{secondary_header_text}}</h2>
    <span class="header_group_list" v-if="group_list.length" tabindex="0">{{group_list}}</span>

    <span v-if="split_inf" tabindex="0"> (kløyvd infinitiv: <i>-a</i>
      <v-menu rounded="0" 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 rounded="0" class="info-card">
          Dersom du bruker kløyvd infinitiv, skal dette verbet ha <i>-a</i> 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>
      <div class="inflection-wrapper" v-if="inflected">
    
    <v-btn class="show-inflection" width="160px" rounded depressed small @click.native="toggle" :class="$vuetify.breakpoint.name">
    <span>{{inflection_button_text}}</span><span class = "inflection-arrow">{{inflection_arrow}}</span>
    </v-btn>
      <div class="inflection-canvas" v-if="inflection_expanded">
        <inflectionTable :lemmaList="lemmas_with_word_class_and_lang" :mq="$vuetify.breakpoint.name" />
      </div>

</div>
  
  </div>
</template>

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

import inflectionTable from 'inflection-table'

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(', ')
    },
    inflect_tooltip: function() {
      return this.dictionary == 'bm' ? 'Klikk for å se bøyinger' : 'Klikk for å sjå bøyingar'
    },
    dict_label: function() {
      return {
        'bm': 'bokmålsordboka',
        'nn': 'nynorskordboka'
      }[this.dictionary] || ''
    },
    inflection_button_text: function() {
      return {
        "bm": {false: "Se bøyning", true: "Skjul bøyning"},
        "nn": {false: "Sjå bøying", true: "Skjul bøying"}
      }[this.dictionary][this.inflection_expanded]
    },
    inflection_arrow: function() {
      return this.inflection_expanded?  "▲" : "▼"
    },
    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('/', '_'))))
          }
        }
      )
    },
    lemmas_with_word_class_and_lang: function() {
      return this.lemmas.map(lemma => Object.assign({language: this.dictionary == 'bm' ? 'nob' : 'nno',
                                                     word_class: lemma.paradigm_info[0].inflection_group.split('_')[0]}, lemma))
    },
    inflected: function() {
      return this.lemmas.reduce((acc, lemma) => acc += lemma.paradigm_info.reduce((acc2, digm) => acc2 += digm.inflection.length, 0), 0) > 0
    },
    split_inf: function() {
      return this.lemmas[0].split_inf
    }
  },
  components: {
    inflectionTable
  },
  data: function() {
    return {
      inflect_reported: false,
      menu: false,
      inflection_expanded: false
    }
  },
  methods: {
    toggle: function() {
      this.inflection_expanded = !this.inflection_expanded
      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 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;
}


.show-inflection {
  color: var(--v-primary-base) !important;
  font-weight: bold !important;
}


.inflection-arrow {
  position: absolute;
  right: -4px;
  margin-left: 3px;
  font-size: 10px;
}

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

.inflection-canvas {
  overflow-x: auto;
  /*position: absolute;*/
  z-index: 5;
  background-color: rgba(255, 255, 255, 0);
  /*max-width: 100vw;*/
  padding-top: 10px;
}


.inflection-wrapper {
  color: var(--v-text-base);
  width: min-content;
  font-size: 14px;
  overflow-x: auto;
  margin-top: 10px;
}

#search_results .xs .inflection-wrapper, #search_results .sm .inflection-wrapper {
  display: none;
}

.context {
  color: var(--v-primary-lighten4) !important;
}

div.lemma {
  display: none;
}

table {
  border-collapse: collapse;
  margin-top: 5px;
  border-color: var(--v-primary-base);
}

th, td {
  border: solid 1px;
  padding: 5px;
}

th {
  background-color: var(--v-button-base);
  color: var(--v-primary-darken1)
}

.infl-label {
    text-align: center;
    vertical-align: top;
}

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


td.hilite {
    background-color: var(--v-tertiary-base);
    text-align: center
}

</style>