fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feat/sortables' into 'master'

Browse Source 
refactor of sortable tables

See merge request !20
This commit is contained in:
Felix Hamann 2018-03-31 00:54:04 +02:00
commit bb8cc2ab17
2 changed files with 107 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
templates/home.hamlet
View File

@ -39,7 +39,7 @@
<tbody> <tbody>
<tr> <tr>
<td>0 <td>0
<td>14 <td>NT2
<td>CON2 <td>CON2
<td>3 <td>3
<tr> <tr>
@ -57,6 +57,11 @@
<td>43 <td>43
<td>T2C2 <td>T2C2
<td>35 <td>35
<tr>
<td>4
<td>73
<td>CA62
<td>7
<hr> <hr>
<div .container> <div .container>

85
templates/standalone/sortable.julius
View File

@ -1,23 +1,30 @@
/** /**
* delcare a table as sortable by adding class 'js-sortable' * delcare a table as sortable by adding class 'js-sortable'
*/ */
document.addEventListener('DOMContentLoaded', function() { (function() {
'use strict';
var tables = []; window.utils = window.utils || {};
window.utils.sortable = function(table) {
var ASC = 1; var ASC = 1;
var DESC = -1; var DESC = -1;
function initTable(table, tableIndex) { var trs, ths, sortBy, sortDir, trContents;
var trs = table.querySelectorAll('tr');
var ths = table.querySelectorAll('th'); function setup() {
var trContents = []; trs = table.querySelectorAll('tr');
ths = table.querySelectorAll('th');
sortBy = 0;
sortDir = ASC;
trContents = [];
Array.from(trs).forEach(function(tr, rowIndex) { Array.from(trs).forEach(function(tr, rowIndex) {
if (rowIndex === 0) { if (rowIndex === 0) {
// register table headers as sort-listener // register table headers as sort-listener
Array.from(tr.querySelectorAll('th')).forEach(function(th, thIndex) { Array.from(tr.querySelectorAll('th')).forEach(function(th, thIndex) {
th.addEventListener('click', function(el) { th.addEventListener('click', function(el) {
sortTableBy(tableIndex, thIndex); sortTableBy(thIndex);
}); });
}); });
} else { } else {
@ -27,52 +34,45 @@ document.addEventListener('DOMContentLoaded', function() {
})); }));
} }
}); });
tables.push({
el: table,
ths: ths,
sortBy: 0,
sortDir: ASC,
trContents,
});
} }
setup();
function updateThs(tableIndex, thIndex, sortOrder) { function updateThs(thIndex, sortOrder) {
Array.from(tables[tableIndex].ths).forEach(function (th) { Array.from(ths).forEach(function (th) {
th.classList.remove('sorted-asc', 'sorted-desc'); th.classList.remove('sorted-asc', 'sorted-desc');
}); });
var suffix = sortOrder > 0 ? 'asc' : 'desc'; var suffix = sortOrder > 0 ? 'asc' : 'desc';
tables[tableIndex].ths[thIndex].classList.add('sorted-' + suffix); ths[thIndex].classList.add('sorted-' + suffix);
} }
function sortTableBy(tableIndex, thIndex) { function sortTableBy(thIndex) {
var table = tables[tableIndex];
var sortKey = thIndex; var sortKey = thIndex;
var sortOrder = ASC; var sortOrder = ASC;
if (table.sortBy === sortKey) { if (sortBy === sortKey) {
sortOrder = table.sortDir === ASC ? DESC : ASC; sortOrder = sortDir === ASC ? DESC : ASC;
} }
table.trContents.sort(dynamicSort(sortKey, sortOrder)); trContents.sort(dynamicSortByType(sortKey, sortOrder));
tables[tableIndex].sortBy = thIndex; trContents.sort(dynamicSortByKey(sortKey, sortOrder));
tables[tableIndex].sortDir = sortOrder; sortBy = thIndex;
updateThs(tableIndex, thIndex, sortOrder); sortDir = sortOrder;
updateThs(thIndex, sortOrder);
Array.from(table.el.querySelectorAll('tr')).forEach(function(tr, trIndex) { Array.from(trs).forEach(function(tr, trIndex) {
if (trIndex > 0) { if (trIndex > 0) {
Array.from(tr.querySelectorAll('td')).forEach(function (td, tdIndex) { Array.from(tr.querySelectorAll('td')).forEach(function (td, tdIndex) {
td.innerHTML = table.trContents[trIndex - 1][tdIndex]; td.innerHTML = trContents[trIndex - 1][tdIndex];
}); });
} }
}); });
} }
function dynamicSort(key, order) { function dynamicSortByKey(key, order) {
return function (a,b) { return function (a,b) {
var aVal = parseInt(a[key]); var aVal = parseInt(a[key]);
var bVal = parseInt(b[key]); var bVal = parseInt(b[key]);
if ((isNaN(aVal) && !isNaN(bVal)) || (!isNaN(aVal) && isNaN(bVal))) { if ((isNaN(aVal) && !isNaN(bVal)) || (!isNaN(aVal) && isNaN(bVal))) {
console.error('trying to sort table by row with mixed content: "%s", "%s"', a[key], b[key]); return 1;
} }
aVal = isNaN(aVal) ? a[key] : aVal; aVal = isNaN(aVal) ? a[key] : aVal;
bVal = isNaN(bVal) ? b[key] : bVal; bVal = isNaN(bVal) ? b[key] : bVal;
@ -81,8 +81,27 @@ document.addEventListener('DOMContentLoaded', function() {
} }
} }
var rawTables = document.querySelectorAll('.js-sortable'); function dynamicSortByType(key, order) {
Array.from(rawTables).forEach(function(table, i) { return function (a,b) {
initTable(table, i); var aVal = parseInt(a[key]);
var bVal = parseInt(b[key]);
aVal = isNaN(aVal) ? a[key] : aVal;
bVal = isNaN(bVal) ? b[key] : bVal;
var res = (aVal < bVal ? -1 : aVal > bVal ? 1 : 0);
if (isNaN(aVal) && !isNaN(bVal)) {
res = -1;
}
if (!isNaN(aVal) && isNaN(bVal)) {
res = 1;
}
return res * order;
}
}
};
})();
document.addEventListener('DOMContentLoaded', function() {
Array.from(document.querySelectorAll('.js-sortable')).forEach(function(table) {
utils.sortable(table);
}); });
}); });