From dd7ba18d3a134f2becc2ad53f9b3d2191798e686 Mon Sep 17 00:00:00 2001
From: Thomas Felber <felber@student.tugraz.at>
Date: Mon, 11 May 2015 00:54:45 -0700
Subject: switched to jspdf with pdf.js, added movable signatureblock
 prototype, updated js in order to make pdf.js work

---
 pdf-as-web/src/main/webapp/assets/css/style.css    | 17 +++---
 pdf-as-web/src/main/webapp/assets/js/dragNdrop.js  | 69 +++++++---------------
 .../src/main/webapp/assets/js/pdf.js/web/app.js    | 53 +++++++++++++++++
 .../main/webapp/assets/js/pdf.js/web/viewer.html   | 22 +++----
 .../src/main/webapp/assets/js/pdf.js/web/viewer.js | 13 ++--
 pdf-as-web/src/main/webapp/index.jsp               | 43 ++++++++++++--
 6 files changed, 138 insertions(+), 79 deletions(-)
 create mode 100644 pdf-as-web/src/main/webapp/assets/js/pdf.js/web/app.js

diff --git a/pdf-as-web/src/main/webapp/assets/css/style.css b/pdf-as-web/src/main/webapp/assets/css/style.css
index 1d8ddb5b..570230cc 100644
--- a/pdf-as-web/src/main/webapp/assets/css/style.css
+++ b/pdf-as-web/src/main/webapp/assets/css/style.css
@@ -10,8 +10,8 @@ footer {
 	clear: both;
 }
 
-canvas {
-	border: 1px solid black;
+iframe {
+	border: none;
 }
 
 #sidebar {
@@ -38,18 +38,15 @@ canvas {
 	height: 900px;
 	width: 800px;
 	float: left;
+	margin: 0px;
 }
 
 #content {
 	clear: both;
-	height: 868px;
+	height: 863px;
 	font-size: 150%;
 }
 
-#states {
-	height: 5%;
-}
-
 #btnSign {
 	border-top-left-radius: 15px;
 	border-top-right-radius: 15px;
@@ -88,12 +85,12 @@ canvas {
 }
 
 .container h3 {
-	border-top-left-radius: 11px;
-	border-top-right-radius: 11px;
+	border-top-left-radius: 15px;
+	border-top-right-radius: 15px;
 	background: #66A3FF;
 	color: #FFFFFF;
 	text-align: center;
-	margin: 0px;
+	margin: -1px;
 	height: 2em;
 }
 
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 e1a3424a..31ba841d 100644
--- a/pdf-as-web/src/main/webapp/assets/js/dragNdrop.js
+++ b/pdf-as-web/src/main/webapp/assets/js/dragNdrop.js
@@ -5,10 +5,19 @@ $(document).ready(function() {
 
 function registerEventListeners() {
 	
-	var file;
+	var file = null;
 	var locale = "EN";
 	var connector = "mobilebku";
 	
+	window.addEventListener("message", function receiveMessage(evt) {
+		console.log("parent: message received");
+		console.log(evt.data);
+		var iframewindow = document.getElementById("iFrame");
+		console.log(file);
+		iframewindow.contentWindow.postMessage(file, "*");
+		console.log("postmessage to child sent");
+	}, false);
+	
 	$(document).bind("dragover", function(evt) {
 		evt.preventDefault();
 	});
@@ -51,10 +60,11 @@ function registerEventListeners() {
 		}
 		
 		file = files[0];
-		previewFile(file);
+		previewFile();
 	});
 	
 	$("#pdf-file").bind("change", function(evt) {
+		file_event = evt;
 		var files = evt.target.files;
 		if(files == null || files.length === 0) {
 			return;
@@ -70,25 +80,21 @@ function registerEventListeners() {
 	
 	$("input[name='locale']").bind("change", function(evt) {
 		locale = this.value;
+		
+		//REMOVE
+		alert("Locale");
+		alert($("#iFrame").contents().find("#numPages").html());
+		//REMOVE
 	});
 	
 	$("#btnSign").bind("click", function(evt) {
 		sign(file, connector, locale);
 	});
-	
 }
 
-function previewFile(file) {
-	var fr = new FileReader();
-		
-	fr.onload = function(file) {
-		var buffer = fr.result;
-		var uint8array = new Uint8Array(buffer);
-		displaypdf(uint8array);
-	};
-	
+function previewFile() {
 	clearContentDiv();
-	fr.readAsArrayBuffer(file);
+	createIframe();
 }
 
 function sign(file, connector, locale) {
@@ -128,39 +134,6 @@ function clearContentDiv() {
 	$("#content").empty();
 }
 
-function displaypdf(uint8array) {
-	$("#content").append("<img src='assets/img/signature.png' alt='Signature' id='signature' draggable='true' style='position: absolute'>");
-	$("#content").append("<canvas id='pdf-preview'></canvas>");
-	
-	
-	PDFJS.getDocument(uint8array).then(function(__pdf) {
-		var pdf = __pdf;
-		var last_page = pdf.numPages;
-		
-		pdf.getPage(last_page).then(renderPage);
-		
-	});
-	
-	$("#signature").draggable({
-		drag: function() {
-			
-		},
-		containment: "parent"
-	});
-}
-
-function renderPage(page) {
-	var viewport = page.getViewport(1);
-	var canvas = document.getElementById("pdf-preview");
-	var context = canvas.getContext('2d');
-	canvas.height = 868;
-	canvas.width = 800;
-	
-	page.render({
-		canvasContext: context,
-		viewport: viewport
-	});
-	
+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
new file mode 100644
index 00000000..bb2c89d7
--- /dev/null
+++ b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/app.js
@@ -0,0 +1,53 @@
+window.addEventListener("message", function (evt) {
+	var goto_last_page_on_render = false;
+	var file = evt.data;
+	var fileReader = new FileReader();
+	var current_page = null;
+	console.log("child:" + file);
+	
+	function rendered(evt) {
+		console.log(evt);
+		if(goto_last_page_on_render) {
+			document.getElementById("lastPage").click();
+			return;
+		}
+		showSignatureBlock();
+		console.log(evt);
+		current_page = PDFView.page;
+		document.removeEventListener('textlayerrendered', rendered);
+		document.addEventListener('textlayerrendered', showSignatureBlock);
+	}
+	
+	window.addEventListener('pagechange', showSignatureBlock);
+	document.addEventListener('textlayerrendered', rendered);
+
+	fileReader.onload = function(evt) {
+		var buffer = evt.target.result;
+		var uint8Array = new Uint8Array(buffer);
+		PDFView.open(uint8Array, 0);
+	};
+	
+	function showSignatureBlock(evt) {
+		console.log(evt);
+		if(PDFViewerApplication.pdfViewer.getPageView(PDFViewerApplication.page - 1).renderingState === RenderingStates.RUNNING) {
+			return;
+		}
+		
+		console.log(document.readyState);
+		$(".img_signature").remove();
+		$("#pageContainer"+PDFView.page).prepend("<img src='../../../img/signature.png' alt='Signature' id='img_signature' class='cl_signature' draggable='true' style='position: absolute; z-index:4;'>");
+		$(".cl_signature").draggable({
+			drag: function() {
+				
+			},
+			containment: "parent"
+		});
+	}
+	
+	fileReader.readAsArrayBuffer(file);
+}, false);
+
+
+
+
+
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 b3af4ada..6dae1b7b 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
@@ -24,23 +24,23 @@ http://sourceforge.net/adobe/cmap/wiki/License/
     <meta name="google" content="notranslate">
     <title>PDF.js viewer</title>
 
-
     <link rel="stylesheet" href="viewer.css"/>
-
+	
     <script src="compatibility.js"></script>
 
-
-
-<!-- This snippet is used in production (included from viewer.html) -->
-<link rel="resource" type="application/l10n" href="locale/locale.properties"/>
-<script src="l10n.js"></script>
-<script src="../build/pdf.js"></script>
-
-
+	<!-- This snippet is used in production (included from viewer.html) -->
+	<link rel="resource" type="application/l10n" href="locale/locale.properties"/>
+	
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
+	
+	<script src="l10n.js"></script>
+	<script src="../build/pdf.js"></script>
 
     <script src="debugger.js"></script>
     <script src="viewer.js"></script>
-
+	<script src="app.js"></script>
+			
   </head>
 
   <body tabindex="1" class="loadingInProgress">
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 34c44e46..9801be2f 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
@@ -27,7 +27,7 @@
 
 'use strict';
 
-var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf';
+var DEFAULT_URL = '';
 var DEFAULT_SCALE_DELTA = 1.1;
 var MIN_SCALE = 0.25;
 var MAX_SCALE = 10.0;
@@ -5843,7 +5843,7 @@ var PDFViewerApplication = {
       function getDocumentCallback(pdfDocument) {
         self.load(pdfDocument, scale);
         self.loading = false;
-      },
+	  },
       function getDocumentError(exception) {
         var message = exception && exception.message;
         var loadingErrorMessage = mozL10n.get('loading_error', null,
@@ -6666,14 +6666,18 @@ window.PDFView = PDFViewerApplication; // obsolete name, using it as an alias
 
 
 function webViewerLoad(evt) {
-  PDFViewerApplication.initialize().then(webViewerInitialized);
+	//PDFViewerApplication.initialize().then(webViewerInitialized);
+  PDFViewerApplication.initialize().then(function() {
+	  webViewerInitialized();
+	  window.parent.postMessage("asdf yooooooo","*");
+  });
 }
 
 function webViewerInitialized() {
   var queryString = document.location.search.substring(1);
   var params = PDFViewerApplication.parseQueryString(queryString);
   var file = 'file' in params ? params.file : DEFAULT_URL;
-
+  
   var fileInput = document.createElement('input');
   fileInput.id = 'fileInput';
   fileInput.className = 'fileInput';
@@ -7005,6 +7009,7 @@ window.addEventListener('change', function webViewerChange(evt) {
   if (!files || files.length === 0) {
     return;
   }
+  
   var file = files[0];
 
   if (!PDFJS.disableCreateObjectURL &&
diff --git a/pdf-as-web/src/main/webapp/index.jsp b/pdf-as-web/src/main/webapp/index.jsp
index e99ec4db..959e4203 100644
--- a/pdf-as-web/src/main/webapp/index.jsp
+++ b/pdf-as-web/src/main/webapp/index.jsp
@@ -10,6 +10,7 @@
 	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
 	<script src="assets/js/pdf.js/build/pdf.js"></script>
 	<script src="assets/js/dragNdrop.js"></script>
+	
 
 </head>
 <body>
@@ -33,25 +34,54 @@
 			<h3 class="center">Sign Method</h3>
 			<fieldset>
 				<table>
+					<%
+					if (WebConfiguration.getHandyBKUURL() != null) {
+					%>
 					<tr>
-						<td><input type="radio" id="mobileBKU" name="connector" value="mobileBKU" checked></td>
+						<td><input type="radio" id="mobileBKU" name="connector" value="mobilebku" checked></td>
 						<td><label for="mobileBKU">Handy</td>
 						<td><label for="mobileBKU"><img src="assets/img/mobileBKU.png" alt="Sign via mobile BKU"/></td>
 						
 					</tr>
+					<%
+						}
+					%>
+					<%
+					if (WebConfiguration.getLocalBKUURL() != null) {
+					%>
 					<tr>
-						<td><input type="radio" id="localBKU" name="connector" value="localBKU"></td>
+						<td><input type="radio" id="localBKU" name="connector" value="bku"></td>
 						<td><label for="localBKU">Lokale BKU</label></td>
 						<td><label for="localBKU"><img src="assets/img/onlineBKU.png" alt="Sign via local BKU" /></label></td>
 						
 					</tr>
+					<%
+						}
+					%>
+					<%
+					if (WebConfiguration.getOnlineBKUURL() != null) {
+					%>
 					<tr>
-						<td><input type="radio" id="onlineBKU" name="connector" value="onlineBKU"></td>
+						<td><input type="radio" id="onlineBKU" name="connector" value="onlinebku"></td>
 						<td><label for="onlineBKU">Online BKU</label></td>
 						<td><label for="onlineBKU"><img src="assets/img/onlineBKU.png" alt="Sign via online BKU"/></label></td>
 						
 					</tr>
-					
+					<%
+						}
+					%>
+					<%
+						if(WebConfiguration.getKeystoreDefaultEnabled()) {
+					%>
+					<tr>
+						<td><input type="radio" id="jks" name="connector" value="jks"></td>
+						<td><label for="jks">Server Keystore</label></td>
+						<td><label for="jks"><img src="assets/img/onlineBKU.png" alt="Sign via Server Keystore"/></label></td>
+					</tr>
+					<%
+						}
+					%>
+
 				</table>
 			</fieldset>
 		</div>
@@ -59,8 +89,8 @@
 		<div id="language" class="container">
 			<h3 class="center">Language</h3>
 				<fieldset>
-					<input type="radio" id="EN" name="locale" value="EN" checked><label>Englisch</label><br>
-					<input type="radio" id="DE" name="locale" value="DE"><label>Deutsch</label><br> 
+					<input type="radio" id="EN" name="locale" value="EN" checked><label for="EN">Englisch</label><br>
+					<input type="radio" id="DE" name="locale" value="DE"><label for="DE">Deutsch</label><br> 
 				</fieldset>
 		</div>
 		
@@ -71,6 +101,7 @@
 	
 	
 	<div id="main" class="container">
+	
 		<h3 class="center">Preview</h3>
 		<div id="content" class="center">
 			Please select the pdf file you want to sign!
-- 
cgit v1.2.3