From 08ac08718b427d3a5d3b20b8a7e458fff0d0b5d4 Mon Sep 17 00:00:00 2001
From: MasterofJOKers <joker@someserver.de>
Date: Mon, 11 Jan 2016 08:41:25 +0100
Subject: [PATCH] List view allows sorting by "Last Modified", "Name", "Size"

This is implemented in JavaScript, because for implementing it in
Python, the concept of creating the directory listing view would have to
be changed.
---
 servefile | 82 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 79 insertions(+), 3 deletions(-)

diff --git a/servefile b/servefile
index f086bc9..b409f65 100755
--- a/servefile
+++ b/servefile
@@ -407,9 +407,9 @@ class DirListingHandler(FileBaseHandler):
 	<table summary="Directory Listing">
 		<thead>
 			<tr>
-				<th class="name">Name</th>
-				<th class="lastModified">Last Modified</th>
-				<th class="size">Size</th>
+				<th class="name"><a onclick="sort('name');">Name</a></th>
+				<th class="last-modified"><a onclick="sort('last-modified');">Last Modified</a></th>
+				<th class="size"><a onclick="sort('size');">Size</a></th>
 				<th class="type">Type</th>
 			</tr>
 		</thead>
@@ -417,6 +417,82 @@ class DirListingHandler(FileBaseHandler):
 		""" % {'path': os.path.normpath(urllib.unquote(self.path))}
 		footer = """</tbody></table></div>
 <div class="footer"><a href="http://seba-geek.de/stuff/servefile/">servefile %(version)s</a></div>
+<script>
+    function unhumanize(text){
+        var powers = {'K': 1, 'M': 2, 'G': 3, 'T': 4};
+        var number = parseFloat(text.slice(0, text.length - 1));
+        var unit = text.slice(text.length - 1);
+        return number * Math.pow(1024, powers[unit]);
+    }
+
+
+    function compare_class(cls, modifier, a, b){
+        var atext = a.getElementsByClassName(cls).item(0).textContent,
+            btext = b.getElementsByClassName(cls).item(0).textContent,
+            atype = a.getElementsByClassName("type").item(0).innerHTML,
+            btype = b.getElementsByClassName("type").item(0).innerHTML;
+
+        // always keep directories on top
+        if (atype !== btype) {
+            if (atype === "Directory")
+                return -1
+            if (btype === "Directory")
+                return 1
+        }
+
+        if (cls === "name"){
+            if (atype === "Directory")
+                atext = atext.slice(0, atext.length - 1);
+
+            if (btype === "Directory")
+                btext = btext.slice(0, btext.length - 1);
+        }
+
+        if (cls === "size"){
+            aint = unhumanize(atext);
+            bint = unhumanize(btext);
+            // don't change the order of same-size objects
+            if (aint === bint)
+                return 1;
+            return aint > bint ? modifier : -modifier;
+        }
+        else
+            return atext.localeCompare(btext) * modifier;
+    }
+
+
+    function move_rows(e, i, a){
+        if (i === a.length - 1)
+            return;
+        var par = e.parentNode,
+            next = e.nextSibling;
+        if (next === a[i+1])
+            return;
+        par.removeChild(a[i+1]);
+        if (next)
+            par.insertBefore(a[i+1], next);
+        else
+            par.appendChild(a[i+1]);
+    }
+
+    function sort(cls){
+        var arr = Array.prototype.slice.call(document.getElementsByTagName("tr"));
+        var e = arr.shift();
+        if (!e.sort_modifier || e.sort_cls !== cls)
+            if (cls === "name")
+                e.sort_modifier = -1;
+            else
+                e.sort_modifier = 1;
+        e.sort_cls = cls;
+        e.sort_modifier = -1 * e.sort_modifier;
+        arr = arr.sort(function (a, b) { return compare_class(cls, e.sort_modifier, a, b); });
+        arr.forEach(move_rows);
+    }
+
+    var e = document.getElementsByTagName("tr").item(0);
+    e.sort_modifier = 1;
+    e.sort_cls = "name";
+</script>
 </body>
 </html>""" % {'version': __version__}
 		content = []