Add two key combinations (l-a, and l-r) that permit change of number of

display rows.

docs/User_Guide.md

@@ -115,6 +115,11 @@ We also provide some [Python tools](https://github.com/qurator-spk/neath/tree/ma
 | i  t     |  Set NE-TAG / NE-EMB to "I-TODO"           |
 |----------|--------------------------------------------|
 | enter    | Edit TOKEN or GND-ID                       |
+| esc      | Close TOKEN or GND-ID edit field without   |
+|          | application of changes.                    |
+|----------|--------------------------------------------|
+| l a      | add one display row                        |
+| l r      | remove on display row (minimum is 5)       |
 |----------|--------------------------------------------|
 
 #### Mouse-Navigation

neath.js

@@ -48,6 +48,8 @@ function loadFile(evt, onComplete) {
 
 function setupInterface(data, file, urls) {
 
+    // private variables of app
+
     let displayRows=15
     let startIndex=0;
     let endIndex=displayRows;
@@ -61,6 +63,15 @@ function setupInterface(data, file, urls) {
 
     let listener_defaults = { prevent_repeat  : true };
 
+    let editingTd;
+
+    let wnd_listener = new window.keypress.Listener();
+    let slider_pos = data.data.length - startIndex;
+    let slider_min = displayRows;
+    let slider_max = data.data.length;
+
+    // private functions of app
+
     function notifyChange() {
         if (save_timeout != null) clearTimeout(save_timeout);
         has_changes = true;
@@ -181,8 +192,6 @@ function setupInterface(data, file, urls) {
         $("#table td:contains('I-TODO')").addClass('ner_todo');
     }
 
-    let editingTd;
-
     function makeTdEditable(td) {
 
         editingTd = {
@@ -596,69 +605,6 @@ function setupInterface(data, file, urls) {
             updatePreview($(':focus').data('tableInfo').nRow);
     }
 
-    let wnd_listener = new window.keypress.Listener();
-
-    wnd_listener.simple_combo('tab',
-        function () {
-            if (editingTd != null)
-                return false; // If we are in editing mode, we do not want to propagate the TAB event.
-            else return true; // In non-editing mode, we want to get the "normal" tab behaviour.
-        });
-
-    let slider_pos = data.data.length - startIndex;
-    let slider_min = displayRows;
-    let slider_max = data.data.length;
-
-    let range_html =
-            `
-            <input type="range" orient="vertical" class="form-control-range"
-                style="-webkit-appearance: slider-vertical;height:100%;outline: 0 none !important;"
-                min="${slider_min}" max="${slider_max}" value="${slider_pos}" id="docpos" />
-            `;
-
-    $("#region-right").html(range_html)
-
-    $("#docpos").change(
-        function(evt) {
-
-            if (startIndex == data.data.length - this.value) return;
-
-            startIndex = data.data.length - this.value;
-            endIndex = startIndex + displayRows;
-
-            updateTable();
-        });
-
-    $('#docpos').slider();
-
-     let table_html =
-        `
-        <table id="table">
-            <thead>
-            <tr>
-                <th><button class="btn btn-link" id="back" tabindex="-1"><<</button>LOCATION</th>
-                <th>POSITION</th>
-                <th>TOKEN</th>
-                <th>NE-TAG</th>
-                <th>NE-EMB</th>
-                <th>GND-ID<button class="btn btn-link" id="next" tabindex="-1">>></button></th>
-            </tr>
-            </thead>
-            <tbody id="table-body"></tbody>
-        </table>
-        <br/>
-        <br/>
-        `;
-
-    let save_html =
-        `<button class="btn btn-primary saveButton" id="save" disabled tabindex="-1">Save Changes</button>`
-
-    $("#tableregion").html(table_html)
-
-    $("#btn-region").html(save_html)
-
-    $("#file-region").html('<h3>' + file.name + '</h3>');
-
     function saveFile(evt) {
 
         let csv =
@@ -723,27 +669,6 @@ function setupInterface(data, file, urls) {
         setTimeout(url.revokeObjectURL.bind(url, objectURL));
     }
 
-    $('.saveButton').on('click', saveFile)
-
-    $('#table').on('click',
-        function(event) {
-
-            let target = event.target.closest('.editable');
-
-            if (editingTd) {
-
-                if (target == editingTd.elem) return;
-
-                editingTd.finish(editingTd.elem, true);
-            }
-
-            if (!$.contains($('#table')[0], target)) return
-
-            $(target).data('tableInfo').clickAction(target);
-        });
-
-    createTable();
-
     function stepsBackward (nrows) {
 
         if (startIndex >= nrows) {
@@ -771,6 +696,94 @@ function setupInterface(data, file, urls) {
         updateTable();
     }
 
+    function init() {
+
+        $("#tableregion").empty();
+
+        $("#btn-region").empty();
+
+        $("#file-region").empty();
+
+        $("#region-right").empty();
+
+        let range_html =
+                `
+                <input type="range" orient="vertical" class="form-control-range"
+                    style="-webkit-appearance: slider-vertical;height:100%;outline: 0 none !important;"
+                    min="${slider_min}" max="${slider_max}" value="${slider_pos}" id="docpos" />
+                `;
+
+        $("#region-right").html(range_html)
+
+        $("#docpos").change(
+            function(evt) {
+
+                if (startIndex == data.data.length - this.value) return;
+
+                startIndex = data.data.length - this.value;
+                endIndex = startIndex + displayRows;
+
+                updateTable();
+            });
+
+        $('#docpos').slider();
+
+         let table_html =
+            `
+            <table id="table">
+                <thead>
+                <tr>
+                    <th><button class="btn btn-link" id="back" tabindex="-1"><<</button>LOCATION</th>
+                    <th>POSITION</th>
+                    <th>TOKEN</th>
+                    <th>NE-TAG</th>
+                    <th>NE-EMB</th>
+                    <th>GND-ID<button class="btn btn-link" id="next" tabindex="-1">>></button></th>
+                </tr>
+                </thead>
+                <tbody id="table-body"></tbody>
+            </table>
+            <br/>
+            <br/>
+            `;
+
+        let save_html =
+            `<button class="btn btn-primary saveButton" id="save" disabled tabindex="-1">Save Changes</button>`
+
+        $("#tableregion").html(table_html)
+
+        $("#btn-region").html(save_html)
+
+        $("#save").attr('disabled', !has_changes);
+
+        $("#file-region").html('<h3>' + file.name + '</h3>');
+
+        $('.saveButton').on('click', saveFile)
+
+        $('#table').on('click',
+            function(event) {
+
+                let target = event.target.closest('.editable');
+
+                if (editingTd) {
+
+                    if (target == editingTd.elem) return;
+
+                    editingTd.finish(editingTd.elem, true);
+                }
+
+                if (!$.contains($('#table')[0], target)) return
+
+                $(target).data('tableInfo').clickAction(target);
+            });
+
+        $('#back').on('click', function() { stepsBackward(displayRows); } );
+
+        $('#next').on('click', function() { stepsForward(displayRows); } );
+
+        createTable();
+    }
+
     $('#tableregion')[0].addEventListener("wheel",
         function(event) {
 
@@ -780,9 +793,12 @@ function setupInterface(data, file, urls) {
             else stepsForward(1);
         });
 
-    $('#back').on('click', function() { stepsBackward(displayRows); } );
+    wnd_listener.simple_combo('tab',
-
+        function () {
-    $('#next').on('click', function() { stepsForward(displayRows); } );
+            if (editingTd != null)
+                return false; // If we are in editing mode, we do not want to propagate the TAB event.
+            else return true; // In non-editing mode, we want to get the "normal" tab behaviour.
+        });
 
     wnd_listener.simple_combo('pageup',
         function() {
@@ -857,12 +873,44 @@ function setupInterface(data, file, urls) {
             }
         });
 
+    wnd_listener.sequence_combo('l a',
+        function() {
+
+            displayRows++;
+
+            endIndex = startIndex + displayRows;
+
+            if (endIndex >= data.data.length) {
+                startIndex = data.data.length - displayRows;
+                endIndex = data.data.length;
+            }
+
+            slider_min = displayRows;
+            slider_max = data.data.length;
+
+            init();
+        });
+
+    wnd_listener.sequence_combo('l r',
+        function() {
+
+            if (displayRows > 5) displayRows--;
+
+            endIndex = startIndex + displayRows;
+            slider_min = displayRows;
+            slider_max = data.data.length;
+
+            init();
+        });
+
     // public interface
     let that =
         {
             hasChanges: function () { return has_changes; }
         };
 
+    init();
+
     return that;
 }