mirror of
https://github.com/qurator-spk/neat.git
synced 2025-06-09 11:49:54 +02:00
add slider navigation
This commit is contained in:
Kai Labusch
parent
6e453859ca
commit
75205c7930
2 changed files with 64 additions and 16 deletions
75
ner-edith.js
75
ner-edith.js
|
|
@ -23,30 +23,27 @@ 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();
|
let img_url = urls.data[data.data[nRow]['url_id']]['url']
|
||||||
|
|
||||||
function gotoLocation(evt) {
|
console.log(img_url);
|
||||||
if (urls != null) {
|
|
||||||
|
|
||||||
let nRow = parseInt($(evt.target).text());
|
$("#preview").attr("src", img_url);
|
||||||
|
$("#preview-link").attr("href", img_url);
|
||||||
|
}
|
||||||
|
|
||||||
let img_url = urls.data[data.data[nRow]['url_id']]['url']
|
function gotoLocation(evt) {
|
||||||
|
|
||||||
console.log(img_url);
|
if (urls != null) {
|
||||||
|
|
||||||
$("#preview").attr("src", img_url);
|
let nRow = parseInt($(evt.target).text());
|
||||||
$("#preview-link").attr("href", img_url);
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
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,8 +124,43 @@ 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 =
|
||||||
`
|
`
|
||||||
<table id="table">
|
<table id="table">
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue