jrenslin/md-cms
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added sorting and previewing capabilities to files.

Browse Source
This commit is contained in:
Joshua Ramon Enslin
2018-06-19 01:50:29 +02:00
committed by Stefan Rohde-Enslin
parent 768c0998aa
commit 32345e9629
3 changed files with 156 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
edit/js/main.js
View File

@ -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 {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");
fileList.classList.add("fileList");
queryPage(
encodeURI('./files.php'),
function (request) {
let allFiles = JSON.parse(request.response);
let target = './files.php';
if (sortOrder != '') {
target += '?sort=' + sortOrder;
}
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
fileLineName.textContent = allFiles[i]; // Display file name
fileLineName.addEventListener('click', function(e) {
callback("../files/" + allFiles[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');
});
fileLine.appendChild(fileLineName);
fileTHLine.appendChild(fileLineTHName);
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);
fileLineDelete.appendChild(fileLineDeleteLink);
fileLine.appendChild(fileLineDelete);
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]["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].addEventListener('keydown', async function(e) {