diff options
author | tomsmeding <tom.smeding@gmail.com> | 2020-01-17 21:43:32 +0100 |
---|---|---|
committer | tomsmeding <tom.smeding@gmail.com> | 2020-01-17 21:43:32 +0100 |
commit | df268d8fc6b68be2a539561e89a376f0334a6e1e (patch) | |
tree | e19eef4b334327b8b5740e0ab3269da14c3c6160 /modules/unicode/index.html | |
parent | f1ae140cde98ede14fd2374ab34cd28d69e9dbfb (diff) |
unicode: Module to search the unicode database
Diffstat (limited to 'modules/unicode/index.html')
-rw-r--r-- | modules/unicode/index.html | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/modules/unicode/index.html b/modules/unicode/index.html new file mode 100644 index 0000000..e44a96e --- /dev/null +++ b/modules/unicode/index.html @@ -0,0 +1,92 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"> +<title>Unicode character lookup</title> +<style> +body { + font-family: sans-serif; +} +.table > div:nth-child(odd) { + background-color: #eee; +} +.table { + max-height: 300px; + overflow-y: scroll; +} +</style> +<script> +function do_lookup() { + var xhr = new XMLHttpRequest(); + xhr.onreadystatechange = function() { + if (xhr.readyState == 4) { + if (xhr.status == 200) { + handleResponse(JSON.parse(xhr.responseText)); + } else { + alert("Request failed: " + xhr.responseText); + } + } + }; + xhr.open("GET", "/unicode/lookup/" + encodeURIComponent(document.getElementById("input").value)); + xhr.responseType = "text"; + xhr.setRequestHeader("Content-Type", "text/plain"); + xhr.send(); +} + +function handleResponse(json) { + console.log(json); + + var elem; + + /* elem = document.getElementById("json"); + elem.innerHTML = ""; + elem.appendChild(document.createTextNode(JSON.stringify(json))); */ + + var keys = ["chars", "search"]; + + for (var i = 0; i < keys.length; i++) { + document.getElementById(keys[i] + "_num").innerHTML = "(" + json[keys[i]].length + ")"; + + elem = document.getElementById(keys[i]); + elem.innerHTML = ""; + for (var j = 0; j < json[keys[i]].length; j++) { + var div = document.createElement("div"); + div.classList.add("character"); + populateCharacter(div, json[keys[i]][j]); + elem.appendChild(div); + } + } +} + +function populateCharacter(div, row) { + var span = document.createElement("span"); + span.setAttribute("style", "display: inline-block; width: 7em; font-weight: bold;"); + span.appendChild(document.createTextNode("U+" + row[0])); + div.appendChild(span); + + span = document.createElement("span"); + span.appendChild(document.createTextNode(row[1])); + div.appendChild(span); +} + +window.addEventListener("load", function() { + document.getElementById("input").focus(); +}); +</script> +</head> +<body> + <h1>Unicode character lookup</h1> + + <input type="text" id="input" placeholder="Character(s) to look up" onkeypress="if (event.keyCode == 10 || event.keyCode == 13) do_lookup()"> + <input type="button" onclick="do_lookup()" value="Lookup"> + <br> + + <!-- <pre id="json"></pre><br> --> + + <h3>Characters <span id="chars_num"></span></h3> + <div id="chars" class="table"></div> + + <h3>Found in descriptions <span id="search_num"></span></h3> + <div id="search" class="table"></div> +</body> +</html> |