add slider navigation

5 years ago · 75205c7930
parent 6e453859ca
commit 75205c7930
2 changed files with 64 additions and 16 deletions
--- a/ner-edith.js
+++ b/ner-edith.js
@ -23,19 +23,9 @@ var urls = null;

 function setupInterface(data, file) {

-    function updateTable() {
+    function updatePreview(nRow) {

-        let editable_html =
-            `
-                <td class="editable">
-            `;
-
-        $('#table-body').empty();
-
-        function gotoLocation(evt) {
-            if (urls != null) {
-
-                let nRow = parseInt($(evt.target).text());
+        if (urls == null) return;

        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-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 =
                `
                <br/>
@ -60,6 +57,7 @@ function setupInterface(data, file) {

            $("#tableregion").html(url_mapping_html);
            $("#btn-region").empty();
+            $("#region-right").empty();

            $('#goback').on('click',
                function(evt) {
@ -78,6 +76,16 @@ function setupInterface(data, file) {
                }
            );
        }
+    }
+
+    function updateTable() {
+
+        let editable_html =
+            `
+                <td class="editable">
+            `;
+
+        $('#table-body').empty();

        $.each(data.data,
              function(nRow, el) {
@ -116,7 +124,42 @@ function setupInterface(data, file) {
        $("#table td:contains('I-TODO')").addClass('ner_todo');

        $(".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 =
        `
--- a/ner.edith.html
+++ b/ner.edith.html
@ -7,6 +7,7 @@
          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/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>
        body{font-family:Open Sans;font-size:16px}
        table{table-layout:fixed;width:100%;text-align:center}
@ -23,6 +24,10 @@
            width: 100%;
            object-fit: cover;
        }
+
+        input[type=range]::-moz-focus-outer {
+            border: 0;
+        }
    </style>
 </head>
 <body>