mirror of
				https://github.com/qurator-spk/neat.git
				synced 2025-10-30 16:24:12 +01:00 
			
		
		
		
	add slider navigation
This commit is contained in:
		
							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 updateTable() { | ||||
|     function updatePreview(nRow) { | ||||
| 
 | ||||
|         let editable_html = | ||||
|             ` | ||||
|                 <td class="editable"> | ||||
|             `;
 | ||||
|         if (urls == null) return; | ||||
| 
 | ||||
|         $('#table-body').empty(); | ||||
|         let img_url = urls.data[data.data[nRow]['url_id']]['url'] | ||||
| 
 | ||||
|         function gotoLocation(evt) { | ||||
|             if (urls != null) { | ||||
|         console.log(img_url); | ||||
| 
 | ||||
|                 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); | ||||
|                 $("#preview-link").attr("href", img_url); | ||||
| 
 | ||||
|                 return; | ||||
|             } | ||||
|             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,8 +124,43 @@ 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 = | ||||
|         ` | ||||
|         <table id="table"> | ||||
|  |  | |||
|  | @ -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> | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue