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.
		
		
		
		
		
			
		
			
				
					159 lines
				
				5.1 KiB
			
		
		
			
		
	
	
					159 lines
				
				5.1 KiB
			| 
											3 years ago
										 | var addSorting = (function () { | ||
|  |     "use strict"; | ||
|  |     var cols, | ||
|  |         currentSort = { | ||
|  |             index: 0, | ||
|  |             desc: false | ||
|  |         }; | ||
|  | 
 | ||
|  |     // returns the summary table element
 | ||
|  |     function getTable() { return document.querySelector('.coverage-summary'); } | ||
|  |     // 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) { | ||
|  |                 // add the click event handler on the th so users
 | ||
|  |                 // dont have to click on those tiny arrows
 | ||
|  |                 el = getNthColumn(i).querySelector('.sorter').parentElement; | ||
|  |                 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); |