Added sorting and previewing capabilities to files.
This commit is contained in:
parent
768c0998aa
commit
32345e9629
|
|
@ -1,7 +1,6 @@
|
|||
<?PHP
|
||||
/**
|
||||
* Start page of the backend.
|
||||
* Offers a dashboard.
|
||||
* This script offers functionality related to uploading and deleting files.
|
||||
*
|
||||
* @author Joshua Ramon Enslin <joshua@jrenslin.de>
|
||||
*/
|
||||
|
|
@ -30,7 +29,43 @@ define("fileDir", __DIR__ . "/../files");
|
|||
if ($task == "list") {
|
||||
|
||||
$files = scanDirConts(fileDir);
|
||||
echo json_encode($files);
|
||||
|
||||
$output = [];
|
||||
foreach ($files as $file) {
|
||||
$output[] = [
|
||||
"name" => $file,
|
||||
"type" => mime_content_type(fileDir . "/$file"),
|
||||
"size" => filesize(fileDir . "/$file"),
|
||||
"mtime" => filemtime(fileDir . "/$file"),
|
||||
];
|
||||
}
|
||||
|
||||
if (isset($_GET['sort'])) {
|
||||
if ($_GET['sort'] == "name") {
|
||||
usort($output, function(array $a, array $b) {
|
||||
return strnatcmp($a['name'], $b['name']);
|
||||
});
|
||||
}
|
||||
else if ($_GET['sort'] == "type") {
|
||||
usort($output, function(array $a, array $b) {
|
||||
return strnatcmp($a['type'], $b['type']);
|
||||
});
|
||||
}
|
||||
else if ($_GET['sort'] == "size") {
|
||||
usort($output, function(array $a, array $b) {
|
||||
if ($a['size'] == $b['size']) return 0;
|
||||
return ($a['size'] > $b['size']) ? -1 : 1;
|
||||
});
|
||||
}
|
||||
else if ($_GET['sort'] == "mtime") {
|
||||
usort($output, function(array $a, array $b) {
|
||||
if ($a['mtime'] == $b['mtime']) return 0;
|
||||
return ($a['mtime'] > $b['mtime']) ? -1 : 1;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
echo json_encode($output);
|
||||
return;
|
||||
|
||||
}
|
||||
|
|
|
|||
111
edit/js/main.js
111
edit/js/main.js
|
|
@ -31,6 +31,11 @@ document.addEventListener("DOMContentLoaded", function() {
|
|||
"en" : {
|
||||
"uploadFile" : "Upload file",
|
||||
"submit" : "Submit",
|
||||
"filename" : "File Name",
|
||||
"filetype" : "File Type",
|
||||
"filesize" : "File Size",
|
||||
"filemtime" : "Last modified",
|
||||
"preview" : "Preview",
|
||||
"generate" : "Generate",
|
||||
"embedCodeGenerator" : "Generator for embed code",
|
||||
"helpEmbedCode" : "Here you can create embed code.",
|
||||
|
|
@ -50,6 +55,11 @@ document.addEventListener("DOMContentLoaded", function() {
|
|||
"de" : {
|
||||
"uploadFile" : "Eine Datei heraufladen",
|
||||
"submit" : "Abschicken",
|
||||
"filename" : "Dateiname",
|
||||
"filetype" : "Dateityp",
|
||||
"filesize" : "Größe",
|
||||
"filemtime" : "Zuletzt bearbeitet",
|
||||
"preview" : "Vorschau",
|
||||
"generate" : "Generieren",
|
||||
"embedCodeGenerator" : "Generator für Einbettungen",
|
||||
"helpEmbedCode" : "Hier können sie den embed-code generieren.",
|
||||
|
|
@ -241,47 +251,128 @@ document.addEventListener("DOMContentLoaded", function() {
|
|||
/**
|
||||
* Function for generating file list.
|
||||
*
|
||||
* @param {DOMElement} parentElement Parent element to bind to.
|
||||
* @param {function} callback Function to call on clicking on a file name.
|
||||
* @param {string} sortOrder Sort order.
|
||||
*
|
||||
* @return {DOMElement}
|
||||
* @return {void}
|
||||
*/
|
||||
function generateFileList(callback) {
|
||||
function generateFileList(parentElement, callback, sortOrder = '') {
|
||||
|
||||
let fileListDiv = document.createElement("div");
|
||||
fileListDiv.id = "fileListDiv";
|
||||
|
||||
let fileList = document.createElement("table");
|
||||
fileList.classList.add("fileList");
|
||||
|
||||
let target = './files.php';
|
||||
if (sortOrder != '') {
|
||||
target += '?sort=' + sortOrder;
|
||||
}
|
||||
|
||||
function listFileListContents(target) {
|
||||
|
||||
queryPage(
|
||||
encodeURI('./files.php'),
|
||||
encodeURI(target),
|
||||
function (request) {
|
||||
let allFiles = JSON.parse(request.response);
|
||||
|
||||
for (let i = 0, max = allFiles.length; i < max; i++) {
|
||||
// Generate title line with sorting functionality
|
||||
let fileTHLine = document.createElement("tr");
|
||||
|
||||
let fileLineTHName = document.createElement("th"); // Add TH for file name
|
||||
fileLineTHName.textContent = getTranslation(translations, "filename"); // Display th contents
|
||||
fileLineTHName.addEventListener('click', function(e) {
|
||||
while (fileList.firstChild) { fileList.removeChild(fileList.firstChild); }
|
||||
listFileListContents('./files.php');
|
||||
});
|
||||
fileTHLine.appendChild(fileLineTHName);
|
||||
|
||||
let fileLineTHType = document.createElement("th"); // Add TH for file type
|
||||
fileLineTHType.textContent = getTranslation(translations, "filetype"); // Display th contents
|
||||
fileLineTHType.addEventListener('click', function(e) {
|
||||
while (fileList.firstChild) { fileList.removeChild(fileList.firstChild); }
|
||||
listFileListContents('./files.php?sort=type');
|
||||
});
|
||||
fileTHLine.appendChild(fileLineTHType);
|
||||
|
||||
let fileLineTHMTime = document.createElement("th"); // Add TH for filemtime
|
||||
fileLineTHMTime.textContent = getTranslation(translations, "filemtime"); // Display th contents
|
||||
fileLineTHMTime.addEventListener('click', function(e) {
|
||||
while (fileList.firstChild) { fileList.removeChild(fileList.firstChild); }
|
||||
listFileListContents('./files.php?sort=mtime');
|
||||
});
|
||||
fileTHLine.appendChild(fileLineTHMTime);
|
||||
|
||||
let fileLineTHSize = document.createElement("th"); // Add TH for file size
|
||||
fileLineTHSize.textContent = getTranslation(translations, "filesize"); // Display th contents
|
||||
fileLineTHSize.addEventListener('click', function(e) {
|
||||
while (fileList.firstChild) { fileList.removeChild(fileList.firstChild); }
|
||||
listFileListContents('./files.php?sort=size');
|
||||
});
|
||||
fileTHLine.appendChild(fileLineTHSize);
|
||||
|
||||
fileList.appendChild(fileTHLine); // Append headline line to table
|
||||
|
||||
for (let i = 0, max = allFiles.length; i < max; i++) { // Loop over API outputs and print file lines.
|
||||
|
||||
let fileLine = document.createElement("tr");
|
||||
|
||||
let fileLineName = document.createElement("td"); // Add TD for displaying file name and main action
|
||||
fileLineName.textContent = allFiles[i]; // Display file name
|
||||
fileLineName.textContent = allFiles[i]["name"]; // Display file name
|
||||
fileLineName.addEventListener('click', function(e) {
|
||||
callback("../files/" + allFiles[i]);
|
||||
callback("../files/" + allFiles[i]["name"]);
|
||||
});
|
||||
fileLine.appendChild(fileLineName);
|
||||
|
||||
let fileLineType = document.createElement("td"); // Add TD for displaying file type
|
||||
fileLineType.textContent = allFiles[i]["type"]; // Display file name
|
||||
fileLine.appendChild(fileLineType);
|
||||
|
||||
let fileLineMTime = document.createElement("td"); // Add TD for displaying filemtime
|
||||
fileLineMTime.textContent = allFiles[i]["mtime"]; // Display file name
|
||||
fileLine.appendChild(fileLineMTime);
|
||||
|
||||
let fileLineSize = document.createElement("td"); // Add TD for displaying filemtime
|
||||
fileLineSize.textContent = allFiles[i]["size"]; // Display file name
|
||||
fileLine.appendChild(fileLineSize);
|
||||
|
||||
let fileLinePreview = document.createElement("td"); // Add TD for seing preview
|
||||
fileLinePreview.textContent = getTranslation(translations, "preview"); // Display symbol
|
||||
fileLinePreview.addEventListener('click', function(e) {
|
||||
document.getElementById("filePreview").src = "../files/" + allFiles[i]["name"];
|
||||
document.getElementById("filePreview").type = allFiles[i]['type'];
|
||||
});
|
||||
fileLine.appendChild(fileLinePreview);
|
||||
|
||||
let fileLineDelete = document.createElement("td"); // Add TD for deleting file
|
||||
let fileLineDeleteLink = document.createElement("a"); // Add a.
|
||||
fileLineDeleteLink.textContent = " \u2326 "; // Delete Symbole
|
||||
fileLineDeleteLink.href = "files.php?task=delete&subject=" + encodeURI(allFiles[i]) + "&backTo=" + encodeURI(location.href);
|
||||
fileLineDeleteLink.href = "files.php?task=delete&subject=" + encodeURI(allFiles[i]["name"]) + "&backTo=" + encodeURI(location.href);
|
||||
fileLineDelete.appendChild(fileLineDeleteLink);
|
||||
fileLine.appendChild(fileLineDelete);
|
||||
|
||||
fileList.appendChild(fileLine);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
listFileListContents(target);
|
||||
|
||||
return fileList;
|
||||
// Append to parent element
|
||||
fileListDiv.appendChild(fileList);
|
||||
parentElement.appendChild(fileListDiv);
|
||||
|
||||
// Offer preview
|
||||
let preview = document.createElement("embed");
|
||||
preview.id = "filePreview";
|
||||
parentElement.appendChild(preview);
|
||||
}
|
||||
|
||||
overlay.appendChild(generateFileList(function(value) { location.href = value; }));
|
||||
let fileOverlayRight = document.createElement("div");
|
||||
generateFileList(fileOverlayRight, function(value) { location.href = value; });
|
||||
overlay.appendChild(fileOverlayRight);
|
||||
document.getElementsByTagName("body")[0].appendChild(overlay);
|
||||
|
||||
document.getElementsByTagName("body")[0].addEventListener('keydown', async function(e) {
|
||||
|
|
|
|||
|
|
@ -288,6 +288,9 @@ main { padding: .5em 5em 3em 3em; }
|
|||
|
||||
form[action="files.php"] > * { display: block; }
|
||||
|
||||
#fileListDiv { height: 60vh; overflow-y: auto; }
|
||||
#filePreview { height: 20vh; text-align: center; }
|
||||
|
||||
/****************************
|
||||
* Animations
|
||||
*/
|
||||
|
|
|
|||
Reference in New Issue
Block a user