DefElement.vue

<template>
  <li :is="tag" :class="body.type_"><!--
 --><span :is="item.tag || 'span'" v-for="(item, index) in assemble_text"
          :class="item.type"
          :key="index"
           v-bind="item.props"><!--
          -->{{item.html}}<!--
       --><router-link v-if="item.type == 'article_ref'" :to="item.ref" @click.native="article_link_click(item)"><!--
         -->{{item.link_text}} {{item.definition_order ? ` (${item.definition_order})` : ''}}<!--
       --></router-link><!--
       --><span class="numerator" v-if="item.type == 'fraction'">{{item.num}}</span><!--
       -->{{item.type == 'fraction' ? '⁄' : ''}}<!--
       --><span class="denominator" v-if="item.type == 'fraction'">{{item.denom}}</span><!--
 --></span></li>
</template>

<script>
import entities from '../utils/entities.js'
import helpers from '../utils/helpers.js'

export default {
  name: 'DefElement',
  props: {
    body: Object,
    tag: {
      type: String,
      default: 'li'
    },
    dictionary: String
  },
  data: function() {
    return {
      path: this.$route.fullPath
    }
  },
  computed: {
    unparsed: function(){
      let lang = this.dictionary
      let path = this.path
      return this.body.items.map(
        function(item){
          if      (item.type_ == 'usage') return {type: item.type_, html: item.text, tag: 'mark'}
          else if (item.type_ == 'article_ref') return {
                                                          type: item.type_,
                                                          html: '',
                                                          link_text: item.word_form ||  item.lemmas[0].lemma,
                                                          ref: '/' + lang + '/' + item.article_id + '/' + encodeURIComponent(item.word_form ||  item.lemmas[0].lemma) + (item.definition_id ? '#def' + item.definition_id : ''),
                                                          article_id: item.article_id,
                                                          definition_id: item.definition_id,
                                                          definition_order: item.definition_order,
                                                          source: path
                                                        }
          else if (item.type_ == 'pronunciation') return {type: item.type_, html: item.string}
          else if (item.type_ == 'superscript') return {type: item.type_, html: item.text, tag: 'sup'}
          else if (item.type_ == 'subscript') return {type: item.type_, html: item.text, 'tag': 'sub'}
          else if (item.type_ == 'quote_inset') return {type: item.type_, body: item, html: '', tag: 'DefElement', props: {body: item, tag: 'i'}}
          else if (item.type_ == 'fraction') return helpers.fraction(item.numerator, item.denominator)
          else if (item.id) return {type: item.type_, html: (entities[lang][item.id] || {})['expansion'] || item.id}
          else return {type: item.type_ || 'plain', html: item}
        }
      )
    },
    assemble_text: function(){
      var old_parts = this.body.content.split(/(\$)/)
      var text_items = this.unparsed.slice(0).reverse()
      var new_parts = []
      old_parts.forEach(function(item){
        if(item == '$') {
          new_parts.push(text_items.pop())
        } else if (item.length) {
          new_parts.push({type: 'plain', html: item})
        }
      })
      return new_parts
    }
  },
  methods: {
    article_link_click: function(item) {
      this.$emit('article-click', item)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.usage, .pronunciation {
  font-style: italic;
}

.numerator{
  vertical-align: super;
  padding-right: 2px;
  font-size: smaller;
}

.denominator {
  vertical-align: sub;
  padding-left: 2px;
  font-size: smaller;
}


mark {
  background: rgba(255, 255, 255, 0);
  color: inherit;
}

i {
  font-style: normal;
}

.homograph {
  vertical-align: sub;
}

q:before {
  content: none;
}

q:after {
  content: none;
}

</style>