diff options
author | Miguel Jacq <mig@mig5.net> | 2018-02-14 16:56:03 +1100 |
---|---|---|
committer | Miguel Jacq <mig@mig5.net> | 2018-02-14 16:56:03 +1100 |
commit | 062101fcbfd81f33280e311937793ce48192720e (patch) | |
tree | 549d1c7c0060bf1b258a38a6487d8e557f382e83 /share | |
parent | 2fb8d1f836db234d41e5d131c1f62518db425d05 (diff) | |
download | onionshare-062101fcbfd81f33280e311937793ce48192720e.tar.gz onionshare-062101fcbfd81f33280e311937793ce48192720e.zip |
Make table sortable with javascript (if enabled)
Diffstat (limited to 'share')
-rw-r--r-- | share/html/index.html | 74 |
1 files changed, 71 insertions, 3 deletions
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> |