qurator-spk/neat
1
0
Fork 0
mirror of https://github.com/qurator-spk/neat.git synced 2025-10-31 00:34:14 +01:00
Code Issues Releases Wiki Activity

add slider navigation

Browse source
This commit is contained in:
Kai Labusch 2019-09-24 15:42:48 +02:00
parent 6e453859ca
commit 75205c7930
2 changed files with 64 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

71
ner-edith.js
View file

@ -23,19 +23,9 @@ var urls = null;
function setupInterface(data, file) { function setupInterface(data, file) {
function updateTable() { function updatePreview(nRow) {
let editable_html = if (urls == null) return;
`
<td class="editable">
`;
$('#table-body').empty();
function gotoLocation(evt) {
if (urls != null) {
let nRow = parseInt($(evt.target).text());
let img_url = urls.data[data.data[nRow]['url_id']]['url'] let img_url = urls.data[data.data[nRow]['url_id']]['url']
@ -43,10 +33,17 @@ function setupInterface(data, file) {
$("#preview").attr("src", img_url); $("#preview").attr("src", img_url);
$("#preview-link").attr("href", img_url); $("#preview-link").attr("href", img_url);
return;
} }
function gotoLocation(evt) {
if (urls != null) {
let nRow = parseInt($(evt.target).text());
updatePreview(nRow)
}
else {
let url_mapping_html = let url_mapping_html =
` `
<br/> <br/>
@ -60,6 +57,7 @@ function setupInterface(data, file) {
$("#tableregion").html(url_mapping_html); $("#tableregion").html(url_mapping_html);
$("#btn-region").empty(); $("#btn-region").empty();
$("#region-right").empty();
$('#goback').on('click', $('#goback').on('click',
function(evt) { function(evt) {
@ -78,6 +76,16 @@ function setupInterface(data, file) {
} }
); );
} }
}
function updateTable() {
let editable_html =
`
<td class="editable">
`;
$('#table-body').empty();
$.each(data.data, $.each(data.data,
function(nRow, el) { function(nRow, el) {
@ -116,7 +124,42 @@ function setupInterface(data, file) {
$("#table td:contains('I-TODO')").addClass('ner_todo'); $("#table td:contains('I-TODO')").addClass('ner_todo');
$(".offset").on('click', gotoLocation); $(".offset").on('click', gotoLocation);
updatePreview(startIndex)
if ($("#docpos").val() != startIndex) {
$("#docpos").val(data.data.length - startIndex);
} }
}
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;
console.log(startIndex);
updateTable();
});
$('#docpos').slider();
let table_html = let table_html =
` `

5
ner.edith.html
View file

@ -7,6 +7,7 @@
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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/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> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<style> <style>
body{font-family:Open Sans;font-size:16px} body{font-family:Open Sans;font-size:16px}
table{table-layout:fixed;width:100%;text-align:center} table{table-layout:fixed;width:100%;text-align:center}
@ -23,6 +24,10 @@
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
} }
input[type=range]::-moz-focus-outer {
border: 0;
}
</style> </style>
</head> </head>
<body> <body>