mirror of
https://github.com/qurator-spk/neat.git
synced 2025-06-13 13:49:55 +02:00
Add two key combinations (l-a, and l-r) that permit change of number of
display rows.
This commit is contained in:
Kai Labusch
parent
a1bd8afc9d
commit
bde4c29b0c
2 changed files with 142 additions and 89 deletions
|
|
@ -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" |
|
| i t | Set NE-TAG / NE-EMB to "I-TODO" |
|
||||||
|----------|--------------------------------------------|
|
|----------|--------------------------------------------|
|
||||||
| enter | Edit TOKEN or GND-ID |
|
| 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
|
#### Mouse-Navigation
|
||||||
|
|
|
||||||
226
neath.js
226
neath.js
|
|
@ -48,6 +48,8 @@ function loadFile(evt, onComplete) {
|
||||||
|
|
||||||
function setupInterface(data, file, urls) {
|
function setupInterface(data, file, urls) {
|
||||||
|
|
||||||
|
// private variables of app
|
||||||
|
|
||||||
let displayRows=15
|
let displayRows=15
|
||||||
let startIndex=0;
|
let startIndex=0;
|
||||||
let endIndex=displayRows;
|
let endIndex=displayRows;
|
||||||
|
|
@ -61,6 +63,15 @@ function setupInterface(data, file, urls) {
|
||||||
|
|
||||||
let listener_defaults = { prevent_repeat : true };
|
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() {
|
function notifyChange() {
|
||||||
if (save_timeout != null) clearTimeout(save_timeout);
|
if (save_timeout != null) clearTimeout(save_timeout);
|
||||||
has_changes = true;
|
has_changes = true;
|
||||||
|
|
@ -181,8 +192,6 @@ function setupInterface(data, file, urls) {
|
||||||
$("#table td:contains('I-TODO')").addClass('ner_todo');
|
$("#table td:contains('I-TODO')").addClass('ner_todo');
|
||||||
}
|
}
|
||||||
|
|
||||||
let editingTd;
|
|
||||||
|
|
||||||
function makeTdEditable(td) {
|
function makeTdEditable(td) {
|
||||||
|
|
||||||
editingTd = {
|
editingTd = {
|
||||||
|
|
@ -596,69 +605,6 @@ function setupInterface(data, file, urls) {
|
||||||
updatePreview($(':focus').data('tableInfo').nRow);
|
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) {
|
function saveFile(evt) {
|
||||||
|
|
||||||
let csv =
|
let csv =
|
||||||
|
|
@ -723,27 +669,6 @@ function setupInterface(data, file, urls) {
|
||||||
setTimeout(url.revokeObjectURL.bind(url, objectURL));
|
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) {
|
function stepsBackward (nrows) {
|
||||||
|
|
||||||
if (startIndex >= nrows) {
|
if (startIndex >= nrows) {
|
||||||
|
|
@ -771,6 +696,94 @@ function setupInterface(data, file, urls) {
|
||||||
updateTable();
|
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",
|
$('#tableregion')[0].addEventListener("wheel",
|
||||||
function(event) {
|
function(event) {
|
||||||
|
|
||||||
|
|
@ -780,9 +793,12 @@ function setupInterface(data, file, urls) {
|
||||||
else stepsForward(1);
|
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',
|
wnd_listener.simple_combo('pageup',
|
||||||
function() {
|
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
|
// public interface
|
||||||
let that =
|
let that =
|
||||||
{
|
{
|
||||||
hasChanges: function () { return has_changes; }
|
hasChanges: function () { return has_changes; }
|
||||||
};
|
};
|
||||||
|
|
||||||
|
init();
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue