Add table sorting

eclipseo · Jul 22, 2021 · 84e4550 · 84e4550
1 parent e47a992
commit 84e4550
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 1 deletion.
diff --git a/image-comparison-web/js/sort-table.js b/image-comparison-web/js/sort-table.js
@@ -0,0 +1,99 @@
+var tables = document.querySelectorAll('table.sortable');
+
+function loadsort()
+{
+    for (var i = 0; i < tables.length; i++)
+    {
+        var headers = tables[i].querySelectorAll('th');
+
+        for (var x = 0; x < headers.length; x++)
+        {
+            var header = headers[x];
+            var sortlink = document.createElement('a');
+            var datatype = header.dataset.type;
+
+            sortlink.innerHTML = header.innerHTML + '  ▾';
+            sortlink.dataset.column = x;
+            sortlink.dataset.name = header.innerHTML;
+            sortlink.dataset.direction = 'asc';
+            sortlink.addEventListener('click', function (e) {
+                sort(this);
+            });
+
+            headers[x].innerHTML = '';
+            headers[x].appendChild(sortlink);
+        }
+    }
+}
+
+
+function sort(el)
+{
+    var direction = el.dataset.direction;
+    var column = el.dataset.column;
+
+    var table = getTableFromChild(el);
+    var rows = table.rows;
+
+    for (var x = 0; x < rows.length; x++)
+    {
+        var changes = false;
+
+        for (var i = 1; i < rows.length-1; i++)
+        {
+            var row = rows[i];
+            var otherrow = rows[i + 1];
+            var parent = row.parentNode;
+
+            var value = rows[i].cells[column].innerHTML;
+            var next = rows[i + 1].cells[column].innerHTML;
+
+            if (!isNaN(parseFloat(value))) {
+                value = parseFloat(value);
+                next = parseFloat(next);
+            }
+
+            if (value > next && direction == 'asc') {
+                changes = true;
+                parent.insertBefore(otherrow, row);
+            }
+
+            else if (value < next && direction == 'desc')
+            {
+                changes = true;
+                parent.insertBefore(otherrow, row);
+            }
+        }
+
+        if (changes == false)
+            break;
+    }
+
+    el.dataset.direction = direction == 'asc' ? 'desc' : 'asc';
+    el.innerHTML = el.dataset.name + (direction == 'asc' ? '  ▾' : '  ▴');
+}
+
+function getTableFromChild(child)
+{
+    var element = child;
+    var type = '';
+
+    while (type.toLowerCase() != 'table')
+    {
+        element = element.parentNode;
+
+        if (element != null)
+        {
+            type = element.nodeName;
+        }
+
+        else
+        {
+            break;
+        }
+    }
+
+    return element;
+}
+
+loadsort();
diff --git a/image-comparison-web/js/splitimage2.js b/image-comparison-web/js/splitimage2.js
@@ -30,6 +30,7 @@ var canvases = {
     leftDest: getElId('canvasLeft'),
     rightDest: getElId('canvasRight')
 }
+
 function prepCanvas(width, height, which) {
     var c;
 

diff --git a/image-comparison-web/speed_results.html b/image-comparison-web/speed_results.html
@@ -18,7 +18,7 @@
 <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js"></script></head>
 <body>
 <h2>Lossless compression ratio and Weissman score:</h2>
-<table>
+<table class="sortable">
 <thead>
 <tr>
 <th>format</th>
@@ -171,5 +171,6 @@ <h2>Lossless compression ratio and Weissman score:</h2>
 <h2>Lossy compression and speed</h2>
 <p><img class="graph" alt="Encoding time in function of bits per pixel" src="subset1.encoding_time.(aom_20210715,jxl_20210715,heif_1.12.0,mozjpeg,webp_1.2.0,webp2_20210715).svg"></p>
 
+<script type="text/javascript" src="js/sort-table.js"></script>
 </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,6 +30,7 @@ var canvases = { @@
         leftDest: getElId('canvasLeft'),
         rightDest: getElId('canvasRight')
     }
     function prepCanvas(width, height, which) {
         var c;
@@ Expand Down @@