Article.vue

<template>
  <article v-if="article" :class="dictionary">
    <Header :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" />
    <div class="article_content" :class="$vuetify.breakpoint.name">
      <section v-if="article.body.pronunciation && article.body.pronunciation.length" class="pronunciation">
        <h3>Uttale</h3>
          <ul>
            <DefElement v-for="(element, index) in article.body.pronunciation" :dictionary="dictionary" :key="index" :body='element' @article-click="article_link_click" />
          </ul>
      </section>
      <section v-if="article.body.etymology && article.body.etymology.length" class="etymology">
        <h3>Etymologi</h3>
          <ul>
            <DefElement v-for="(element, index) in article.body.etymology" :dictionary="dictionary" :key="index" :body='element' @article-click="article_link_click" />
          </ul>
      </section>
      <section class="definitions">
        <h3>{{def_label}}</h3>
        <ol>
          <Definition v-for="definition in article.body.definitions" :dictionary="dictionary" :level="1" :key="definition.id" :body='definition' @article-click="article_link_click" />
        </ol>
      </section>
      <section v-if="sub_articles.length" class="expressions">
        <h3>Faste uttrykk</h3>
        <ul>
          <SubArticle :body="subart" v-for="(subart, index) in sub_articles" :dictionary="dictionary" :key="index" @article-click="article_link_click" />
        </ul>
      </section>
      <div class="fade">
        <router-link :to="link_to_self.ref" @click.native="details_click(link_to_self)">
          Velg 🡢
        </router-link>
      </div>
    </div>
  </article>
</template>

<script>
import DefElement from './DefElement.vue'
import Definition from './Definition.vue'
import SubArticle from './SubArticle.vue'
import Header from './Header.vue'

function find_sub_articles(definition) {
  let sub_art_list = []
  let sub_definitions = definition.elements.filter(el => el.type_ == 'definition')

  sub_definitions.forEach((subdef, i) => {
    sub_art_list = sub_art_list.concat(find_sub_articles(subdef))
  })

  let sub_articles = definition.elements.filter(el => el.type_ == 'sub_article')
  sub_art_list = sub_art_list.concat(sub_articles)

  return sub_art_list
}

export default {
  name: 'Article',
  props: {
    article: Object
  },
  computed: {
    link_to_self: function() {
      return  {
        ref: '/' + this.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma),
        article: this.article
      }
    },
    dictionary: function() {
      return this.article.dictionary
    },
    def_label: function() {
      return this.dictionary == 'bob' ? 'Betydning' : 'Tyding'
    },
    sub_articles: function() {
      return this.article.body.definitions.reduce((acc, val) => acc.concat(find_sub_articles(val)), []).sort((s1, s2) => s1.lemmas[0].localeCompare(s2.lemmas[0]))
    }
  },
  components: {
    DefElement,
    Definition,
    SubArticle,
    Header
  },
  methods: {
    article_link_click: function(item) {
      this.$emit('article-click', item)
    },
    details_click: function(item) {
      this.$emit('details-click', item)
    }
  }
}
</script>

<style>
article {
  position: relative;
  padding: 24px;
  margin: 10px;
  border-radius: 30px;
  border: solid 1px var(--v-primary-base);
  background-color: var(--v-tertiary-base);
}

#single_article_container article {
  border-style: none;
}

.fade {
  display: none;
}

section {
  padding-top: 1em;
}

h3 {
  color: #560027;
}

li {
  padding-bottom: 4px;
}

li.level1.definition {
  list-style: upper-alpha;
}

li.level2.definition {
  list-style: decimal;
}

li.level3.definition {
  /* Norsk ordbok skal ha "lower.alpha" her */
  list-style: disc;
}

li.sub_article > ul {
  padding-left: 0px;
}

::marker {
  font-weight: bold;
  color: var(--v-primary-base);
}

ol > li:only-child.level1, li:only-child.level2 {
  /* level3 a.k.a. underdefinisjoner skal vises med bullet selv om de står alene */
  list-style: none;
}

li:only-child.level1 > ol {
  padding-left: 0px;
}

ul, ol {
  padding-left: 12px !important;
}

ul li {
  list-style:none;
}

ul li.definition {
  list-style: disc;
}

</style>