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);
|