You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
156 lines
4.9 KiB
156 lines
4.9 KiB
var addSorting = (function () { |
|
"use strict"; |
|
var cols, |
|
currentSort = { |
|
index: 0, |
|
desc: false |
|
}; |
|
|
|
// returns the summary table element |
|
function getTable() { return document.querySelector('.coverage-summary table'); } |
|
// returns the thead element of the summary table |
|
function getTableHeader() { return getTable().querySelector('thead tr'); } |
|
// returns the tbody element of the summary table |
|
function getTableBody() { return getTable().querySelector('tbody'); } |
|
// returns the th element for nth column |
|
function getNthColumn(n) { return getTableHeader().querySelectorAll('th')[n]; } |
|
|
|
// loads all columns |
|
function loadColumns() { |
|
var colNodes = getTableHeader().querySelectorAll('th'), |
|
colNode, |
|
cols = [], |
|
col, |
|
i; |
|
|
|
for (i = 0; i < colNodes.length; i += 1) { |
|
colNode = colNodes[i]; |
|
col = { |
|
key: colNode.getAttribute('data-col'), |
|
sortable: !colNode.getAttribute('data-nosort'), |
|
type: colNode.getAttribute('data-type') || 'string' |
|
}; |
|
cols.push(col); |
|
if (col.sortable) { |
|
col.defaultDescSort = col.type === 'number'; |
|
colNode.innerHTML = colNode.innerHTML + '<span class="sorter"></span>'; |
|
} |
|
} |
|
return cols; |
|
} |
|
// attaches a data attribute to every tr element with an object |
|
// of data values keyed by column name |
|
function loadRowData(tableRow) { |
|
var tableCols = tableRow.querySelectorAll('td'), |
|
colNode, |
|
col, |
|
data = {}, |
|
i, |
|
val; |
|
for (i = 0; i < tableCols.length; i += 1) { |
|
colNode = tableCols[i]; |
|
col = cols[i]; |
|
val = colNode.getAttribute('data-value'); |
|
if (col.type === 'number') { |
|
val = Number(val); |
|
} |
|
data[col.key] = val; |
|
} |
|
return data; |
|
} |
|
// loads all row data |
|
function loadData() { |
|
var rows = getTableBody().querySelectorAll('tr'), |
|
i; |
|
|
|
for (i = 0; i < rows.length; i += 1) { |
|
rows[i].data = loadRowData(rows[i]); |
|
} |
|
} |
|
// sorts the table using the data for the ith column |
|
function sortByIndex(index, desc) { |
|
var key = cols[index].key, |
|
sorter = function (a, b) { |
|
a = a.data[key]; |
|
b = b.data[key]; |
|
return a < b ? -1 : a > b ? 1 : 0; |
|
}, |
|
finalSorter = sorter, |
|
tableBody = document.querySelector('.coverage-summary tbody'), |
|
rowNodes = tableBody.querySelectorAll('tr'), |
|
rows = [], |
|
i; |
|
|
|
if (desc) { |
|
finalSorter = function (a, b) { |
|
return -1 * sorter(a, b); |
|
}; |
|
} |
|
|
|
for (i = 0; i < rowNodes.length; i += 1) { |
|
rows.push(rowNodes[i]); |
|
tableBody.removeChild(rowNodes[i]); |
|
} |
|
|
|
rows.sort(finalSorter); |
|
|
|
for (i = 0; i < rows.length; i += 1) { |
|
tableBody.appendChild(rows[i]); |
|
} |
|
} |
|
// removes sort indicators for current column being sorted |
|
function removeSortIndicators() { |
|
var col = getNthColumn(currentSort.index), |
|
cls = col.className; |
|
|
|
cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, ''); |
|
col.className = cls; |
|
} |
|
// adds sort indicators for current column being sorted |
|
function addSortIndicators() { |
|
getNthColumn(currentSort.index).className += currentSort.desc ? ' sorted-desc' : ' sorted'; |
|
} |
|
// adds event listeners for all sorter widgets |
|
function enableUI() { |
|
var i, |
|
el, |
|
ithSorter = function ithSorter(i) { |
|
var col = cols[i]; |
|
|
|
return function () { |
|
var desc = col.defaultDescSort; |
|
|
|
if (currentSort.index === i) { |
|
desc = !currentSort.desc; |
|
} |
|
sortByIndex(i, desc); |
|
removeSortIndicators(); |
|
currentSort.index = i; |
|
currentSort.desc = desc; |
|
addSortIndicators(); |
|
}; |
|
}; |
|
for (i =0 ; i < cols.length; i += 1) { |
|
if (cols[i].sortable) { |
|
el = getNthColumn(i).querySelector('.sorter'); |
|
if (el.addEventListener) { |
|
el.addEventListener('click', ithSorter(i)); |
|
} else { |
|
el.attachEvent('onclick', ithSorter(i)); |
|
} |
|
} |
|
} |
|
} |
|
// adds sorting functionality to the UI |
|
return function () { |
|
if (!getTable()) { |
|
return; |
|
} |
|
cols = loadColumns(); |
|
loadData(cols); |
|
addSortIndicators(); |
|
enableUI(); |
|
}; |
|
})(); |
|
|
|
window.addEventListener('load', addSorting);
|
|
|