Metadata editting and local only JS and pdf to image change and format pages (#44)
* Formatting * changeMeta * pdf to img fix * foramtting * new image * lang changes
This commit is contained in:
Anthony Stirling
@@ -4,130 +4,124 @@
|
||||
<th:block th:insert="~{fragments/common :: head(title=#{merge.title})}"></th:block>
|
||||
|
||||
|
||||
<body> <div id="page-container">
|
||||
<div id="content-wrap">
|
||||
<div th:insert="~{fragments/navbar.html :: navbar}"></div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="container" id="dropContainer">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<h2 th:text="#{merge.header}"></h2>
|
||||
<form action="merge-pdfs" method="post"
|
||||
enctype="multipart/form-data">
|
||||
<div class="form-group">
|
||||
<label th:text="#{multiPdfDropPrompt}"></label>
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="fileInput"
|
||||
name="fileInput" multiple required> <label
|
||||
class="custom-file-label" th:text="#{pdfPrompt}">s</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" th:text="#{merge.submit}"></button>
|
||||
</div>
|
||||
</form>
|
||||
<body>
|
||||
<div id="page-container">
|
||||
<div id="content-wrap">
|
||||
<div th:insert="~{fragments/navbar.html :: navbar}"></div>
|
||||
<br> <br>
|
||||
<div class="container" id="dropContainer">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<h2 th:text="#{merge.header}"></h2>
|
||||
<form action="merge-pdfs" method="post" enctype="multipart/form-data">
|
||||
<div class="form-group">
|
||||
<label th:text="#{multiPdfDropPrompt}"></label>
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="fileInput" name="fileInput" multiple required>
|
||||
<label class="custom-file-label" th:text="#{pdfPrompt}"></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" th:text="#{merge.submit}"></button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<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"><i class="fas fa-arrow-up"></i></button> <button class="btn btn-secondary move-down"><i class="fas fa-arrow-down"></i></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");
|
||||
|
||||
|
||||
|
||||
<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;
|
||||
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;
|
||||
}
|
||||
document
|
||||
.getElementById("fileInput").files = dataTransfer.files;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:insert="~{fragments/footer.html :: footer}"></div>
|
||||
</div>
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:insert="~{fragments/footer.html :: footer}"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user