src/components/DefElement.vue

@@ -2,12 +2,19 @@
   <li :is="tag" :class="body.type_"><!--
  --><span :is="item.tag || 'span'" v-for="(item, index) in assemble_text"
           :class="item.type"
+          @error="article_error"
           :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><!--
+          
+       --><router-link class="article_ref" v-if="item.type == 'article_ref'" :to="item.ref" @click.native="article_link_click(item)" :key="index"><!--
+       --><DefElement tag='span' v-if="item.link_text.type_" :dictionary="dictionary" :key="item.id+'_sub'" :body='item.link_text'/><span v-else>{{item.link_text}}</span><!--
+       --><span class="homograph" v-if="item.lemmas[0].hgno" :aria-label="`${dictionary=='bm'? 'Betydning': 'Tyding'} ${item.lemmas[0].hgno}`" :title="`${dictionary=='bm'? 'Betydning': 'Tyding'} ${item.lemmas[0].hgno}`" :key="index"><!--
+        --> ({{roman_hgno(item.lemmas[0])}}{{item.definition_order ? '': ')'}}</span>
+        <span class="def_order" v-if="item.definition_order" :aria-label="'definisjon '+item.definition_order">{{item.lemmas[0].hgno ? ', ': ' ('}}{{item.definition_order}})</span>
+       </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><!--
@@ -18,6 +25,15 @@
 import entities from '../utils/entities.js'
 import helpers from '../utils/helpers.js'
 
+function replace_grammar_id(item, lang) {
+  let content = item.content
+  if (content.includes('$') && (item.items[0].id)){
+    let replacement_item = entities[lang][item.items[0].id]['expansion']
+    content = content.replace('$', replacement_item)}
+
+  return content
+}
+
 export default {
   name: 'DefElement',
   props: {
@@ -34,34 +50,58 @@ export default {
     }
   },
   computed: {
+    fulltext_highlight: function() {
+      return this.$store.state.fulltextHighlight
+    },
     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}
+      try {
+        let lang = this.dictionary
+        let path = this.path
+        return this.body.items.map(
+          function(item){
+            if (item.type_ == 'usage') {
+              if (item.items) {
+                item.content = item.text
+                return {type: item.type_, html: '', tag: 'DefElement', props: {body: item, tag: 'i', dictionary: lang}}
+              }
+              else {
+                return {type: item.type_, html: item.text, tag: 'i'}
+              }
+            }
+            else if (item.type_ == 'article_ref') {
+                return {
+                    type: item.type_,
+                    html: '',
+                    lemmas: item.lemmas,
+                    link_text: item.word_form || item.lemmas[0].annotated_lemma ||  item.lemmas[0].lemma,
+                    ref: '/' + lang + '/' + 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,
+                    source: path
+                    }
+                } 
+            else if (item.type_ == 'pronunciation') return {type: item.type_, html: item.string}
+            else if (item.type_ == 'pronunciation_guide') return {type: item.type_, body: item, html: '', tag: 'DefElement', props: {body: item, tag: 'i', dictionary: lang}}
+            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', dictionary: lang}}
+            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}
         }
       )
+
+      }
+      catch(error) {
+        this.$emit('error', {location: "unparsed", message: error.message} )
+        return {type: 'plain', html: item}
+      }
+
     },
     assemble_text: function(){
-      var old_parts = this.body.content.split(/(\$)/)
+      try {
+              var old_parts = this.body.content.split(/(\$)/)
       var text_items = this.unparsed.slice(0).reverse()
       var new_parts = []
       old_parts.forEach(function(item){
@@ -72,22 +112,37 @@ export default {
         }
       })
       return new_parts
+
+      }
+      catch(error) {
+        this.$emit('error', {location: "assemble_text", message: error.message} )
+        return []
+      }
+
     }
   },
   methods: {
     article_link_click: function(item) {
       this.$emit('article-click', item)
-    }
+    },
+    article_error: function(payload) {
+      this.$emit('error', payload)
+    },
+    roman_hgno: helpers.roman_hgno
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.usage, .pronunciation {
+.usage {
   font-style: italic;
 }
 
+.pronunciation_guide {
+  font-size: smaller;
+}
+
 .numerator{
   vertical-align: super;
   padding-right: 2px;
@@ -103,18 +158,23 @@ export default {
 
 mark {
   background: rgba(255, 255, 255, 0);
-}
-
-span.language {
-  font-weight: bold;
+  color: inherit;
 }
 
 i {
   font-style: normal;
 }
 
-.homograph {
-  vertical-align: sub;
+
+.link_text {
+  text-decoration: underline;
+
+}
+
+.homograph, .def_order{
+  text-decoration: none !important;
+  color: black
+
 }
 
 q:before {

src/components/Definition.vue

 <template>
-  <li :class="['definition', 'level'+level]" :ref="'def' + body.id" :id="'def' + body.id">
+  <li :class="['definition', 'level'+level]"  :ref="level != 9 ? 'def' + body.id : ''" :id="level != 9? 'def' + body.id : ''">
+    <span v-if="level!=9"/>
     <ul class="explanations">
-      <DefElement :body="explanation" :dictionary="dictionary" v-for="(explanation, index) in explanations" :key="index" @article-click="article_link_click" />
+      <DefElement :body="explanation" :dictionary="dictionary" :has_article_ref=has_article_ref(explanation) v-for="(explanation, index) in explanations" :key="index" @article-click="article_link_click" />
     </ul>
     <div v-if="examples.length">
-      <h4>{{example_header}}</h4>
+      <h5 :lang="lang_tag_locale" v-if="level < 3">{{$t('article.headings.examples', content_locale)}}</h5>
       <ul class="examples">
         <Example :body="example" :dictionary="dictionary" v-for="(example, index) in examples" :key="index" @article-click="article_link_click" />
       </ul>
@@ -13,7 +14,7 @@
       <CompoundList :body="compound_list" :dictionary="dictionary" v-for="(compound_list, index) in compund_lists" :key="index" @article-click="article_link_click" />
     </ul>
     <div :is="level < 3 ? 'ol' : 'ul'" class="sub_definitions" v-if="subdefs.length">
-      <Definition :level="level+1" :body="subdef" v-for="(subdef, index) in subdefs"  :dictionary="dictionary" :key="index" @article-click="article_link_click" />
+      <Definition :def_number='index+1' :level="level+1" :body="subdef" v-for="(subdef, index) in subdefs"  :dictionary="dictionary" :key="index" @article-click="article_link_click" />
     </div>
   </li>
 </template>
@@ -28,7 +29,9 @@ var Definition = {
   props: {
     body: Object,
     level: Number,
-    dictionary: String
+    dictionary: String,
+    def_number: Number
+    
   },
   components: {
     DefElement,
@@ -38,41 +41,80 @@ var Definition = {
   },
   computed: {
     explanations: function() {
+      try {
         return this.body.elements.filter(el => el.type_ == 'explanation')
+      } catch (error) {
+        this.$emit('error', {location: "explanations", message: error.message})
+        return []
+      }
     },
     examples: function() {
+      try {
         return this.body.elements.filter(el => el.type_ == 'example')
+      } catch (error) {
+        this.$emit('error', {location: "examples", message: error.message})
+        return []
+      }
+        
     },
     compund_lists: function() {
+      try {
         return this.body.elements.filter(el => el.type_ == 'compound_list')
-    },
-    example_header: function() {
-      return this.dictionary == 'bob' ? 'Eksempel' : 'Døme'
+      } catch (error) {
+        this.$emit('error', {location: "compound_lists", message: error.message})
+        return []
+      }
+        
     },
     subdefs: function() {
+      try {
+        return this.body.elements.filter(el => el.type_ == 'definition').filter(def => def.elements.filter(el => el.type_ != 'sub_article').length > 0)
+
+      } catch (error) {
+        this.$emit('error', {location: "subdefs", message: error.message})
+        return []
+      }
       // filtrerer bort definisjoner som bare inneholder underartikler
-      return this.body.elements.filter(el => el.type_ == 'definition').filter(def => def.elements.filter(el => el.type_ != 'sub_article').length > 0)
+      
+    },
+    content_locale: function() {
+      return this.$parent.content_locale
+    },
+    lang_tag_locale: function() {
+      return this.$parent.lang_tag_locale
     }
-  },
+    
+    },
   mounted: function() {
     let ref = 'def' + this.body.id
     if(location.hash.substring(1) == ref){
-      this.$refs[ref].scrollIntoView()
+      this.$refs[ref].scrollIntoView({block: 'center'})
       this.$refs[ref].classList.add('highlighted')
     }
   },
   methods: {
     article_link_click: function(item) {
       this.$emit('article-click', item)
-    }
+    },
+    has_article_ref: function(item){
+      if(item.items.length && item.items[0].type_ == "article_ref" && item.items[0].definition_id === undefined)
+        {
+          return "true";
+        }
+        else{
+          return "false";
+        }
+     }
   },
   watch:{
     $route(to, from) {
       let ref = 'def' + this.body.id
-      if(location.hash.substring(1) == ref){
-        this.$refs[ref].classList.add('highlighted')
-      }else{
-        this.$refs[ref].classList.remove('highlighted')
+      if (this.$refs[ref]) {
+        if(location.hash.substring(1) == ref){
+          this.$refs[ref].classList.add('highlighted')
+        }else {
+          this.$refs[ref].classList.remove('highlighted')
+        }
       }
     }
   }
@@ -85,15 +127,18 @@ q {
   font-style: italic;
 }
 
-.highlighted {
+.highlighted, mark {
   background-color: var(--v-tertiary-darken1);
-  border-radius: 5px;
 }
 
-h4 {
-  color: var(--v-primary-base);
-  font-variant: small-caps;
-  padding-left: 12px;
-  padding-top: 6px;
+mark {
+  font-weight: bold;
 }
+
+
+li[has_article_ref="true"] {
+  margin-top: 8px;
+  margin-left: -25px;
+}
+
 </style>

src/components/Example.vue

 <template>
   <li class="example">
-    <DefElement tag="q" :body="body.quote"  @article-click="article_link_click" :dictionary="dictionary" /><span v-if="body.explanation && body.explanation.content.length"> - </span>
+    <DefElement tag="q" :body="body.quote"  @article-click="article_link_click" :dictionary="dictionary" /><span v-if="body.explanation && body.explanation.content.length"> – </span>
     <DefElement tag="span" :body="body.explanation" v-if="body.explanation && body.explanation.content.length" @article-click="article_link_click" :dictionary="dictionary" />
   </li>
 </template>