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 @@
</div>
<div id="TiffModalBody">
<button id = "prev-button">prev</button>
<!-- <button id = "prev-button">prev</button>
<button id = "next-button">next</button>
<button id="fit-content">Fit-Content</button>
<button id="rotate-right">Rotate Right</button>
......@@ -164,7 +164,7 @@
<button id="flip-horizontal">Flip Horizontal</button>
<div id="page-info"></div>
<div id="zoom-info"></div>
<div id="pdf-container"></div>
<div id="pdf-container"></div> -->
</div>
<div >
......
WebGde/WebContent/src/BPO/rejectElement.js
......@@ -127,6 +127,10 @@ function createRejectWindow(){
screenMain.style.display = 'none';
rejectButton.disabled = false;
popUpDisplay.remove();
var fileName = sessionStorage.getItem("file_Name");
if(fileName !== null && fileName !== undefined){
document.getElementById("controlsContainer").style.display = "none";
}
}
cancelButton.onclick = function () {
......
WebGde/WebContent/src/BPO/returnElement.js
......@@ -72,6 +72,12 @@ returnButton.addEventListener("click", function () {
returnElementBPO(sessionStorage.getItem("element_id"));
// const fieldForm = document.getElementById("fields");
// 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() {
idQuery.onsuccess = function() {
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_Path = idQuery.result.path;
// store.delete(parseInt(localStorage.getItem("display_counter")) - 1);
......@@ -78,7 +91,19 @@ async function accessFile() {
const idQuery = store.get(parseInt(localStorage.getItem("display_counter")));
idQuery.onsuccess = function() {
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_Path = idQuery.result.path;
// store.delete(parseInt(localStorage.getItem("display_counter")) - 1);
......@@ -151,10 +176,9 @@ async function accessFile() {
const db = request2.result;
const transaction = db.transaction("image", "readwrite");
const store = transaction.objectStore("image");
const imageIndex = store.index("image_address");
var filename;
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() {
store.put({ id: count.result + 1, address: blob , name:filename, path:img});
url = URL.createObjectURL(blob);
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);
} else {
console.log("This is not a pdf file");
......@@ -178,7 +209,6 @@ async function accessFile() {
File_Name = filename;
File_Path = img;
populateFields();
var file = new File([blob], filename + ".TIFF", {type: "img"}); //uplaod to uploadimgfolder //scanned images
} else if (count.result == 1 && (localStorage.length) == 1) {
document.getElementById('prev').setAttribute('disabled','true');
......@@ -188,7 +218,6 @@ async function accessFile() {
localStorage.setItem("display_counter", 2);
localStorage.setItem("sfIndex", 1);
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
......@@ -293,7 +322,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')+'/element7');
getFolder(FOLDER_URL+sessionStorage.getItem('user_id')+'/element8');
}else{
if((localStorage.length)==0){
if(updated_input_files.length==0){
......@@ -527,6 +556,13 @@ function refreshImage() {
idQuery.onsuccess = function () {
url = URL.createObjectURL(idQuery.result.address);
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);
} else {
console.log("This is not a pdf file");
......
WebGde/WebContent/src/highlight/highlight.js
......@@ -16,10 +16,15 @@ function createHighlight(width, height){
ctx = highlightCanvas.getContext("2d");
highlightCanvas.classList.add("TiffViewer_imgclass");
// document.getElementById('TiffViewer_ImageContainer').append(highlightCanvas);
var imgContainer;
//inserts canvas before the TIFF image to fix its position at the top/first page
var imgContainer = document.getElementById('TiffViewer_ImageContainer');
imgContainer.insertBefore(highlightCanvas, imgContainer.firstChild);
if(sessionStorage.getItem("file_Name").endsWith(PDF_EXTENSION)){
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
//z-index is increased to put it above the TIFF image
......@@ -182,29 +187,54 @@ function initHighlight() {
//waits until TIFF image is loaded, since its size is based on the displayed TIFF image
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) {
//waits until width and height has been assigned
var sizeObserver = new window.ResizeObserver(entries => {
if(isCanvasNotCreated){
rect = document.getElementById(sessionStorage.getItem("TiffViewer_current")).getBoundingClientRect();
if(sessionStorage.getItem("file_Name").endsWith(PDF_EXTENSION)){
if(isCanvasNotCreated){
rect = canvas.getBoundingClientRect();
// createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
isCanvasNotCreated = false;
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();
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;
}
// createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
isCanvasNotCreated = false;
ctx.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height);
}
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 () {
$('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
var prevButton = document.getElementById('prev-button');
var nextButton = document.getElementById('next-button');
// Fit Content
var fitContentButton = document.getElementById('fit-content');
// Get the rotate left and rotate right buttons
var rotateLeftButton = document.getElementById('rotate-left');
var rotateRightButton = document.getElementById('rotate-right');
// Get the zoom in and zoom out buttons
var zoomInButton = document.getElementById('zoom-in');
var zoomOutButton = document.getElementById('zoom-out');
// Get the flip vertical and flip horizontal buttons
var flipVerticalButton = document.getElementById('flip-vertical');
var flipHorizontalButton = document.getElementById('flip-horizontal');
//info's
var pageInfo = document.getElementById('page-info');
var zoomInfo = document.getElementById('zoom-info');
var prevButton = document.createElement('button');
prevButton.setAttribute('id', 'prev-button');
prevButton.textContent = 'Prev';
var nextButton = document.createElement('button');
nextButton.setAttribute('id', 'next-button');
nextButton.textContent = 'Next';
var fitContentButton = document.createElement('button');
fitContentButton.setAttribute('id', 'fit-content');
fitContentButton.textContent = 'Fit-content';
var rotateRightButton = document.createElement('button');
rotateRightButton.setAttribute('id', 'rotate-right');
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
var canvas = document.createElement('canvas');
var displayPdf = function(document) {
......@@ -157,7 +208,8 @@ function renderPage(pageNumber) {
}
// Render the first page
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