diff options
Diffstat (limited to 'pdf-as-web/src/main/webapp/assets/js')
5 files changed, 452 insertions, 84 deletions
diff --git a/pdf-as-web/src/main/webapp/assets/js/dragNdrop.js b/pdf-as-web/src/main/webapp/assets/js/dragNdrop.js index b66073e6..940804bd 100644 --- a/pdf-as-web/src/main/webapp/assets/js/dragNdrop.js +++ b/pdf-as-web/src/main/webapp/assets/js/dragNdrop.js @@ -9,11 +9,6 @@ function registerEventListeners() { var locale = "EN"; var connector = "mobilebku"; - window.addEventListener("message", function receiveMessage(evt) { - var iframewindow = document.getElementById("iFrame"); - iframewindow.contentWindow.postMessage(file, "*"); - }, false); - $(document).bind("dragover", function(evt) { evt.preventDefault(); }); @@ -49,12 +44,10 @@ function registerEventListeners() { evt.preventDefault(); evt.stopPropagation(); unhighlightDropzone(); - var files = evt.originalEvent.dataTransfer.files; if(files == null || files.length === 0) { return; } - file = files[0]; previewFile(); }); @@ -65,7 +58,6 @@ function registerEventListeners() { if(files == null || files.length === 0) { return; } - file = files[0]; previewFile(file); }); @@ -83,31 +75,34 @@ function registerEventListeners() { }); } +// +//Creates an PDF.js instance within the PDF preview section and displays +//the user selected PDF document. +// function previewFile() { clearContentDiv(); createIframe(); } +// +//Calls the sign servlet with the provided file and the provided connector and locale +// function sign(file, connector, locale) { if(file == null) { alert("No file selected"); return } - var fd = new FormData(); fd.append("source", "internal"); fd.append("pdf-file", file); fd.append("connector", connector); fd.append("locale", locale); - signature_overlay = $("#iFrame").contents().find(".cl_signature"); - if(signature_overlay.length > 0) { - var sig_pos_x = $("#iFrame").contents().find(".cl_signature").attr("data-pos-x"); - var sig_pos_y = $("#iFrame").contents().find(".cl_signature").attr("data-pos-y"); - var sig_pos_p = $("#iFrame").contents().find(".cl_signature").attr("data-page"); - fd.append("sig-pos-x", sig_pos_x); - fd.append("sig-pos-y", sig_pos_y); - fd.append("sig-pos-p", sig_pos_p); + ifr = document.getElementById('iFrame').contentWindow; + if(ifr.isSignaturePlaced()) { //Signature has been manually placed + fd.append("sig-pos-x", ifr.global_status.getSignature().posx); + fd.append("sig-pos-y", ifr.global_status.getSignature().posy); + fd.append("sig-pos-p", ifr.global_status.getSignature().page); } $.ajax({ @@ -117,24 +112,45 @@ function sign(file, connector, locale) { contentType: false, type: "POST", success: function(response) { - $("html").empty(); - $("html").html(response); + $("#fade").remove(); + $("#popup").remove(); + var fade_div = "<div id='fade' class='black_overlay'></div>"; + var popup_div = "<div id='popup' class='white_content'><a href='javascript:void(0)' id='closelink'>Close</a><div id='resp'></div></div>" + $("body").append(fade_div); + $("body").append(popup_div); + $("#resp").html(response); + $("#closelink").bind("click", function(evt) { + $("#fade").remove(); + $("#popup").remove(); + }); } }); } +// +//Changes color if the user drags a file over the dropzone +// function highlightDropzone() { $("#dropzone").css("background", "#D8FFD8"); } +// +//Changes color back to original, if the user stops dragging a file over the dropzone (or drops the file) +// function unhighlightDropzone() { $("#dropzone").css("background", "#E8F4FF"); } +// +//Removes all content that is inside of the PDF Preview section +// function clearContentDiv() { $("#content").empty(); } +// +//Inserts an Iframe with a PDF.js instance into the PDF Preview section +// function createIframe() { $("#content").append("<iframe src='assets/js/pdf.js/web/viewer.html' height='863px' width='800px' id='iFrame'></iframe>"); } diff --git a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/app.js b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/app.js index 361169bb..6e16c306 100644 --- a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/app.js +++ b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/app.js @@ -1,31 +1,163 @@ +// +//A global status object +// +var global_status = new statusObject(); -function setFileForParent(file) { +// +//statusObject Definition +// +function statusObject() { + this.pdf_url = null; + this.redirect_url = null; + this.connector = null; + this.file_path = null; + this.file = null; + this.signature = null, + + this.setFile = function(f) { + this.file = f; + } + + this.getFile = function() { + return this.file; + } + + this.setPdfUlr = function(pdfurl) { + this.pdf_url = pdfurl; + } + + this.getPdfUrl = function() { + return this.pdf_url; + } + + this.setRedirectUrl = function(rurl) { + this.redirect_url = rurl; + } + + this.getRedirectUrl = function() { + return this.redirect_url; + } + + this.setConnector = function(con) { + this.connector = con; + } + + this.getConnector = function() { + return this.connector; + } + + this.setFilePath = function(f) { + this.file_path = f; + } + + this.getFilePath = function() { + return this.file_path; + } + + this.setSignature = function(s) { + this.signature = s; + } + + this.getSignature = function() { + return this.signature; + } + } + +// +//Updates the selected File for the current Frame as well as +//for the parent frame if such exists +//This function is called if a new File is opened via the +//PDF.js Menu-Bar +// +function setFile(pdf_file) { if (window.self != window.parent) { - window.parent.file = file; + window.parent.file = pdf_file; } + global_status.setFile(pdf_file); + removeSignature(); } -window.addEventListener("message", handlePostMessage, false); +// +//Returns selected File of the parent Frame +// +function getFileFromParent() { + if (window.self !== window.parent) { + return window.parent.file; + } else { + return false; + } +} -function handlePostMessage(evt) { - var file = evt.data; - var signature_placed_manually = false; +// +//Opens and displays a selected file. +// +function displayPdf() { + var file = null; + if(window.self !== window.parent) { //Take file selected in the parent if we are in an Iframe. + file = getFileFromParent(); + } else { + file = global_status.getFile(); + } + if(!file) { + return; + } var fileReader = new FileReader(); - fileReader.onload = function(evt) { var buffer = evt.target.result; var uint8Array = new Uint8Array(buffer); PDFView.open(uint8Array, 0); - $("#placeSignature").bind("click", placeSignature); - $("#secondaryPlaceSignature").bind("click", placeSignature); - $("#delSignature").bind("click", removeSignature); - $("#secondaryDelSignature").bind("click", removeSignature); + registerSignaturePlacementEventHandlers(); }; - fileReader.readAsArrayBuffer(file); } -function isSignaturePlaced() { +// +//Attaches event handlers to the signature placement icons +// +function registerSignaturePlacementEventHandlers() { + $("#placeSignature").bind("click", placeSignature); + $("#secondaryPlaceSignature").bind("click", placeSignature); + $("#delSignature").bind("click", removeSignature); + $("#secondaryDelSignature").bind("click", removeSignature); + + // + //Catches events where PDF.js has finished rendering a new page. + //PDF.js only renders a small subset of all pages of a PDF document + //at a given time. + //This causes a placed signature block to disappear, + //if a user scrolls too far away from the page where the signature has + //been placed. To address this issue the following function is used. + //Every time a page is rendered, it is checked whether it is true that + //a signautre has been placed manually but is currently not in the DOM Tree. + //In that case we have to check whether the page we placed the signature on + //is in the DOM tree. If thats true, we can restore the signature on that page. + // + document.addEventListener('pagerendered', function(evt) { + if(!isSignatureInDomTree() && isSignaturePlaced()) { + var page = global_status.getSignature().page; + if(isPageInDomTree(page)) { + placeSignature(null, page, global_status.getSignature().sig[0].outerHTML); + } + } + }); +} + +// +//Checks whether a particular page is contained in the current DOM tree +// +function isPageInDomTree(p) { + var page = $("#pageContainer" + p); + if($(page).attr("data-loaded") === "true") { + return true; + } else { + return false; + } +} + +// +//Checks whether a signature block is contained in the current DOM tree +// +function isSignatureInDomTree() { var signature = $(".cl_signature"); if(signature.length > 0) { return true; @@ -34,46 +166,86 @@ function isSignaturePlaced() { } } -function placeSignature(evt) { +// +//Checks if a signature has been manually placed by a user +// +function isSignaturePlaced() { + return global_status.getSignature() != null +} + +// +//Places signature given by parameter s on the page provided by the page_to_place parameter or on the current page if no such +//parameter is provided. If the parameter s is omitted a default signature is placed. +// +function placeSignature(evt, page_to_place, s) { var current_scale = PDFViewerApplication.pdfViewer.currentScale; var sig_size = Math.floor(96 * current_scale); - var current_page = PDFView.page; + var defaultSignature = "<img src='/pdf-as-web/visblock?r=" + sig_size.toString() + "' alt='Signature' id='img_signature' class='cl_signature' draggable='true' style='position: absolute; z-index:4; cursor:move'>"; + if (typeof page_to_place === 'undefined') { page_to_place = PDFView.page;} + if (typeof s === 'undefined') { s = defaultSignature} - if(isSignaturePlaced()) { + if(isSignaturePlaced() && isSignatureInDomTree()) { removeSignature(); } - - $("#pageContainer"+current_page).prepend("<img src='http://localhost:8080/pdf-as-web/visblock?r=" + sig_size.toString() + "' data-pos-x='0' data-pos-y='0' data-page='" + current_page + "' alt='Signature' id='img_signature' class='cl_signature' draggable='true' style='position: absolute; z-index:4; cursor:move'>"); - makeSignatureDraggable($(".cl_signature")); + + $("#pageContainer" + page_to_place).prepend(s); + global_status.setSignature({ + page: (s === defaultSignature) ? page_to_place : global_status.getSignature().page, + posx: (s === defaultSignature) ? "0" : global_status.getSignature().posx, + posy: (s === defaultSignature) ? "0" : global_status.getSignature().posy, + sig: $(".cl_signature") + }); + updateSignaturePosition(global_status.getSignature()); + makeSignatureDraggable(global_status.getSignature()); } +// +//Makes a placed signature block draggable and keep track of +//the position of the signature block within the page where it has been placed. +// function makeSignatureDraggable(signature) { - var current_page = PDFView.page; - var canvas_height = $("#page" + current_page.toString()).attr("height"); - var current_scale = PDFViewerApplication.pdfViewer.currentScale; - - signature.draggable({ + signature.sig.draggable({ drag: function() { - var $this = $(this); - var thisPos = $this.position({my: "left bottom"}); - var parentPos = $this.parent().position(); - var x = thisPos.left - parentPos.left; - var y = thisPos.top - parentPos.top; - $(this).attr("data-pos-x", (Math.floor(x / current_scale / (4.0/3.0))).toString()); //width shrink again by 4/3? - $(this).attr("data-pos-y", Math.floor((parseInt(canvas_height) + parentPos.top - (thisPos.top + parentPos.top)) / current_scale / (4.0/3.0)).toString()); //height shrink again by 4/3? + updateSignaturePosition(signature) }, containment: "parent" }); } +// +//Update the position of the signature block, e.g. if the signature block is dragged. +//The position is is saved in the html attributes 'data-pos-x' and 'data-pos-y' of the +//signature element. +// +function updateSignaturePosition(signature) { + var page = signature.page; + var canvas_height = $("#page" + page.toString()).attr("height"); + var current_scale = PDFViewerApplication.pdfViewer.currentScale; + var thisPos = $(signature.sig).position(); + var x = thisPos.left; + var y = thisPos.top; + signature.posx = (Math.floor(x / current_scale / (4.0/3.0))).toString(); + signature.posy = Math.floor((parseInt(canvas_height) - (thisPos.top)) / current_scale / (4.0/3.0)).toString(); +} + +// +//Remove a manually placed signature block. +// function removeSignature() { if(isSignaturePlaced()) { $(".cl_signature").remove(); + global_status.setSignature(null); } } $(document).ready(function() { - //http://localhost:8080/pdf-as-web/assets/js/pdf.js/web/viewer.html?connector=jks&pdfurl=http://www.example.net/pdf.pdf + if(window.self !== window.parent) { //We are in an Iframe and return + return; + } + + // + //Function that return the value of the provided HTML get parameter + // $.urlParam = function(name){ var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href); if(!results) { @@ -83,31 +255,175 @@ $(document).ready(function() { } } - var connector = $.urlParam("connector"); - var pdfurl = $.urlParam("pdfurl"); + global_status.setConnector($.urlParam("connector")); + global_status.setPdfUlr($.urlParam("pdfurl")); + global_status.setFilePath($.urlParam("file")); - if(!connector || !pdfurl) { + if(global_status.getFilePath()) { //if a filepath is given via the file HTML get parameter, try to fetch the file and display it + fetchFile(global_status.getFilePath()).then(function(result) { + setFile(result); + displayPdf(); + }, function() { + alert("Failed loading PDF"); + }); + } else if(global_status.getConnector() && global_status.getPdfUrl()) { //if connector and pdfUrl is given, start the sign process straight away + quickSign(global_status.getConnector(), global_status.getPdfUrl()); return; - } else { - var fd = new FormData(); - fd.append("source", "internal"); - fd.append("pdf-url", pdfurl); - fd.append("connector", connector); - - $.ajax({ - url: "http://localhost:8080/pdf-as-web/Sign", - data: fd, - processData: false, - contentType: false, - type: "POST", - success: function(response) { - $("html").empty(); - $("html").html(response); - } - }); } + + addConnector(); + addConnectorEventHandler(); + setConnector(global_status); + addSignButton(); + addSignButtonEventHandler(global_status); + registerSignaturePlacementEventHandlers(); + }); +// +//Fetches the file given via filepath from the server. +//Returns a promise that is being resolved if the file could +//be successfully fetched, and rejected otherwise. +// +function fetchFile(filepath) { + return new Promise(function(resolve, reject) { + var xhr = new XMLHttpRequest(); + xhr.onreadystatechange = function(){ + if (this.readyState == 4 && this.status == 200) { + resolve(this.response); + } else if (this.readyState == 4 && this.status != 200) { + reject(); + } + } + xhr.open('GET', filepath); + xhr.responseType = 'blob'; + xhr.send(); + }); +} + +// +//Adds a drop down menu to the PDF.js menu bar where a user can select +//between different sign methods +// +function addConnector() { + var sign_method_html = "<span class='dropdownToolbarButton'><select id='connectorSelect' title='Sign Method' tabindex='24' style='min-width: 166px;'>" + + "<option id='mobilebku' value='mobilebku'>Handy</option>" + + "<option id='bku' value='bku'>Local BKU</option>" + + "<option id='obku' value='onlinebku'>Online BKU</option>" + + "<option id='jks' value='jks'>Keystore</option>" + + "</select></span>"; + $("#toolbarViewerRight").prepend(sign_method_html); +} + +// +//Adds change event handler to the connector select field. +// +function addConnectorEventHandler() { + $("#connectorSelect").bind("change", function(evt) { + global_status.setConnector($("#connectorSelect").val()); + }); +} + +// +//Adds a button to the PDF.js menu bar, that allows the user to start the sign process +// +function addSignButton() { + var sign_button_html = "<button id='sign' class='toolbarButton sign hiddenLargeView' title='Sign document' tabindex='30' data-l10n-id='Sign Document'>" + + "<span data-l10n-id='sign_document_label'>Sign document</span>" + + "</button>"; + $("#toolbarViewerRight").prepend(sign_button_html); +} + +// +//Attaches event Handler to the sign button. +// +function addSignButtonEventHandler(status) { + $("#sign").bind("click", function(evt) { + sign(status); + }); +} + +// +//Selects a particular connector +// +function setConnector(statusObj) { + if(!statusObj) { + return; + } + var default_connector = "mobilebku"; + var con = statusObj.getConnector(); + if(!con || $("#connectorSelect #" + con).length === 0) { + $("#connectorSelect").val(default_connector); + statusObj.setConnector(default_connector); + } else { + $("#connectorSelect").val(statusObj.getConnector()); + } +} +// +//If pdf-url and connector are provided by means of HTML get parameters +//the document is signed straight away by calling the Sign servlet +// +function quickSign(connector, pdfurl) { + var fd = new FormData(); + fd.append("source", "internal"); + fd.append("connector", connector); + fd.append("pdf-url", pdfurl); + + $.ajax({ + url: "/pdf-as-web/Sign", + data: fd, + processData: false, + contentType: false, + type: "POST", + success: function(response) { + $("html").empty(); + $("html").html(response); + } + }); +} +// +//function that is called once the sign button has been pressed. +//takes a statusobject as it's only parameter, which can be used +//to decide what action should happen. Currently it only calls +//the sign servlet. +// +function sign(statusObj) { + var file = statusObj.getFile(); + if(!file) { + alert("No File Opened"); + return; + } + var fd = new FormData(); + fd.append("source", "internal"); + fd.append("connector", global_status.getConnector()); + fd.append("pdf-file", global_status.getFile()); + if(isSignaturePlaced()) { + fd.append("sig-pos-x", global_status.getSignature().posx); + fd.append("sig-pos-y", global_status.getSignature().posy); + fd.append("sig-pos-p", global_status.getSignature().page); + } + + $.ajax({ + url: "/pdf-as-web/Sign", + data: fd, + processData: false, + contentType: false, + type: "POST", + success: function(response) { + $("#fade").remove(); + $("#popup").remove(); + var fade_div = "<div id='fade' class='black_overlay'></div>"; + var popup_div = "<div id='popup' class='white_content'><a href='javascript:void(0)' id='closelink'>Close</a><div id='resp'></div></div>" + $("body").append(fade_div); + $("body").append(popup_div); + $("#resp").html(response); + $("#closelink").bind("click", function(evt) { + $("#fade").remove(); + $("#popup").remove(); + }); + } + }); +} diff --git a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.css b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.css index 2ffe6356..adba9ec6 100644 --- a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.css +++ b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.css @@ -1057,6 +1057,11 @@ html[dir='rtl'] .toolbarButton.pageDown::before { content: url(images/document_signature.png); } +.toolbarButton.sign::before, +.secondaryToolbarButton.sign::before { + content: url(images/signature-icon.png); +} + .toolbarButton.delSignature::before, .secondaryToolbarButton.delSignature::before { content: url(images/document_del_signature.png); diff --git a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.html b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.html index 20200881..6d49482d 100644 --- a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.html +++ b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.html @@ -40,7 +40,43 @@ http://sourceforge.net/adobe/cmap/wiki/License/ <script src="debugger.js"></script> <script src="viewer.js"></script> <script src="app.js"></script> - + <style> + .black_overlay{ + display: block; + position: fixed; + top: 0%; + left: 0%; + width: 100%; + height: 100%; + background-color: black; + z-index:1001; + -moz-opacity: 0.8; + opacity:.80; + filter: alpha(opacity=80); + } + + .white_content { + display: block; + position: fixed; + top: 25%; + left: 32%; + width: 36%; + height: 30%; + padding: 16px; + border: 4px solid orange; + background-color: white; + z-index:1002; + overflow: auto; + } + + .white_content div { + z-index: -1; + } + + .white_content a { + z-index: 3000; + } + </style> </head> <body tabindex="1" class="loadingInProgress"> @@ -92,7 +128,7 @@ http://sourceforge.net/adobe/cmap/wiki/License/ <div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight"> <div id="secondaryToolbarButtonContainer"> - <button id="secondaryPresentationMode" class="secondaryToolbarButton presentationMode visibleLargeView" title="Switch to Presentation Mode" tabindex="51" data-l10n-id="presentation_mode"> + <button id="secondaryPresentationMode" style="display: none;" class="secondaryToolbarButton presentationMode visibleLargeView" title="Switch to Presentation Mode" tabindex="51" data-l10n-id="presentation_mode"> <span data-l10n-id="presentation_mode_label">Presentation Mode</span> </button> @@ -179,7 +215,7 @@ http://sourceforge.net/adobe/cmap/wiki/License/ <span id="numPages" class="toolbarLabel"></span> </div> <div id="toolbarViewerRight"> - <button id="presentationMode" class="toolbarButton presentationMode hiddenLargeView" title="Switch to Presentation Mode" tabindex="29" data-l10n-id="presentation_mode"> + <button id="presentationMode" style="display:none;" class="toolbarButton presentationMode hiddenLargeView" title="Switch to Presentation Mode" tabindex="29" data-l10n-id="presentation_mode"> <span data-l10n-id="presentation_mode_label">Presentation Mode</span> </button> diff --git a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.js b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.js index c653c2bf..129823ff 100644 --- a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.js +++ b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.js @@ -6669,10 +6669,7 @@ function webViewerLoad(evt) { //PDFViewerApplication.initialize().then(webViewerInitialized); PDFViewerApplication.initialize().then(function() { webViewerInitialized(); - if (window.self !== window.parent) { - window.parent.postMessage("asdf yooooooo","*"); - } - + displayPdf() }); } @@ -6871,8 +6868,7 @@ function webViewerInitialized() { document.getElementById('download').addEventListener('click', SecondaryToolbar.downloadClick.bind(SecondaryToolbar)); - - if (file && file.lastIndexOf('file:', 0) === 0) { + /*if (file && file.lastIndexOf('file:', 0) === 0) { // file:-scheme. Load the contents in the main thread because QtWebKit // cannot load file:-URLs in a Web Worker. file:-URLs are usually loaded // very quickly, so there is no need to set up progress event listeners. @@ -6894,7 +6890,7 @@ function webViewerInitialized() { if (file) { PDFViewerApplication.open(file, 0); - } + }*/ } document.addEventListener('DOMContentLoaded', webViewerLoad, true); @@ -7016,9 +7012,8 @@ window.addEventListener('change', function webViewerChange(evt) { var file = files[0]; //ADDED - if(window.self !== window.parent) { - setFileForParent(file); - } + setFile(file); + if (!PDFJS.disableCreateObjectURL && typeof URL !== 'undefined' && URL.createObjectURL) { PDFViewerApplication.open(URL.createObjectURL(file), 0); |