WIP: Adds Drap and drop

.idea/.gitignore

@@ -1,8 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/
-# Datasource local storage ignored files
-/dataSources/
-/dataSources.local.xml

src/main/java/stirling/software/SPDF/controller/web/GeneralWebController.java

@@ -1,18 +1,9 @@
 package stirling.software.SPDF.controller.web;
-import java.io.IOException;
-import java.nio.charset.StandardCharsets;
-import java.nio.file.Files;
-import java.nio.file.Path;
-import java.nio.file.Paths;
-import java.util.ArrayList;
-import java.util.Arrays;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-import java.util.Objects;
-import java.util.stream.Collectors;
-import java.util.stream.Stream;
 
+import com.fasterxml.jackson.core.type.TypeReference;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import io.swagger.v3.oas.annotations.Hidden;
+import io.swagger.v3.oas.annotations.tags.Tag;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.core.io.Resource;
 import org.springframework.core.io.ResourceLoader;
@@ -21,11 +12,14 @@ import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 
-import com.fasterxml.jackson.core.type.TypeReference;
+import java.io.IOException;
-import com.fasterxml.jackson.databind.ObjectMapper;
+import java.nio.charset.StandardCharsets;
-
+import java.nio.file.Files;
-import io.swagger.v3.oas.annotations.Hidden;
+import java.nio.file.Path;
-import io.swagger.v3.oas.annotations.tags.Tag;
+import java.nio.file.Paths;
+import java.util.*;
+import java.util.stream.Collectors;
+import java.util.stream.Stream;
 
 @Controller
 @Tag(name = "General", description = "General APIs")
@@ -81,6 +75,12 @@ public class GeneralWebController {
         return "merge-pdfs";
     }
 
+    @GetMapping("/view-pdf")
+    @Hidden
+    public String ViewPdfForm(Model model) {
+        model.addAttribute("currentPage", "view-pdf");
+        return "view-pdf";
+    }
     
     @GetMapping("/multi-tool")
     @Hidden

src/main/resources/messages_en_US.properties

@@ -126,6 +126,9 @@ adminUserSettings.submit=Save User
 # HOME-PAGE #
 #############
 home.desc=Your locally hosted one-stop-shop for all your PDF needs.
+home.viewPdf.title=View PDF
+home.viewPdf.desc=View, annotate, add text or images
+viewPdf.tags=view,read,annotate,text,image
 
 
 home.multiTool.title=PDF Multi Tool

src/main/resources/static/images/book-opened.svg

@@ -0,0 +1,18 @@
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
+	 width="800px" height="800px" viewBox="0 0 318.336 318.336"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M302.137,74.432h-21.031c-30.496-13.614-56.389-20.611-77.028-20.611c-26.731,0-39.245,11.649-44.906,20.535
+			c-5.658-8.886-18.17-20.535-44.906-20.535c-20.638,0-46.533,7.003-77.037,20.611H16.2c-8.946,0-16.2,7.253-16.2,16.2v157.684
+			c0,8.949,7.254,16.2,16.2,16.2h285.937c8.948,0,16.199-7.251,16.199-16.2V90.632C318.336,81.686,311.085,74.432,302.137,74.432z
+			 M154.786,84.265c-0.048,0.25-0.069,0.503-0.069,0.757V233.74c-7.084-8.18-18.95-14.438-38.804-14.438
+			c-35.44,0-79.927,19.432-95.813,26.947V91.528c13.608-6.927,26.31-12.587,38.156-17.096c21.745-8.271,40.526-12.511,56.004-12.511
+			c18.992,0,29.37,6.354,34.986,12.511c3.241,3.554,4.91,7.038,5.698,9.192C154.852,83.985,154.791,84.243,154.786,84.265z
+			 M298.234,246.249c-15.884-7.516-60.371-26.947-95.809-26.947c-19.859,0-31.72,6.254-38.805,14.438
+			c-0.261,0.3-0.562,0.58-0.804,0.886V85.48c0.084-0.351,0.269-0.981,0.583-1.825c0.799-2.149,2.499-5.647,5.776-9.218
+			c5.648-6.157,16.026-12.512,34.9-12.512c15.478,0,34.251,4.24,56.004,12.512c11.854,4.509,24.548,10.17,38.153,17.097V246.249
+			L298.234,246.249z"/>
+	</g>
+</g>
+</svg>

src/main/resources/templates/home.html

@@ -30,6 +30,7 @@
             	
                  <!-- <div th:replace="~{fragments/card :: card(id='pipeline', cardTitle=#{home.pipeline.title}, cardText=#{home.pipeline.desc}, cardLink='pipeline', svgPath='images/pipeline.svg')}"></div> -->
 
+                <div th:replace="~{fragments/card :: card(id='view-pdf', cardTitle=#{home.viewPdf.title}, cardText=#{home.viewPdf.desc}, cardLink='view-pdf', svgPath='images/book-opened.svg')}"></div>
                 <div th:replace="~{fragments/card :: card(id='multi-tool', cardTitle=#{home.multiTool.title}, cardText=#{home.multiTool.desc}, cardLink='multi-tool', svgPath='images/tools.svg')}"></div>
                 <div th:replace="~{fragments/card :: card(id='merge-pdfs', cardTitle=#{home.merge.title}, cardText=#{home.merge.desc}, cardLink='merge-pdfs', svgPath='images/union.svg')}"></div>
                 <div th:replace="~{fragments/card :: card(id='split-pdfs', cardTitle=#{home.split.title}, cardText=#{home.split.desc}, cardLink='split-pdfs', svgPath='images/layout-split.svg')}"></div>

src/main/resources/templates/view-pdf.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
+
+<th:block th:insert="~{fragments/common :: head(title=#{multiTool.title})}"></th:block>
+
+<body>
+<div id="image-highlighter"></div>
+<div id="page-container">
+    <div id="content-wrap">
+        <div th:insert="~{fragments/navbar.html :: navbar}"></div>
+        <br> <br>
+        <div class="container">
+            <fieldset class="upload_dropZone text-center mb-3 p-4">
+
+                <legend class="visually-hidden">Image uploader</legend>
+
+                <svg class="upload_svg" width="60" height="60" aria-hidden="true">
+                    <use href="#icon-imageUpload"></use>
+                </svg>
+
+                <p class="small my-2">Drag &amp; Drop PDF(s) inside dashed region<br><i>or</i></p>
+
+                <input id="upload_image_background" data-post-name="image_background"
+                       data-post-url="https://someplace.com/image/uploads/backgrounds/"
+                       class="position-absolute invisible" type="file" multiple
+                       accept="image/jpeg, image/png, image/svg+xml"/>
+
+                <label class="btn btn-upload mb-3" for="upload_image_background">Choose file(s)</label>
+
+                <div class="upload_gallery d-flex flex-wrap justify-content-center gap-3 mb-0"></div>
+
+            </fieldset>
+        </div>
+
+    </div>
+    <div th:insert="~{fragments/footer.html :: footer}"></div>
+</div>
+<div id="drag-container"></div>
+
+<script type="module">
+
+</script>
+
+<style>
+    fieldset {
+        --colorPrimaryNormal: #00b3bb;
+        --colorPrimaryDark: #00979f;
+        --colorPrimaryGlare: #00cdd7;
+        --colorPrimaryHalf: #80d9dd;
+        --colorPrimaryQuarter: #bfecee;
+        --colorPrimaryEighth: #dff5f7;
+        --colorPrimaryPale: #f3f5f7;
+        --colorPrimarySeparator: #f3f5f7;
+        --colorPrimaryOutline: #dff5f7;
+        --colorButtonNormal: #00b3bb;
+        --colorButtonHover: #00cdd7;
+        --colorLinkNormal: #00979f;
+        --colorLinkHover: #00cdd7;
+
+    }
+
+    body {
+        margin: 24px;
+    }
+
+    .upload_dropZone {
+        color: var(--base-font-color);
+        background-color: var(--background-color);
+        outline: 2px dashed var(--scroll-bar-color, #c1ddef);
+        outline-offset: -12px;
+        transition: outline-offset 0.2s ease-out,
+        outline-color 0.3s ease-in-out,
+        background-color 0.2s ease-out;
+    }
+
+    .upload_dropZone.highlight {
+        outline-offset: -4px;
+        outline-color: var(--bs-blue, #0576bd);
+        background-color: var(--colorPrimaryEighth, #c8dadf);
+    }
+
+    .upload_svg {
+        fill: var(--bs-blue, #0576bd);
+    }
+
+    .btn-upload {
+        color: #fff;
+        background-color: var(--bs-blue);
+    }
+
+    .btn-upload:hover,
+    .btn-upload:focus {
+        color: #fff;
+        background-color: var(--bs-blue);
+    }
+
+    .upload_img {
+        width: calc(33.333% - (2rem / 3));
+        object-fit: contain;
+    }
+</style>
+</body>
+
+</html>