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,6 +16,19 @@
 
 <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>
             <a href="#" class="file-name file-link"></a>

js/main.js

@@ -69,21 +69,24 @@ $(document).ready(function () {
         return parentDir;
     }
 
-    function navigateTo(path) {
-        console.log("navigateTo", path);
+    function renderFileList(filesData, path) {
 
-        $.ajax({
-            url: filesBaseUrl + path,
-            success: function (filesData) {
-
-                filesData.map(function (fileData) {
-                    return fileData.mtime = new Date(fileData.mtime);
-                });
+        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);
@@ -105,7 +108,26 @@ $(document).ready(function () {
                 fileData.mtime
             ));
         });
+    }
 
+    function navigateTo(path) {
+        console.log("navigateTo", path);
+
+        $.ajax({
+            url: filesBaseUrl + path,
+            success: function (filesData) {
+
+                filesData.map(function (fileData) {
+                    return fileData.mtime = new Date(fileData.mtime);
+                });
+
+                renderFileList(filesData, path);
+
+                $('input[name=sort]')
+                    .unbind("change")
+                    .on("change", function () {
+                        renderFileList(filesData, path);
+                    });
             }
         });
     }