From 0c03cb4b2571964b7e1b02902da81bdc23a450bd Mon Sep 17 00:00:00 2001
From: Alex Kotov <kotovalexarian@gmail.com>
Date: Sat, 25 Mar 2023 20:39:09 +0400
Subject: [PATCH] Rewrite templates

---
 bundle.js | 259 +++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 170 insertions(+), 89 deletions(-)

diff --git a/bundle.js b/bundle.js
index aff1cbc..4d078dc 100644
--- a/bundle.js
+++ b/bundle.js
@@ -1,95 +1,176 @@
-$(function() {
-  $('#words-xxxxx').each(function() {
+window.leqsikoni = {
+  maybe_text: function(obj) {
+    if (obj) {
+      return String(obj).trim() || null
+    } else {
+      return null
+    }
+  },
+
+  words_xxxxx: function() {
+    window.leqsikoni.words_xxxxx_template()
+
     var word_id = Number(window.location.hash.substring(1))
 
     $.getJSON(
       'http://localhost:4567/words/' + word_id,
-      function(data) {
-        var primary_form   = data['primary_form']
-        var part_of_speech = data['part_of_speech']
-        var commentary     = data['commentary']
-
-        var translations = []
-        data['translations'].forEach(function(item) {
-          var commentary = ''
-          if (item['commentary']) {
-            commentary = ' (' + item['commentary'] + ')'
-          }
-          translations.push(
-            '<li>' + item['translation'] + commentary + '</li>'
-          )
-        })
-
-        var inflections = []
-        data['inflections'].forEach(function(item) {
-          var descr = item['descr']
-          var value = item['value'] || ''
-          var other_word_id = item['other_word_id']
-
-          if (other_word_id !== null) {
-            value =
-              '<a href="xxxxx.html#' + other_word_id + '">' + value + '</a>'
-          }
-
-          inflections.push(
-            '<li><b>' + descr + '</b>: ' + value + '</li>'
-          )
-        })
-
-        var examples = []
-        data['examples'].forEach(function(item) {
-          var left       = item['left']
-          var right      = item['right']
-          var highlights = item['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>'
-              )
-            })
-          }
-
-          examples.push(
-            '<li>' + highlighted.join('') + ' &mdash; ' + right + '</li>'
-          )
-        })
-
-        document.title = primary_form
-
-        $('#primary-form').text(primary_form)
-        $('#part-of-speech').text(part_of_speech)
-
-        if (commentary) {
-          $('#commentary-data').text(commentary)
-          $('#commentary').removeClass('invisible')
-        }
-
-        if (translations.length > 0) {
-          $('#translations-data').html('<ol>' + translations.join('') + '</ol>')
-          $('#translations').removeClass('invisible')
-        }
-
-        if (inflections.length > 0) {
-          $('#inflections-data').html('<ul>' + inflections.join('') + '</ul>')
-          $('#inflections').removeClass('invisible')
-        }
-
-        if (examples.length > 0) {
-          $('#examples-data').html('<ul>' + examples.join('') + '</ul>')
-          $('#examples').removeClass('invisible')
-        }
-      },
+      window.leqsikoni.words_xxxxx_template,
     )
-  })
+  },
+
+  words_xxxxx_template: function(options) {
+    if (options === null || 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)
+
+    document.title = primary_form || ''
+
+    $('#primary-form').text(primary_form || '')
+    $('#part-of-speech').text(part_of_speech || '')
+    $('#commentary-data').text(commentary || '')
+
+    $('#translations-data').html(translations || '')
+    $('#inflections-data').html(inflections || '')
+    $('#examples-data').html(examples || '')
+
+    if (commentary) {
+      $('#commentary').removeClass('invisible')
+    } else {
+      $('#commentary').addClass('invisible')
+    }
+
+    if (translations) {
+      $('#translations').removeClass('invisible')
+    } else {
+      $('#translations').addClass('invisible')
+    }
+
+    if (inflections) {
+      $('#inflections').removeClass('invisible')
+    } else {
+      $('#inflections').addClass('invisible')
+    }
+
+    if (examples) {
+      $('#examples').removeClass('invisible')
+    } else {
+      $('#examples').addClass('invisible')
+    }
+  },
+
+  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 descr = inflection['descr']
+      var value = inflection['value'] || ''
+      var other_word_id = inflection['other_word_id']
+
+      if (other_word_id !== null) {
+        value =
+          '<a href="xxxxx.html#' + other_word_id + '">' + value + '</a>'
+      }
+
+      items_html.push(
+        '<li><b>' + 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>'
+          )
+        })
+      }
+
+      items_html.push(
+        '<li>' + highlighted.join('') + ' &mdash; ' + right + '</li>'
+      )
+    })
+
+    if (items_html.length === 0) {
+      return null
+    } else {
+      return '<ul>' + items_html.join('') + '</ul>'
+    }
+  },
+}
+
+$(function() {
+  $('#words-xxxxx').each(window.leqsikoni.words_xxxxx)
+  window.addEventListener('hashchange', window.leqsikoni.words_xxxxx, false)
 })