Moved dropzone and file browser

3 files changed, 54 insertions, 17 deletions

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 56bfbe67..8ef67ebf 100644
--- a/pdf-as-web/src/main/webapp/assets/css/style.css
+++ b/pdf-as-web/src/main/webapp/assets/css/style.css
@@ -41,6 +41,15 @@ iframe {
 	margin: 0px;
 }
 
+#borderBox {
+	 height: 815px; 
+	 width: 750px; 
+	float: center;
+	margin: 20px;
+	border: 2px dashed;
+	border-color: black;
+}
+
 #content {
 	clear: both;
 	height: 863px;
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 d7f8cfb9..c3f340d6 100644
--- a/pdf-as-web/src/main/webapp/assets/js/dragNdrop.js
+++ b/pdf-as-web/src/main/webapp/assets/js/dragNdrop.js
@@ -17,32 +17,32 @@ function registerEventListeners() {
 		evt.preventDefault();
 	});
 	
-	$("#dropzone").bind("dragenter", function(evt) {
+	$("#borderBox").bind("dragenter", function(evt) {
 		evt.preventDefault();
 		evt.stopPropagation();
 		highlightDropzone();
 	});
 	
-	$("#dropzone").bind("dragover", function(evt) {
+	$("#borderBox").bind("dragover", function(evt) {
 		evt.preventDefault();
 		evt.stopPropagation();
-		highlightDropzone(); // test
+		highlightDropzone();
 
 	});
 	
-	$("#dropzone").bind("dragleave", function(evt) {
+	$("#borderBox").bind("dragleave", function(evt) {
 		evt.preventDefault();
 		evt.stopPropagation();
 		unhighlightDropzone();
 	});
 	
-	$("#dropzone").bind("dragend", function(evt) {
+	$("#borderBox").bind("dragend", function(evt) {
 		evt.preventDefault();
 		evt.stopPropagation();
 		unhighlightDropzone();
 	});
 	
-	$("#dropzone").bind("drop", function(evt) {
+	$("#borderBox").bind("drop", function(evt) {
 		evt.preventDefault();
 		evt.stopPropagation();
 		unhighlightDropzone();
@@ -50,10 +50,33 @@ function registerEventListeners() {
 		if(files == null || files.length === 0) {
 			return;
 		}
+		else if(files[0].name.indexOf(".pdf") < 0)
+		{
+			window.alert("The file type must be PDF");
+			return;
+		} 
+		
 		file = files[0];
 		previewFile();
 	});
 	
+/*	$("#main").bind("drop", function(evt) {
+		evt.preventDefault();
+		evt.stopPropagation();
+		var files = evt.originalEvent.dataTransfer.files;
+		if(files == null || files.length === 0) {
+			return;
+		}
+		else if(files[0].name.indexOf(".pdf") < 0)
+		{
+			window.alert("The file type must be PDF");
+			return;
+		} 
+		
+		file = files[0];
+		previewFile();
+	}); */
+	
 	$("#pdf-file").bind("change", function(evt) {
 		file_event = evt;
 		var files = evt.target.files;
@@ -139,14 +162,14 @@ function sign(file, connector, locale) {
 //Changes color if the user drags a file over the dropzone
 //
 function highlightDropzone() {
-	$("#dropzone").css("background", "#D8FFD8");
+	$("#borderBox").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");
+	$("#borderBox").css("background", "#E8F4FF");
 }
 
 //
diff --git a/pdf-as-web/src/main/webapp/index.jsp b/pdf-as-web/src/main/webapp/index.jsp
index 58102ebf..abc2ece1 100644
--- a/pdf-as-web/src/main/webapp/index.jsp
+++ b/pdf-as-web/src/main/webapp/index.jsp
@@ -18,13 +18,14 @@
 	<div id="sidebar">
 		<div id="fileSelector" class="container">
 			<h3 class="center">File Selector</h3>
-			<div id="dropzone" class="center">
+			<!--<div id="dropzone" class="center">
 				Drag and Drop your Document here ...
 			</div>
-			<div id="traditionalUpload">
+			  <div id="traditionalUpload">
 				<p>... or select File here</p>
 				<input type="file" name="pdf-file" id="pdf-file" accept="application/pdf">
-			</div>
+			</div> --> <!-- Care: id and name must be unique! -->
+			
 		</div>
 
 		<div id="signMethod" class="container">
@@ -77,8 +78,7 @@
 					</tr>
 					<%
 						}
-					%>
-
+					%> 
 				</table>
 			</fieldset>
 		</div>
@@ -86,8 +86,8 @@
 		<div id="language" class="container">
 			<h3 class="center">Language</h3>
 				<fieldset>
-					<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> 
+				  <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>
 		
@@ -98,10 +98,15 @@
 	
 	
 	<div id="main" class="container">
-	
 		<h3 class="center">Preview</h3>
 		<div id="content" class="center">
-			Please select the pdf file you want to sign!
+			<div id="borderBox" class="center">
+				<div>
+					<p> Drop your file here</p>
+					<p>... or select File here</p>
+						<input type="file" name="pdf-file" id="pdf-file" accept="application/pdf">
+				</div>
+			</div>
 		</div>
 	</div>