diff options
Diffstat (limited to 'nimi.js')
| -rw-r--r-- | nimi.js | 255 |
1 files changed, 255 insertions, 0 deletions
@@ -0,0 +1,255 @@ +/* SPDX-License-Identifier: MPL-2.0 + * + * Copyright (C) 2022 Sasi Olin <hel@lcp.world> + */ + +var textfield = document.getElementById("entry"); +textfield.setAttribute("placeholder", "o awen"); + +function toggle_visible() { + if (this.classList.contains("text")) { + this.classList.remove("text"); + } + else { + var elements = document.getElementsByClassName("item-indicator"); + Array.from(elements).forEach(function(element) { + element.classList.remove("text"); + }); + this.classList.add("text"); + } +} + +function set_results(entry, tp_en, en_tp) { + var selected = document.querySelector("input[type='radio'][name='lang']:checked").value; + var out = {}; + if (selected == "en") + out = en_tp; + else if (selected == "tp") + out = tp_en; + else { + if (en_tp[entry] && tp_en[entry]) { + return; + } + else if (en_tp[entry]) { + selected = "en"; + out = en_tp; + } + else if (tp_en[entry]) { + selected = "tp"; + out = tp_en; + } + } + output = ""; + if (out[entry]) { + var card = document.createElement("ul"); + card.setAttribute("class", "card"); + var title = document.createElement("h3"); + title.setAttribute("class", "title"); + title.innerHTML = "Translations of "; + var translated = document.createElement("span"); + translated.innerHTML = entry; + title.appendChild(translated); + card.appendChild(title); + var legend = document.createElement("div"); + legend.setAttribute("class", "legend"); + var word = document.createElement("span"); + word.innerHTML = "Word "; + word.setAttribute("class", "word"); + legend.appendChild(word); + var frequency = document.createElement("span"); + frequency.innerHTML = "Frequency"; + frequency.setAttribute("class", "frequency"); + frequency.setAttribute("title", "Based on the data collected by Sonja Lang"); + legend.appendChild(frequency); + card.appendChild(legend); + for (const key in out[entry]) { + var element = document.createElement("li"); + element.setAttribute("class", "card-item"); + var span = document.createElement("span"); + span.innerHTML = key; + span.innerHTML += " "; + span.setAttribute("class", "item-title"); + element.appendChild(span); + var backtrans = document.createElement("span"); + backtrans.setAttribute("class", "item-backtrans"); + if (selected == "en") { + for (const back in tp_en[key]) { + if (backtrans.innerHTML != "") + backtrans.innerHTML += ", "; + var backlink = document.createElement("a"); + backlink.setAttribute("class", "item-backlink"); + backlink.setAttribute("href", "#en:" + back); + backlink.innerHTML = back; + backtrans.appendChild(backlink); + } + } + else if (selected == "tp") { + for (const back in en_tp[key]) { + if (backtrans.innerHTML != "") + backtrans.innerHTML += ", "; + var backlink = document.createElement("a"); + backlink.setAttribute("class", "item-backlink"); + backlink.setAttribute("href", "#tp:" + back); + backlink.innerHTML = back; + backtrans.appendChild(backlink); + } + } + span.appendChild(backtrans); + var val = document.createElement("span"); + val.innerHTML = out[entry][key]; + val.setAttribute("title", out[entry][key]); + val.setAttribute("tabindex", 0); + indicator = Math.ceil(out[entry][key] / 20); + if (out[entry][key] <= 20) + indicator = Math.ceil((out[entry][key] - 10) / 20); + if (indicator < 0) + indicator = 0; + val.setAttribute("class", "item-indicator indicator-" + indicator ); + element.appendChild(val); + card.appendChild(element); + } + var source = document.createElement("div"); + source.setAttribute("class", "source"); + var link = document.createElement("a"); + link.setAttribute("href", "https://tokipona.org/nimi_pu.txt"); + link.innerHTML = "nimi_pu.txt"; + source.appendChild(link); + source.innerHTML += ", "; + link.setAttribute("href", "https://tokipona.org/nimi_pi_pu_ala.txt"); + link.innerHTML = "nimi_pi_pu_ala.txt"; + source.appendChild(link); + source.innerHTML += ", "; + link.setAttribute("href", "https://tokipona.org/compounds.txt"); + link.innerHTML = "compounds.txt"; + source.appendChild(link); + source.innerHTML = "Source: " + source.innerHTML; + card.appendChild(source); + output = card; + } + document.getElementById("results").innerHTML = ""; + document.getElementById("result").innerHTML = ""; + var langs = document.getElementsByClassName("output-lang"); + Array.from(langs).forEach(function(element) { + element.classList.remove("selected"); + }); + document.getElementById("auto-label").innerHTML = "Detect Language"; + if (output) { + document.getElementById("results").appendChild(output); + document.getElementById("result").innerHTML = Object.keys(out[entry])[0]; + if (document.querySelector("input[type='radio'][name='lang']:checked").value == "auto") { + history.replaceState(null, null, document.location.pathname + "#" + entry); + if (selected == "en") + document.getElementById("auto-label").innerHTML = "English - Detected"; + else if (selected == "tp") + document.getElementById("auto-label").innerHTML = "toki pona - Detected"; + } + else + history.replaceState(null, null, document.location.pathname + "#" + selected + ":" + entry); + if (selected == "en") { + document.getElementById("out-tp").classList.add("selected"); + } + else if (selected == "tp") { + document.getElementById("out-en").classList.add("selected"); + } + var elements = document.getElementsByClassName("item-indicator"); + Array.from(elements).forEach(function(element) { + element.onclick = toggle_visible; + element.onkeyup = toggle_visible; + }); + } + else + history.replaceState(null, null, document.location.pathname); +} + +function get_suggestions(entry, tp_en, en_tp) { + var selected = document.querySelector("input[type='radio'][name='lang']:checked").value; + var out = {}; + if (selected == "en") + out = en_tp; + else if (selected == "tp") + out = tp_en; + else { + return; + } + output = ""; + if (!out[entry] && entry != "") { + var card = document.createElement("div"); + card.setAttribute("class", "card"); + keys = Object.keys(out).filter(function(item, index) { + return RegExp(`^${entry}`).test(item); + }); + + Array.from(keys).forEach(function(key) { + var element = document.createElement("li"); + element.setAttribute("class", "card-item"); + var link = document.createElement("a"); + link.setAttribute("href", "#" + selected + ":" + key); + link.innerHTML = key; + element.appendChild(link); + card.appendChild(element); + }); + if (keys.length != 0) + output = card; + } + document.getElementById("suggestions").innerHTML = ""; + if (output) + document.getElementById("suggestions").appendChild(output); +} + +Promise.all([ + fetch('tp-en.json') + .then(res => res.json()), + fetch('en-tp.json') + .then(res=>res.json()) +]) +.then(([tp_en, en_tp]) => { + var lang = document.querySelector("input[type='radio'][name='lang']:checked").value; + window.addEventListener('hashchange', function(e) { + var entry = ""; + if (decodeURIComponent(window.location.hash.substring(1)).includes(":")) { + lang = decodeURIComponent(window.location.hash.substring(1)).split(":")[0]; + entry = decodeURIComponent(window.location.hash.substring(1)).split(":")[1]; + } + else + entry = decodeURIComponent(window.location.hash.substring(1)); + document.getElementById("entry").value = entry; + document.getElementById("suggestions").innerHTML = ""; + document.querySelector(`input[type='radio'][name='lang']#${lang}`).checked = true; + set_results(entry, tp_en, en_tp); + }); + document.getElementById("entry").addEventListener('input', function(e) { + var entry = e.target.value; + get_suggestions(entry, tp_en, en_tp); + set_results(entry, tp_en, en_tp); + }); + var rad = document.getElementsByName("lang"); + var prev = null; + for (var i = 0; i < rad.length; i++) { + rad[i].addEventListener('change', function() { + if (this !== prev) { + prev = this; + } + var entry = document.getElementById("entry").value; + get_suggestions(entry, tp_en, en_tp); + set_results(entry, tp_en, en_tp); + }); + } + if (window.location.hash) { + var entry = ""; + if (decodeURIComponent(window.location.hash.substring(1)).includes(":")) { + lang = decodeURIComponent(window.location.hash.substring(1)).split(":")[0]; + entry = decodeURIComponent(window.location.hash.substring(1)).split(":")[1]; + } + else + entry = decodeURIComponent(window.location.hash.substring(1)); + document.getElementById("entry").value = entry; + document.querySelector(`input[type='radio'][name='lang']#${lang}`).checked = true; + set_results(entry, tp_en, en_tp); + } + textfield.removeAttribute("disabled"); + textfield.setAttribute("placeholder", "o alasa e nimi"); + textfield.focus(); +}).catch(err => { + textfield.setAttribute("placeholder", err); + console.log(err) +}); |