allow change order on merge (Stirling-Tools#11)

README.md

@@ -4,6 +4,10 @@ This is a locally hosted web application that allows you to perform various oper
 
 I will support and fix/add things to this if there is a demand [Discord](https://discord.gg/Cn8pWhQRxZ)
 
+
+![stirling-home](images/stirling-home.png)
+
+
 ## Features
 
 - Split PDFs into multiple files at specified page numbers or extract all pages as individual files.

src/main/resources/static/dark-mode.css

@@ -11,4 +11,13 @@ body {
 .jumbotron {
   background-color: #222; /* or any other dark color */
   color: #fff; /* or any other light color */
+}
+
+.list-group {
+  background-color: #222 !important;
+  color: fff !important;
+}
+.list-group-item {
+  background-color: #222 !important;
+  color: fff !important;
 }

src/main/resources/templates/merge-pdfs.html

@@ -25,13 +25,75 @@ <h2>Merge multiple PDFs (2+)</h2>
 								class="custom-file-label">Choose PDFs</label>
 						</div>
 					</div>
+					<div class="form-group">
+					    <ul id="selectedFiles" class="list-group"></ul>
+					  </div>
 					<div class="form-group text-center">
 						<button type="submit" class="btn btn-primary">Merge</button>
 					</div>
 				</form>
-				<th:block th:insert="~{common :: filelist}"></th:block>
+
+
+
+
 
+<script>
+document.getElementById("fileInput").addEventListener("change", function() {
+    var files = this.files;
+    var list = document.getElementById("selectedFiles");
+    list.innerHTML = "";
+    for (var i = 0; i < files.length; i++) {
+      var item = document.createElement("li");
+      item.className = "list-group-item d-flex justify-content-between align-items-center";
+      item.textContent = files[i].name;
+      item.innerHTML += '<div><button class="btn btn-secondary move-up">Move Up</button> <button class="btn btn-secondary move-down">Move Down</button></div>';
+      list.appendChild(item);
+    }
+    var moveUpButtons = document.querySelectorAll(".move-up");
+    for (var i = 0; i < moveUpButtons.length; i++) {
+      moveUpButtons[i].addEventListener("click", function(event) {
+        event.preventDefault();
+        var parent = this.parentNode.parentNode;
+        var grandParent = parent.parentNode;
+        if (parent.previousElementSibling) {
+          grandParent.insertBefore(parent, parent.previousElementSibling);
+          updateFiles();
+        }
+      });
+    }
+    var moveDownButtons = document.querySelectorAll(".move-down");
+    for (var i = 0; i < moveDownButtons.length; i++) {
+      moveDownButtons[i].addEventListener("click", function(event) {
+        event.preventDefault();
+        var parent = this.parentNode.parentNode;
+        var grandParent = parent.parentNode;
+        if (parent.nextElementSibling) {
+          grandParent.insertBefore(parent.nextElementSibling, parent);
+          updateFiles();
+        } 
+      });
+    }
 
+    function updateFiles() {
+      var dataTransfer = new DataTransfer();
+      var liElements = document.querySelectorAll("#selectedFiles li");
+
+      for (var i = 0; i < liElements.length; i++) {
+    	var fileNameFromList = liElements[i].innerText.replace("\nMove Up Move Down","");
+    	var fileFromFiles 
+    	for (var j = 0; j < files.length; j++) {
+        	var file = files[j];
+        	if(file.name === fileNameFromList){
+        		dataTransfer.items.add(file);
+        		break;
+        	}
+    	}
+      }
+      document.getElementById("fileInput").files = dataTransfer.files;
+    }
+  });
+
+</script>