seamless ongoing

WebGde/WebContent/src/accessFile/accessFile.js

@@ -205,6 +205,7 @@ async function accessFile() {
 									}
                                     									
                                     localStorage.setItem("display_counter", 1);
+                                    sessionStorage.setItem('isLoadedFirstImg', "true");
                                     size = size + total;
                                     File_Name = filename;
                                     File_Path = img;                           
@@ -214,11 +215,17 @@ async function accessFile() {
 									document.getElementById('prev').setAttribute('disabled','true');
 									document.getElementById('next').removeAttribute('disabled');
                                     store.put({ id: count.result + 1, address: blob , name:filename, path:img});
+                                    //start
+                                    url = URL.createObjectURL(blob);
+                                    window.addEventListener("load", loadDoc(url, TIFFViewer,filename), false);
+                                    //end
                                     localStorage.setItem("submit", "0");
                                     localStorage.setItem("display_counter", 2);
 									localStorage.setItem("sfIndex", 1);									
                                     size = size + total;
-                                    
+                                    File_Name = filename;
+                                    File_Path = img;                           
+									/*populateFields();*/
 
                                 } else if(totalImages != (parseInt(localStorage.getItem("sfIndex"))) && img == null && count.result >= 2 && (localStorage.length) >= 2 && localStorage.getItem("submit") == 1){ //if only one file left
                                     const idQuery = store.get(parseInt(localStorage.getItem("display_counter")));
@@ -308,7 +315,7 @@ async function accessFile() {
                                 }    
                         }
 
-
+						
                         transaction.oncomplete = function () {
                             db.close();
                             status('downloaded '+Math.trunc(size/1000)+" kb");
@@ -322,7 +329,7 @@ async function accessFile() {
                 if(IS_RETRIEVE_FROM_GFS == "Y"){
                     const modal = document.getElementById("TiffViewerModal");
                     modal.style.display = 'none';//hide local modal\
-                    getFolder(FOLDER_URL+sessionStorage.getItem('user_id')+'/element6');                  
+                    getFolder(FOLDER_URL+sessionStorage.getItem('user_id')+'/element5');                  
                 }else{
                     if((localStorage.length)==0){
                         if(updated_input_files.length==0){
@@ -478,9 +485,7 @@ async function accessFile() {
                             removeOverlay();
                             createInfoPopup("Whoops!", "We encountered some problems with your request. Rest assured we're working on this and it'll be okay soon.");
                         });
-                
-                
-                
+
                    return promise;
                 }
 

WebGde/WebContent/src/tiffViewer/tiffViewer.js

@@ -86,6 +86,10 @@ function loadDoc(url, cFunction, filename) {
 function TIFFViewer(xhr, TiffViewerImageName) {
     var buffer = xhr;
     var TiffViewerImageName = TiffViewerImageName;
+    
+    const parts = TiffViewerImageName.split(".");
+	parts.pop();
+	const filenameWithoutExt = parts.join(".");
 
     var flippedX = new Array(),
         flippedY = new Array(),
@@ -111,7 +115,7 @@ function TIFFViewer(xhr, TiffViewerImageName) {
     let changed = false;
     let TiffViewer_pages = 0; //page count
     let TiffViewer_current = 1; // TiffViewer_current page number
-    sessionStorage.setItem("TiffViewer_current", "IMG" + TiffViewer_current);
+    sessionStorage.setItem("TiffViewer_current", filenameWithoutExt + TiffViewer_current);
     if (localStorage.getItem("prev") == 1) {
         Current_page = Current_page - 1;
     } else {
@@ -279,7 +283,6 @@ function TIFFViewer(xhr, TiffViewerImageName) {
     TiffViewer_vflip.append(vflipIcon)
 
     TiffViewer_Header.append(TiffViewer_detailcont);
-
     TiffViewer_Body.append(multiTiffDiv);
     TiffViewer_Body.append(TiffViewer_filecont);
     TiffViewer_Footer.append(zoom, TiffViewer_btncont);
@@ -319,7 +322,7 @@ function TIFFViewer(xhr, TiffViewerImageName) {
     //creating blank image containers for each page and setting TIFF data as image source
     for (var i = 1; i <= TiffViewer_pages; i++) {
         var img = document.createElement('img');
-        img.id = `IMG${i}`;
+        img.id = filenameWithoutExt + i;
         if (i != 1) {
             img.style.display = "none";
             wzoom[TiffViewer_current - 1] = changedwidth; /*ADDED: to fit large TIFF files*/
@@ -330,13 +333,13 @@ function TIFFViewer(xhr, TiffViewerImageName) {
         img.classList.add("TiffViewer_imgclass");
         tiff.setDirectory(i - 1);
         var canvas = tiff.toCanvas().toDataURL();
-        document.getElementById(`IMG${i}`).src = canvas;
+        document.getElementById(filenameWithoutExt + i).src = canvas;
 
     }
     //setting the style per page
     for (var j = 1; j <= TiffViewer_pages; j++) {
-        var img = document.getElementById("IMG" + j);
-        getMeta(canvas, function(width, height) {
+        	var img = document.getElementById(filenameWithoutExt + j);
+        	getMeta(canvas, function(width, height) {
             wzoom[TiffViewer_current - 1] = changedwidth; /*ADDED: to fit large TIFF files*/
             hzoom[TiffViewer_current - 1] = changedheight;
             Edited();
@@ -389,20 +392,21 @@ function TIFFViewer(xhr, TiffViewerImageName) {
             TiffViewer_scrn.style = `width: ${setwidth}; height: ${setheight};`;
             document.getElementById("TiffViewer_FileContainer").style = `width: ${setwidth}; height: ${setheight};`;
             TiffViewer_ImageContainer.style = `width: ${setwidth}; height: ${setheight};`;
-        });
-        checker.push(0);
-        flippedX.push(1);
-        flippedY.push(1);
-        rot.push(0);
-        if (j === 1) {
-            img.style.display = "flex";
-        }
+            
+	        });
+	        checker.push(0);
+	        flippedX.push(1);
+	        flippedY.push(1);
+	        rot.push(0);
+	        if (j === 1) {
+	            img.style.display = "flex";
+	        }
 
     }
 
     if (TiffViewer_pages > 1) {
         for (var j = 1; j <= TiffViewer_pages; j++) {
-            var img = document.getElementById("IMG" + j).style.display = "none";
+            var img = document.getElementById(filenameWithoutExt + j).style.display = "none";
         }
     }
 
@@ -418,7 +422,7 @@ function TIFFViewer(xhr, TiffViewerImageName) {
 
     //display image in fullscreen
     document.getElementById("TiffViewer_FullscreenButton").onclick = function() {
-        var image = document.getElementById(`IMG${TiffViewer_current}`);
+        var image = document.getElementById(filenameWithoutExt + TiffViewer_current);
         if (image.requestFullscreen) {
             image.requestFullscreen();
         } else if (image.msRequestFullscreen) {
@@ -563,9 +567,9 @@ function TIFFViewer(xhr, TiffViewerImageName) {
         if (TiffViewer_pages > 1) {
             if (TiffViewer_current != 1) {
                 document.getElementById("TiffViewer_ImageContainer").classList.remove("active");
-                document.getElementById(`IMG${TiffViewer_current}`).style.display = "none";
+                document.getElementById(filenameWithoutExt+`${TiffViewer_current}`).style.display = "none";
                 TiffViewer_current--;
-                sessionStorage.setItem("TiffViewer_current", "IMG" + TiffViewer_current);
+                sessionStorage.setItem("TiffViewer_current", filenameWithoutExt + TiffViewer_current);
                 document.getElementById("TiffViewer_PageCount").innerHTML = "Page: " + TiffViewer_current + " / " + TiffViewer_pages;
                 Edited();
                 initHighlight();
@@ -588,9 +592,9 @@ function TIFFViewer(xhr, TiffViewerImageName) {
         if (TiffViewer_pages > 1) {
             if (TiffViewer_current != TiffViewer_pages) {
                 document.getElementById("TiffViewer_ImageContainer").classList.remove("active");
-                document.getElementById(`IMG${TiffViewer_current}`).style = "display: none";
+                document.getElementById(filenameWithoutExt+`${TiffViewer_current}`).style = "display: none";
                 TiffViewer_current++;
-                sessionStorage.setItem("TiffViewer_current", "IMG" + TiffViewer_current);
+                sessionStorage.setItem("TiffViewer_current", filenameWithoutExt + TiffViewer_current);
                 document.getElementById("TiffViewer_PageCount").innerHTML = "Page: " + TiffViewer_current + " / " + TiffViewer_pages;
                 Edited();
                 initHighlight();
@@ -632,7 +636,7 @@ function TIFFViewer(xhr, TiffViewerImageName) {
         var TiffViewer_imgclass = document.getElementById("TiffViewer_FileContainer");
         var TiffViewer_Screen = document.getElementById("TiffViewer_Screen");
         var TiffViewer_ImageContainer = document.getElementById("TiffViewer_ImageContainer");
-        var image = document.getElementById(`IMG${TiffViewer_current}`);
+        var image = document.getElementById(filenameWithoutExt+`${TiffViewer_current}`);
         //if the image is rotated 90 degrees
         if (rot[TiffViewer_current - 1] == 90 || rot[TiffViewer_current - 1] == 270 || rot[TiffViewer_current - 1] == -90 || rot[TiffViewer_current - 1] == -270) {
 

WebGde/WebContent/style.css

@@ -802,6 +802,7 @@ span#page-info {
 	margin: auto;
 }
 
+
 .bar {
    width: 207px;
     position: absolute;