basic styling

5 years ago · 3e0bb90c83
parent 2506639b46
commit 3e0bb90c83
1 changed files with 112 additions and 44 deletions
--- a/ner.ed.html
+++ b/ner.ed.html
@ -2,19 +2,32 @@
 <html>
 <head>
    <meta charset="UTF-8">
-	<title>ner.ed</title>
+    <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:24px}
+        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">
+    <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;

@ -42,10 +55,65 @@
            });
        }

+        // 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>
-	<input type="file" id="tsv-file" name="files"/>
 </body>
 </html>