adding sorting by name

css/main.css

@@ -7,6 +7,17 @@ a {
     text-decoration: none;
 }
 
+.list-sort {
+    background: #ddd;
+    border-radius: 1rem;
+    padding: .5rem 2rem;
+}
+
+.list-sort label {
+    display: inline-block;
+    margin: 0 1rem 0 0;
+}
+
 .file-list {
     list-style: none;
 }

index.html

@@ -16,12 +16,25 @@
 
 <div class="container">
     <h1>Files</h1>
+
+    <div class="list-sort">
+        <h5>sort list</h5>
+        <label>
+            by date
+            <input type="radio" name="sort" value="date" checked>
+        </label>
+        <label>
+            by name
+            <input type="radio" name="sort" value="name">
+        </label>
+    </div>
+
     <ul id="file-list" class="file-list">
-       <li>
+        <li>
-           <a href="#" class="file-name file-link"></a>
+            <a href="#" class="file-name file-link"></a>
-           <span class="file-date"></span>
+            <span class="file-date"></span>
-           <span class="file-size"></span>
+            <span class="file-size"></span>
-       </li>
+        </li>
     </ul>
 </div>
 

js/main.js

@@ -69,6 +69,47 @@ $(document).ready(function () {
         return parentDir;
     }
 
+    function renderFileList(filesData, path) {
+
+        var sortBy = $('input[name=sort]:checked').val();
+        if (sortBy === "date") {
+            console.log("sort by date");
+
+            filesData.sort(function (fileA, fileB) {
+                return fileB.mtime.getTime() - fileA.mtime.getTime();
+            });
+
+        } else if (sortBy === "name") {
+            console.log("sort by name");
+
+            filesData.sort(function (fileA, fileB) {
+                return fileA.name.toLowerCase().localeCompare(fileB.name.toLowerCase());
+            });
+        }
+
+        fileListElement.empty();
+
+        var parentDir = getParentDir(path);
+
+        if (parentDir) {
+            fileListElement.append(renderFileElement(
+                parentDir,
+                "..",
+                "directory"
+            ));
+        }
+
+        filesData.forEach(function (fileData) {
+            fileListElement.append(renderFileElement(
+                path,
+                fileData.name,
+                fileData.type,
+                fileData.size,
+                fileData.mtime
+            ));
+        });
+    }
+
     function navigateTo(path) {
         console.log("navigateTo", path);
 
@@ -80,32 +121,13 @@ $(document).ready(function () {
                     return fileData.mtime = new Date(fileData.mtime);
                 });
 
-                filesData.sort(function (fileA, fileB) {
+                renderFileList(filesData, path);
-                    return fileB.mtime.getTime() - fileA.mtime.getTime();
-                });
-
-                fileListElement.empty();
-
-                var parentDir = getParentDir(path);
-
-                if (parentDir) {
-                    fileListElement.append(renderFileElement(
-                        parentDir,
-                        "..",
-                        "directory"
-                    ));
-                }
-
-                filesData.forEach(function (fileData) {
-                    fileListElement.append(renderFileElement(
-                        path,
-                        fileData.name,
-                        fileData.type,
-                        fileData.size,
-                        fileData.mtime
-                    ));
-                });
 
+                $('input[name=sort]')
+                    .unbind("change")
+                    .on("change", function () {
+                        renderFileList(filesData, path);
+                    });
             }
         });
     }