113 lines
3.9 KiB
JavaScript
113 lines
3.9 KiB
JavaScript
let currentSort = {
|
|
field: null,
|
|
descending: false
|
|
};
|
|
|
|
document.getElementById("fileInput-input").addEventListener("change", function() {
|
|
var files = this.files;
|
|
displayFiles(files);
|
|
});
|
|
|
|
function displayFiles(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";
|
|
item.innerHTML = `
|
|
<div class="d-flex justify-content-between align-items-center w-100">
|
|
<div class="filename">${files[i].name}</div>
|
|
<div class="arrows d-flex">
|
|
<button class="btn btn-secondary move-up"><span>↑</span></button>
|
|
<button class="btn btn-secondary move-down"><span>↓</span></button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
list.appendChild(item);
|
|
}
|
|
|
|
attachMoveButtons();
|
|
}
|
|
|
|
function attachMoveButtons() {
|
|
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.closest(".list-group-item");
|
|
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.closest(".list-group-item");
|
|
var grandParent = parent.parentNode;
|
|
if (parent.nextElementSibling) {
|
|
grandParent.insertBefore(parent.nextElementSibling, parent);
|
|
updateFiles();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
document.getElementById("sortByNameBtn").addEventListener("click", function() {
|
|
if (currentSort.field === "name" && !currentSort.descending) {
|
|
currentSort.descending = true;
|
|
sortFiles((a, b) => b.name.localeCompare(a.name));
|
|
} else {
|
|
currentSort.field = "name";
|
|
currentSort.descending = false;
|
|
sortFiles((a, b) => a.name.localeCompare(b.name));
|
|
}
|
|
});
|
|
|
|
document.getElementById("sortByDateBtn").addEventListener("click", function() {
|
|
if (currentSort.field === "lastModified" && !currentSort.descending) {
|
|
currentSort.descending = true;
|
|
sortFiles((a, b) => b.lastModified - a.lastModified);
|
|
} else {
|
|
currentSort.field = "lastModified";
|
|
currentSort.descending = false;
|
|
sortFiles((a, b) => a.lastModified - b.lastModified);
|
|
}
|
|
});
|
|
|
|
function sortFiles(comparator) {
|
|
// Convert FileList to array and sort
|
|
const sortedFilesArray = Array.from(document.getElementById("fileInput-input").files).sort(comparator);
|
|
|
|
// Refresh displayed list
|
|
displayFiles(sortedFilesArray);
|
|
|
|
// Update the files property
|
|
const dataTransfer = new DataTransfer();
|
|
sortedFilesArray.forEach(file => dataTransfer.items.add(file));
|
|
document.getElementById("fileInput-input").files = dataTransfer.files;
|
|
}
|
|
|
|
function updateFiles() {
|
|
var dataTransfer = new DataTransfer();
|
|
var liElements = document.querySelectorAll("#selectedFiles li");
|
|
const files = document.getElementById("fileInput-input").files;
|
|
|
|
for (var i = 0; i < liElements.length; i++) {
|
|
var fileNameFromList = liElements[i].querySelector(".filename").innerText;
|
|
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-input").files = dataTransfer.files;
|
|
}
|