1 files changed, 29 insertions, 6 deletions

diff --git a/modules/unicode/index.html b/modules/unicode/index.html
index 1065575..1832fe8 100644
--- a/modules/unicode/index.html
+++ b/modules/unicode/index.html
@@ -15,6 +15,9 @@ body {
 	max-height: 300px;
 	overflow-y: scroll;
 }
+.invisible {
+	display: none;
+}
 </style>
 <script>
 function do_lookup(override) {
@@ -34,7 +37,7 @@ function do_lookup(override) {
 	xhr.onreadystatechange = function() {
 		if (xhr.readyState == 4) {
 			if (xhr.status == 200) {
-				handleResponse(JSON.parse(xhr.responseText));
+				handleResponse(JSON.parse(xhr.responseText), input);
 			} else {
 				alert("Request failed: " + xhr.responseText);
 			}
@@ -47,13 +50,24 @@ function do_lookup(override) {
 	xhr.send();
 }
 
-function handleResponse(json) {
+function handleResponse(json, input) {
 	var elem;
 
 	/* elem = document.getElementById("json");
 	elem.innerHTML = "";
 	elem.appendChild(document.createTextNode(JSON.stringify(json))); */
 
+	var index_container = document.getElementById("index_container");
+	if ("index" in json) {
+		index_container.classList.remove("invisible");
+		document.getElementById("index_input").innerHTML = input;
+		elem = document.getElementById("index");
+		elem.innerHTML = "";
+		elem.appendChild(makeCharacterDiv(json["index"]));
+	} else if (!index_container.classList.contains("invisible")) {
+		index_container.classList.add("invisible");
+	}
+
 	var keys = ["chars", "search"];
 
 	for (var i = 0; i < keys.length; i++) {
@@ -62,14 +76,18 @@ function handleResponse(json) {
 		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);
+			elem.appendChild(makeCharacterDiv(json[keys[i]][j]));
 		}
 	}
 }
 
+function makeCharacterDiv(row) {
+	var div = document.createElement("div");
+	div.classList.add("character");
+	populateCharacter(div, row);
+	return div;
+}
+
 function populateCharacter(div, row) {
 	var span = document.createElement("span");
 	span.setAttribute("style", "display: inline-block; width: 7em; font-weight: bold;");
@@ -105,6 +123,11 @@ window.addEventListener("load", function() {
 
 	<!-- <pre id="json"></pre><br> -->
 
+	<div id="index_container" class="invisible">
+		<h3>Codepoint <span id="index_input"></span></h3>
+		<div id="index" class="table"></div>
+	</div>
+
 	<h3>Characters <span id="chars_num"></span></h3>
 	<div id="chars" class="table"></div>