Skip to content

W
web-ui
Commit 31af58ed by Jorem Magcawas
Options

commit integration of pdf viewer

parent d76941cc
Showing with 173 additions and 45 deletions
WebGde/WebContent/index.html
...@@ -153,7 +153,7 @@ ...@@ -153,7 +153,7 @@
</div> </div>
<div id="TiffModalBody"> <div id="TiffModalBody">
<button id = "prev-button">prev</button> <!-- <button id = "prev-button">prev</button>
<button id = "next-button">next</button> <button id = "next-button">next</button>
<button id="fit-content">Fit-Content</button> <button id="fit-content">Fit-Content</button>
<button id="rotate-right">Rotate Right</button> <button id="rotate-right">Rotate Right</button>
...@@ -164,7 +164,7 @@ ...@@ -164,7 +164,7 @@
<button id="flip-horizontal">Flip Horizontal</button> <button id="flip-horizontal">Flip Horizontal</button>
<div id="page-info"></div> <div id="page-info"></div>
<div id="zoom-info"></div> <div id="zoom-info"></div>
<div id="pdf-container"></div> <div id="pdf-container"></div> -->
</div> </div>
<div > <div >
......
WebGde/WebContent/src/BPO/rejectElement.js
...@@ -127,6 +127,10 @@ function createRejectWindow(){ ...@@ -127,6 +127,10 @@ function createRejectWindow(){
screenMain.style.display = 'none'; screenMain.style.display = 'none';
rejectButton.disabled = false; rejectButton.disabled = false;
popUpDisplay.remove(); popUpDisplay.remove();
var fileName = sessionStorage.getItem("file_Name");
if(fileName !== null && fileName !== undefined){
document.getElementById("controlsContainer").style.display = "none";
}
} }
cancelButton.onclick = function () { cancelButton.onclick = function () {
......
WebGde/WebContent/src/BPO/returnElement.js
...@@ -72,6 +72,12 @@ returnButton.addEventListener("click", function () { ...@@ -72,6 +72,12 @@ returnButton.addEventListener("click", function () {
returnElementBPO(sessionStorage.getItem("element_id")); returnElementBPO(sessionStorage.getItem("element_id"));
// const fieldForm = document.getElementById("fields"); // const fieldForm = document.getElementById("fields");
// fieldForm.querySelector('input[type="submit"]').click(); // fieldForm.querySelector('input[type="submit"]').click();
var fileName = sessionStorage.getItem("file_Name");
if(fileName !== null && fileName !== undefined){
document.getElementById("controlsContainer").style.display = "none";
}
}); });
......
WebGde/WebContent/src/accessFile/accessFile.js
...@@ -67,7 +67,20 @@ async function accessFile() { ...@@ -67,7 +67,20 @@ async function accessFile() {
idQuery.onsuccess = function() { idQuery.onsuccess = function() {
url = URL.createObjectURL(idQuery.result.address); url = URL.createObjectURL(idQuery.result.address);
window.addEventListener("load", loadDoc(url, TIFFViewer, idQuery.result.name), false); if (filename.endsWith(PDF_EXTENSION)) {
sessionStorage.setItem("file_Name", idQuery.result.name);
const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.style.textAlign = "center";
TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name;
TiffViewer_Header.append(TiffViewer_filedetail);
displayPdf(img);
} else {
console.log("This is not a pdf file");
window.addEventListener("load", loadDoc(url, TIFFViewer, idQuery.result.name), false);
}
// File_Name = idQuery.result.name; // File_Name = idQuery.result.name;
// File_Path = idQuery.result.path; // File_Path = idQuery.result.path;
// store.delete(parseInt(localStorage.getItem("display_counter")) - 1); // store.delete(parseInt(localStorage.getItem("display_counter")) - 1);
...@@ -78,7 +91,19 @@ async function accessFile() { ...@@ -78,7 +91,19 @@ async function accessFile() {
const idQuery = store.get(parseInt(localStorage.getItem("display_counter"))); const idQuery = store.get(parseInt(localStorage.getItem("display_counter")));
idQuery.onsuccess = function() { idQuery.onsuccess = function() {
url = URL.createObjectURL(idQuery.result.address); url = URL.createObjectURL(idQuery.result.address);
window.addEventListener("load", loadDoc(url, TIFFViewer, idQuery.result.name), false); if (filename.endsWith(PDF_EXTENSION)) {
sessionStorage.setItem("file_Name", idQuery.result.name);
const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.style.textAlign = "center";
TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name;
TiffViewer_Header.append(TiffViewer_filedetail);
displayPdf(img);
} else {
console.log("This is not a pdf file");
window.addEventListener("load", loadDoc(url, TIFFViewer, idQuery.result.name), false);
}
// File_Name = idQuery.result.name; // File_Name = idQuery.result.name;
// File_Path = idQuery.result.path; // File_Path = idQuery.result.path;
// store.delete(parseInt(localStorage.getItem("display_counter")) - 1); // store.delete(parseInt(localStorage.getItem("display_counter")) - 1);
...@@ -151,10 +176,9 @@ async function accessFile() { ...@@ -151,10 +176,9 @@ async function accessFile() {
const db = request2.result; const db = request2.result;
const transaction = db.transaction("image", "readwrite"); const transaction = db.transaction("image", "readwrite");
const store = transaction.objectStore("image"); const store = transaction.objectStore("image");
const imageIndex = store.index("image_address"); var filename;
if(img!=null){ if(img!=null){
var filename = gfsFileName != null ? gfsFileName : get_file_name(img); filename = gfsFileName != null ? gfsFileName : get_file_name(img);
} }
...@@ -167,6 +191,13 @@ async function accessFile() { ...@@ -167,6 +191,13 @@ async function accessFile() {
store.put({ id: count.result + 1, address: blob , name:filename, path:img}); store.put({ id: count.result + 1, address: blob , name:filename, path:img});
url = URL.createObjectURL(blob); url = URL.createObjectURL(blob);
if (filename.endsWith(PDF_EXTENSION)) { if (filename.endsWith(PDF_EXTENSION)) {
sessionStorage.setItem("file_Name", filename);
const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.style.textAlign = "center";
TiffViewer_filedetail.textContent = "Filename: " + filename;
TiffViewer_Header.append(TiffViewer_filedetail);
displayPdf(img); displayPdf(img);
} else { } else {
console.log("This is not a pdf file"); console.log("This is not a pdf file");
...@@ -178,7 +209,6 @@ async function accessFile() { ...@@ -178,7 +209,6 @@ async function accessFile() {
File_Name = filename; File_Name = filename;
File_Path = img; File_Path = img;
populateFields(); populateFields();
var file = new File([blob], filename + ".TIFF", {type: "img"}); //uplaod to uploadimgfolder //scanned images
} else if (count.result == 1 && (localStorage.length) == 1) { } else if (count.result == 1 && (localStorage.length) == 1) {
document.getElementById('prev').setAttribute('disabled','true'); document.getElementById('prev').setAttribute('disabled','true');
...@@ -188,7 +218,6 @@ async function accessFile() { ...@@ -188,7 +218,6 @@ async function accessFile() {
localStorage.setItem("display_counter", 2); localStorage.setItem("display_counter", 2);
localStorage.setItem("sfIndex", 1); localStorage.setItem("sfIndex", 1);
size = size + total; size = size + total;
var file = new File([blob], filename + ".TIFF", {type: "img"}); //uplaod to uploadimgfolder //scanned images
} else if(totalImages != (parseInt(localStorage.getItem("sfIndex"))) && img == null && count.result >= 2 && (localStorage.length) >= 2 && localStorage.getItem("submit") == 1){ //if only one file left } else if(totalImages != (parseInt(localStorage.getItem("sfIndex"))) && img == null && count.result >= 2 && (localStorage.length) >= 2 && localStorage.getItem("submit") == 1){ //if only one file left
...@@ -293,7 +322,7 @@ async function accessFile() { ...@@ -293,7 +322,7 @@ async function accessFile() {
if(IS_RETRIEVE_FROM_GFS == "Y"){ if(IS_RETRIEVE_FROM_GFS == "Y"){
const modal = document.getElementById("TiffViewerModal"); const modal = document.getElementById("TiffViewerModal");
modal.style.display = 'none';//hide local modal\ modal.style.display = 'none';//hide local modal\
getFolder(FOLDER_URL+sessionStorage.getItem('user_id')+'/element7'); getFolder(FOLDER_URL+sessionStorage.getItem('user_id')+'/element8');
}else{ }else{
if((localStorage.length)==0){ if((localStorage.length)==0){
if(updated_input_files.length==0){ if(updated_input_files.length==0){
...@@ -527,6 +556,13 @@ function refreshImage() { ...@@ -527,6 +556,13 @@ function refreshImage() {
idQuery.onsuccess = function () { idQuery.onsuccess = function () {
url = URL.createObjectURL(idQuery.result.address); url = URL.createObjectURL(idQuery.result.address);
if (idQuery.result.name.endsWith(PDF_EXTENSION)) { if (idQuery.result.name.endsWith(PDF_EXTENSION)) {
sessionStorage.setItem("file_Name", idQuery.result.name);
const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.style.textAlign = "center";
TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name;
TiffViewer_Header.append(TiffViewer_filedetail);
displayPdf(idQuery.result.path); displayPdf(idQuery.result.path);
} else { } else {
console.log("This is not a pdf file"); console.log("This is not a pdf file");
......
WebGde/WebContent/src/highlight/highlight.js
...@@ -16,10 +16,15 @@ function createHighlight(width, height){ ...@@ -16,10 +16,15 @@ function createHighlight(width, height){
ctx = highlightCanvas.getContext("2d"); ctx = highlightCanvas.getContext("2d");
highlightCanvas.classList.add("TiffViewer_imgclass"); highlightCanvas.classList.add("TiffViewer_imgclass");
// document.getElementById('TiffViewer_ImageContainer').append(highlightCanvas); // document.getElementById('TiffViewer_ImageContainer').append(highlightCanvas);
var imgContainer;
//inserts canvas before the TIFF image to fix its position at the top/first page //inserts canvas before the TIFF image to fix its position at the top/first page
var imgContainer = document.getElementById('TiffViewer_ImageContainer'); if(sessionStorage.getItem("file_Name").endsWith(PDF_EXTENSION)){
imgContainer.insertBefore(highlightCanvas, imgContainer.firstChild); imgContainer = document.getElementById('TiffModalBody');
imgContainer.insertBefore(highlightCanvas, imgContainer.firstChild);
}else{
imgContainer = document.getElementById('TiffViewer_ImageContainer');
imgContainer.insertBefore(highlightCanvas, imgContainer.firstChild);
}
//set style for highlight canvas //set style for highlight canvas
//z-index is increased to put it above the TIFF image //z-index is increased to put it above the TIFF image
...@@ -182,29 +187,54 @@ function initHighlight() { ...@@ -182,29 +187,54 @@ function initHighlight() {
//waits until TIFF image is loaded, since its size is based on the displayed TIFF image //waits until TIFF image is loaded, since its size is based on the displayed TIFF image
const observer = new MutationObserver(function (mutations, mutationInstance) { const observer = new MutationObserver(function (mutations, mutationInstance) {
var TIFFimg = document.getElementById(sessionStorage.getItem("TiffViewer_current")); var TIFFimg = document.getElementById(sessionStorage.getItem("TiffViewer_current"));
var parentDiv = document.getElementById("pdf-container");
var canvas = parentDiv.querySelector("canvas");
if(sessionStorage.getItem("file_Name").endsWith(PDF_EXTENSION)){
TIFFimg = canvas;
}
if (TIFFimg != null) { if (TIFFimg != null) {
//waits until width and height has been assigned //waits until width and height has been assigned
var sizeObserver = new window.ResizeObserver(entries => { var sizeObserver = new window.ResizeObserver(entries => {
if(sessionStorage.getItem("file_Name").endsWith(PDF_EXTENSION)){
if(isCanvasNotCreated){ if(isCanvasNotCreated){
rect = document.getElementById(sessionStorage.getItem("TiffViewer_current")).getBoundingClientRect(); rect = canvas.getBoundingClientRect();
// createHighlight(entries[0].contentRect.width, entries[0].contentRect.height); // createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
createHighlight(entries[0].contentRect.width, entries[0].contentRect.height); createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
isCanvasNotCreated = false; isCanvasNotCreated = false;
ctx.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height); ctx.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height);
} }
else{ else{
rect = canvas.getBoundingClientRect();
if(isInitialPositioning){
resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left-263));
}
else{
resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left));
isInitialPositioning = true;
}
}
}else{
if(isCanvasNotCreated){
rect = document.getElementById(sessionStorage.getItem("TiffViewer_current")).getBoundingClientRect(); rect = document.getElementById(sessionStorage.getItem("TiffViewer_current")).getBoundingClientRect();
if(isInitialPositioning){ // createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left-263)); createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
} isCanvasNotCreated = false;
else{ ctx.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height);
resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left)); }
isInitialPositioning = true; else{
} rect = document.getElementById(sessionStorage.getItem("TiffViewer_current")).getBoundingClientRect();
if(isInitialPositioning){
resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left-263));
}
else{
resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left));
isInitialPositioning = true;
}
}
} }
$(document).ready(function () { $(document).ready(function () {
$('form:first *:input[type!=hidden]:first').focus(); // Run code $('form:first *:input[type!=hidden]:first').focus(); // Run code
}); });
......
WebGde/WebContent/src/pdfviewer/pdfv.js
var container = document.getElementById("pdf-container"); //Create all Elements
var container = document.createElement('div');
container.setAttribute('id', 'pdf-container');
// Get the next and previous buttons // Get the next and previous buttons
var prevButton = document.getElementById('prev-button');
var nextButton = document.getElementById('next-button'); var prevButton = document.createElement('button');
// Fit Content prevButton.setAttribute('id', 'prev-button');
var fitContentButton = document.getElementById('fit-content'); prevButton.textContent = 'Prev';
// Get the rotate left and rotate right buttons
var rotateLeftButton = document.getElementById('rotate-left'); var nextButton = document.createElement('button');
var rotateRightButton = document.getElementById('rotate-right'); nextButton.setAttribute('id', 'next-button');
// Get the zoom in and zoom out buttons nextButton.textContent = 'Next';
var zoomInButton = document.getElementById('zoom-in');
var zoomOutButton = document.getElementById('zoom-out'); var fitContentButton = document.createElement('button');
// Get the flip vertical and flip horizontal buttons fitContentButton.setAttribute('id', 'fit-content');
var flipVerticalButton = document.getElementById('flip-vertical'); fitContentButton.textContent = 'Fit-content';
var flipHorizontalButton = document.getElementById('flip-horizontal');
//info's var rotateRightButton = document.createElement('button');
var pageInfo = document.getElementById('page-info'); rotateRightButton.setAttribute('id', 'rotate-right');
var zoomInfo = document.getElementById('zoom-info'); rotateRightButton.textContent = 'Rotate-Right';
var rotateLeftButton = document.createElement('button');
rotateLeftButton.setAttribute('id', 'rotate-left');
rotateLeftButton.textContent = 'Rotate-Light';
var zoomInButton = document.createElement('button');
zoomInButton.setAttribute('id', 'zoom-in');
zoomInButton.textContent = 'Zoom-in';
var zoomOutButton = document.createElement('button');
zoomOutButton.setAttribute('id', 'zoom-in');
zoomOutButton.textContent = 'Zoom-out';
var flipVerticalButton = document.createElement('button');
flipVerticalButton.setAttribute('id', 'flip-vertical');
flipVerticalButton.textContent = 'Flip-vertical';
var flipHorizontalButton = document.createElement('button');
flipHorizontalButton.setAttribute('id', 'flip-horizontal');
flipHorizontalButton.textContent = 'Flip-horizontal';
var pageInfo = document.createElement('span');
pageInfo.setAttribute('id', 'page-info');
var zoomInfo = document.createElement('span');
zoomInfo.setAttribute('id', 'page-info');
var Tiffbody = document.getElementById("TiffModalBody");
Tiffbody.appendChild(container);
var footer = document.getElementById("TiffModalFooter");
var controllsContainer = document.createElement("div");
controllsContainer.setAttribute('id', 'controlsContainer');
footer.appendChild(controllsContainer);
controllsContainer.appendChild(prevButton);
controllsContainer.appendChild(nextButton);
controllsContainer.appendChild(fitContentButton);
controllsContainer.appendChild(rotateRightButton);
controllsContainer.appendChild(rotateLeftButton);
controllsContainer.appendChild(zoomInButton);
controllsContainer.appendChild(zoomOutButton);
controllsContainer.appendChild(flipVerticalButton);
controllsContainer.appendChild(flipHorizontalButton);
controllsContainer.appendChild(flipHorizontalButton);
controllsContainer.appendChild(pageInfo);
controllsContainer.appendChild(zoomInfo);
//canva's //canva's
var canvas = document.createElement('canvas'); var canvas = document.createElement('canvas');
var displayPdf = function(document) { var displayPdf = function(document) {
...@@ -157,7 +208,8 @@ function renderPage(pageNumber) { ...@@ -157,7 +208,8 @@ function renderPage(pageNumber) {
} }
// Render the first page // Render the first page
renderPage(currentPage); renderPage(currentPage);
// Render highlight on the pdf canvas
initHighlight();
}); });
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment