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