From 70a80e3db50604ff8b0efd010d156bef3d719dda Mon Sep 17 00:00:00 2001
From: Miguel Jacq <mig@mig5.net>
Date: Wed, 14 Feb 2018 16:56:03 +1100
Subject: [PATCH] Make table sortable with javascript (if enabled)

---
 onionshare/web.py     |  2 +-
 share/html/index.html | 74 +++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 72 insertions(+), 4 deletions(-)

diff --git a/onionshare/web.py b/onionshare/web.py
index 7d1b72e8..0fedb29b 100644
--- a/onionshare/web.py
+++ b/onionshare/web.py
@@ -59,7 +59,7 @@ zip_filename = None
 zip_filesize = None
 
 security_headers = [
-    ('Content-Security-Policy', 'default-src \'self\'; style-src \'unsafe-inline\'; img-src \'self\' data:;'),
+    ('Content-Security-Policy', 'default-src \'self\'; style-src \'unsafe-inline\'; script-src \'unsafe-inline\'; img-src \'self\' data:;'),
     ('X-Frame-Options', 'DENY'),
     ('X-Xss-Protection', '1; mode=block'),
     ('X-Content-Type-Options', 'nosniff'),
diff --git a/share/html/index.html b/share/html/index.html
index b274d003..d5d36055 100644
--- a/share/html/index.html
+++ b/share/html/index.html
@@ -109,10 +109,10 @@
         <h1>OnionShare</h1>
     </header>
 
-    <table class="file-list">
+    <table class="file-list" id="file-list">
       <tr>
-        <th>Filename</th>
-        <th>Size</th>
+       <th onclick="sortTable(0)">Filename</th>
+        <th onclick="sortTable(1)">Size</th>
         <th></th>
       </tr>
       {% for info in file_info.dirs %}
@@ -136,5 +136,73 @@
       </tr>
       {% endfor %}
     </table>
+    <script>
+      // Function to convert human-readable sizes back to bytes, for sorting
+      function unhumanize(text) {
+        var powers = {'k': 1, 'm': 2, 'g': 3, 't': 4};
+        var regex = /(\d+(?:\.\d+)?)\s?(B|K|M|G|T)?/i;
+        var res = regex.exec(text);
+        if(res[2] === undefined) {
+          // Account for alphabetical words (file/dir names)
+          return text;
+        } else {
+          return res[1] * Math.pow(1024, powers[res[2].toLowerCase()]);
+        }
+      }
+      function sortTable(n) {
+        var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
+        table = document.getElementById("file-list");
+        switching = true;
+        // Set the sorting direction to ascending:
+        dir = "asc";
+        /* Make a loop that will continue until
+          no switching has been done: */
+        while (switching) {
+          // Start by saying: no switching is done:
+          switching = false;
+          rows = table.getElementsByTagName("TR");
+          /* Loop through all table rows (except the
+            first, which contains table headers): */
+          for (i = 1; i < (rows.length - 1); i++) {
+            // Start by saying there should be no switching:
+            shouldSwitch = false;
+            /* Get the two elements you want to compare,
+              one from current row and one from the next: */
+            x = rows[i].getElementsByTagName("TD")[n];
+            y = rows[i + 1].getElementsByTagName("TD")[n];
+            /* Check if the two rows should switch place,
+            based on the direction, asc or desc: */
+            if (dir == "asc") {
+                if (unhumanize(x.innerHTML.toLowerCase()) > unhumanize(y.innerHTML.toLowerCase())) {
+                  // If so, mark as a switch and break the loop:
+                  shouldSwitch= true;
+                  break;
+                }
+            } else if (dir == "desc") {
+              if (unhumanize(x.innerHTML.toLowerCase()) < unhumanize(y.innerHTML.toLowerCase())) {
+                // If so, mark as a switch and break the loop:
+                shouldSwitch= true;
+              break;
+            }
+          }
+        }
+        if (shouldSwitch) {
+          /* If a switch has been marked, make the switch
+          and mark that a switch has been done: */
+          rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
+          switching = true;
+          // Each time a switch is done, increase this count by 1:
+          switchcount ++;
+        } else {
+          /* If no switching has been done AND the direction is "asc",
+          set the direction to "desc" and run the while loop again. */
+          if (switchcount == 0 && dir == "asc") {
+            dir = "desc";
+            switching = true;
+          }
+        }
+      }
+    }
+  </script>
   </body>
 </html>