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"><!--
          -->{{item.html}}<!--
       --><router-link v-if="item.type == 'article_ref'" :to="item.ref" @click.native="article_link_click(item)"><!--
         --><span class="homograph" :key="index">{{item.lemmas[0].hgno ? String.fromCharCode(0x215f + item.lemmas[0].hgno) + ' ' : ''}}</span>{{item.lemmas[0].lemma}} {{item.definition_order ? ` (${item.definition_order})` : ''}}<!--
       --></router-link><!--
       --><sup v-if="item.type == 'subscript'">{{item.text}}</sup><!--
       --><sup v-if="item.type == 'superscript'">{{item.text}}</sup><!--
 --></span></li>
</template>

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

export default {
  name: 'DefElement',
  props: {
    body: Object,
    tag: {
      type: String,
      default: 'li'
    }
  },
  computed: {
    unparsed: function(){
      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: '',
                                                          lemmas: item.lemmas,
                                                          ref: item.article_id + (item.definition_id ? '#def' + item.definition_id : ''),
                                                          article_id: item.article_id,
                                                          definition_id: item.definition_id,
                                                          definition_order: item.definition_order
                                                        }
          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.id) return {type: item.type_, html: entities[item.id] || languages[item.id] || 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;
}

mark {
  background: #ffffff;
}

span.language {
  font-weight: bold;
}

.homograph {
  vertical-align: sub;
}

</style>