frontend/bundle.js

window.leqsikoni = {
  maybe_text: function(obj) {
    if (obj) {
      return String(obj).trim() || null
    } else {
      return null
    }
  },

  app: function() {
    window.i18n.locale = String($('#locale').val())

    if ($('#app').length === 0) return;

    var path = String(window.location.hash).substring(1)

    var match = null

    if ((match = /^\/words\/(\d+)$/.exec(path))) {
      window.leqsikoni.words_xxxxx(Number(match[1]))
    }
  },

  words_xxxxx: function(word_id) {
    $('#app').html(window.leqsikoni.words_xxxxx_template())

    $.getJSON(
      'http://localhost:4567/words/' + word_id + '?locale=' + window.i18n.locale,
      function(data) {
        document.title = window.leqsikoni.maybe_text(data.primary_form) || ''
        $('#app').html(window.leqsikoni.words_xxxxx_template(data))
      },
    )
  },

  words_xxxxx_template: function(options) {
    if (!options || typeof(options) !== 'object') {
      options = {}
    }

    var primary_form   = window.leqsikoni.maybe_text(options.primary_form)
    var part_of_speech = window.leqsikoni.maybe_text(options.part_of_speech)
    var commentary     = window.leqsikoni.maybe_text(options.commentary)

    var translations =
      window.leqsikoni.words_xxxxx_translations_template(options.translations)
    var inflections =
      window.leqsikoni.words_xxxxx_inflections_template(options.inflections)
    var examples =
      window.leqsikoni.words_xxxxx_examples_template(options.examples)

    var html = ''

    if (primary_form) {
      html += '<h1>' + primary_form + '</h1>'
    }
    if (part_of_speech) {
      html += '<p>' + part_of_speech + '</p>'
    }
    if (translations) {
      html +=
        '<div>' +
        '<h2>' + window.i18n.translate('Meanings') + '</h2>' +
        '<div>' + translations + '</div>' +
        '</div>'
    }
    if (commentary) {
      html +=
        '<div>' +
        '<h2>' + window.i18n.translate('Commentary') + '</h2>' +
        '<p>' + commentary + '</p>' +
        '</div>'
    }
    if (inflections) {
      html +=
        '<div>' +
        '<h2>' + window.i18n.translate('Inflections') + '</h2>' +
        '<div>' + inflections + '</div>' +
        '</div>'
    }
    if (examples) {
      html +=
        '<div>' +
        '<h2>' + window.i18n.translate('Usage examples') + '</h2>' +
        '<div>' + examples + '</div>' +
        '</div>'
    }

    return html
  },

  words_xxxxx_translations_template: function(translations) {
    if (translations === null || typeof(translations) !== 'object') {
      translations = []
    } else {
      translations = Object.values(translations)
    }

    var items_html = []

    translations.forEach(function(translation) {
      var commentary = ''
      if (translation.commentary) {
        commentary = ' (' + translation.commentary + ')'
      }

      items_html.push('<li>' + translation.translation + commentary + '</li>')
    })

    if (items_html.length === 0) {
      return null
    } else {
      return '<ol>' + items_html.join('') + '</ol>'
    }
  },

  words_xxxxx_inflections_template: function(inflections) {
    if (inflections === null || typeof(inflections) !== 'object') {
      inflections = []
    } else {
      inflections = Object.values(inflections)
    }

    var items_html = []

    inflections.forEach(function(inflection) {
      var inflection_descr = inflection['inflection_descr']
      var value = inflection['value'] || ''
      var other_word_id = inflection['other_word_id']

      if (other_word_id !== null) {
        value =
          '<a href="#/words/' + other_word_id + '">' + value + '</a>'
      }

      items_html.push(
        '<li><b>' + inflection_descr + '</b>: ' + value + '</li>'
      )
    })

    if (items_html.length === 0) {
      return null
    } else {
      return '<ul>' + items_html.join('') + '</ul>'
    }
  },

  words_xxxxx_examples_template: function(examples) {
    if (examples === null || typeof(examples) !== 'object') {
      examples = []
    } else {
      examples = Object.values(examples)
    }

    var items_html = []

    examples.forEach(function(example) {
      var left       = example['left']
      var right      = example['right']
      var highlights = example['highlights']

      var highlighted = []
      if (highlights.length == 0) {
        highlighted.push(left)
      } else {
        var last_pos = 0
        highlights.forEach(function(highlight) {
          var pos = highlight['pos']
          var len = highlight['len']
          if (pos > 0) { highlighted.push(left.substring(last_pos, pos)) }
          last_pos = pos + len
          highlighted.push(
            '<span class="highlight">' +
              left.substring(pos, pos + len) +
              '</span>'
          )
        })
      }

      var item_html = '<li>' + highlighted.join('')
      if (right) {
        item_html += ' &mdash; ' + right
      }
      item_html += '</li>'

      items_html.push(item_html)
    })

    if (items_html.length === 0) {
      return null
    } else {
      return '<ul>' + items_html.join('') + '</ul>'
    }
  },
}

$(function() {
  window.addEventListener('hashchange', window.leqsikoni.app, false)
  $('#locale').change(window.leqsikoni.app)

  window.leqsikoni.app()
})