Added sorting and previewing capabilities to files.

edit/files.php

@@ -1,7 +1,6 @@
 <?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>
  */
@@ -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;
 
 }

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) {

edit/themes/default/theme.css

@@ -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
  */