From 3e0bb90c832922ac7f7c558ad7b142b07365d607 Mon Sep 17 00:00:00 2001
From: cneud <clemens.neudecker@gmail.com>
Date: Mon, 29 Jul 2019 18:19:36 +0200
Subject: [PATCH] basic styling

---
 ner.ed.html | 156 +++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 112 insertions(+), 44 deletions(-)
diff --git a/ner.ed.html b/ner.ed.html
index 24d601b..6c5930b 100644
--- a/ner.ed.html
+++ b/ner.ed.html
@@ -1,51 +1,119 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<meta charset="UTF-8">
-	<title>ner.ed</title>
-	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.0.1/papaparse.js"></script>
-	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-	<style>
-		body{font-family:Courier;font-size:24px}
-	</style>
+    <meta charset="UTF-8">
+    <title>ner.edith</title>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.0.1/papaparse.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <style>
+        body{font-family:Courier;font-size:16px}
+        table{table-layout:fixed;width:765px;text-align:center}
+        th{background-color:lightgray}
+        td:hover{background-color:yellow}
+        tr:hover{background-color:whitesmoke}
+    </style>
 </head>
 <body>
-	<strong>ner.ed</strong><br><br>
-	<table id="results">
-		<tbody></tbody>
-	</table>
-
-	<script>
-		var data;
-
-		function handleFileSelect(evt) {
-		    var file = evt.target.files[0];
-
-		    Papa.parse(file, {
-		        header: true,
-		        delimiter: '\t',
-		        comments: "#",
-		        skipEmptyLines: true,
-		        dynamicTyping: true,
-		        complete: function(results) {
-		            console.log(results);
-		            data = results;
-		            $.each(results.data, function(i, el) {
-		            	var row = $("<tr/>");
-		            	row.append($("<td/>").text(i));
-		            	$.each(el, function(i, cell) {
-		            		row.append($("<td/>").text(cell));
-		            	});
-		            	$("#table tbody").append(row);
-		            });
-		        }
-		    });
-		}
-
-		$(document).ready(function() {
-		    $("#tsv-file").change(handleFileSelect);
-		});
-	</script>
-	<input type="file" id="tsv-file" name="files"/>
+    <h3>ner.edith: named entity recognition editor in html</h3>
+    Please upload a TSV (tab-separated-values) file in the <a href="https://sites.google.com/site/germeval2014ner/data">GermEval2014 data format</a>: <input type="file" id="tsv-file" name="files"/><br><br>
+    <table id="table">
+        <thead>
+            <tr>
+                <th>OFFSET</th>
+                <th>POSITION</th>
+                <th>TOKEN</th>
+                <th>NE-TAG</th>
+                <th>NE-EMB</th>
+            </tr>
+        </thead>
+        <tbody></tbody>
+    </table>
+    <script>
+        var data;
+
+        function handleFileSelect(evt) {
+            var file = evt.target.files[0];
+
+            Papa.parse(file, {
+                header: true,
+                delimiter: '\t',
+                comments: "#",
+                skipEmptyLines: true,
+                dynamicTyping: true,
+                complete: function(results) {
+                    console.log(results);
+                    data = results;
+                    $.each(results.data, function(i, el) {
+                        var row = $("<tr/>");
+                        row.append($("<td/>").text(i));
+                        $.each(el, function(i, cell) {
+                            row.append($("<td/>").text(cell));
+                        });
+                        $("#table tbody").append(row);
+                    });
+                }
+            });
+        }
+
+        // https://javascript.info/task/edit-td-click
+        let table = document.getElementById('table');
+
+        let editingTd;
+
+        table.onclick = function(event) {
+
+            let target = event.target.closest('.edit-cancel,.edit-ok,td');
+
+            if (!table.contains(target)) return;
+
+            if (target.className == 'edit-cancel') {
+                finishTdEdit(editingTd.elem, false);
+            } else if (target.className == 'edit-ok') {
+                finishTdEdit(editingTd.elem, true);
+            } else if (target.nodeName == 'TD') {
+                if (editingTd) return;
+
+                makeTdEditable(target);
+            }
+
+        };
+
+        function makeTdEditable(td) {
+            editingTd = {
+                elem: td,
+                data: td.innerHTML
+            };
+
+            td.classList.add('edit-td');
+
+            let textArea = document.createElement('textarea');
+            textArea.style.width = td.clientWidth + 'px';
+            textArea.style.height = td.clientHeight + 'px';
+            textArea.className = 'edit-area';
+
+            textArea.value = td.innerHTML;
+            td.innerHTML = '';
+            td.appendChild(textArea);
+            textArea.focus();
+
+            td.insertAdjacentHTML("beforeEnd",
+                '<div class="edit-controls"><button class="edit-ok">OK</button><button class="edit-cancel">CANCEL</button></div>'
+            );
+        }
+
+        function finishTdEdit(td, isOk) {
+            if (isOk) {
+                td.innerHTML = td.firstChild.value;
+            } else {
+                td.innerHTML = editingTd.data;
+            }
+            td.classList.remove('edit-td');
+            editingTd = null;
+        }
+
+        $(document).ready(function() {
+            $("#tsv-file").change(handleFileSelect);
+        });
+    </script>
 </body>
 </html>
\ No newline at end of file
