diff options
| -rw-r--r-- | pdf-as-web/src/main/webapp/assets/css/style.css | 9 | ||||
| -rw-r--r-- | pdf-as-web/src/main/webapp/assets/js/dragNdrop.js | 39 | ||||
| -rw-r--r-- | pdf-as-web/src/main/webapp/index.jsp | 23 |
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> |