// TODO: Add colspan support
export const uolTableStackable = () => {
// Config
const
stackableTableClass = '.js-uolTableStackable',
stackableTablePseudoThClass = 'uol-index-table__pseudo-th',
stackedTableClass = 'uol-index-table--stacked';
// Get tables
const tables = document.querySelectorAll(stackableTableClass);
// Process tables
tables.forEach( (table) => {
const ths = table.querySelectorAll('thead th');
const rows = table.querySelectorAll('tbody tr');
rows.forEach( (row) => {
const cells = row.querySelectorAll('td')
cells.forEach( (cell, i) => {
cell.innerHTML = `
${ths.item(i).innerText}
${cell.innerHTML}
`;
})
})
table.classList.add(stackedTableClass);
})
}
export const uolTablesSortable = () => {
let ascending;
const sortRowsByIndex = (table, colNumber) => {
const tBody = table.querySelector('tbody');
const rows = tBody.rows;
let newTableArray = [];
for (let i = 0; i < (rows.length); i++) {
newTableArray[i] = rows[i];
}
/**
* Sort function - switches through adjacent table elements
* Sorts in array, no swapping in DOM
* @param {element} a - first element to compare
* @param {element} b - second element to compare
* @returns {number} if -ve a is sorted before b, +ve b before a, 0 no change
*/
newTableArray.sort(function(a, b){
let aElement = a.getElementsByTagName("TD")[colNumber];
let bElement = b.getElementsByTagName("TD")[colNumber];
let aItem = aElement.dataset.sortby ?
aElement.dataset.sortby :
aElement.innerText;
let bItem = bElement.dataset.sortby ?
bElement.dataset.sortby :
bElement.innerText;
/**
* Nested ternary return statement
* Outer checks if both values are number or not
* Inner checks ascending boolean
* Returns -ve, +ve or 0
*/
return (!isNaN(parseFloat(aItem)) && !isNaN(parseFloat(bItem)) ?
ascending ? aItem - bItem : bItem - aItem :
ascending ? ('' + aItem).localeCompare(bItem) : ('' + bItem).localeCompare(aItem)
);
});
/** after sort completed build new table body from sorted array */
let newTBody = '';
for (let i = 0; i < (newTableArray.length); i++) {
newTBody += '
' + newTableArray[i].innerHTML + '
';
}
/** update DOM with new sorted table body content */
tBody.innerHTML = newTBody;
}
const tables = document.querySelectorAll('.uol-index-table');
tables.forEach( (table) => {
const tableHeadings = table.querySelectorAll('thead th');
/** Create map for mobile dropdown */
let mobileSortableColumns = new Map();
tableHeadings.forEach( (th, index) => {
if (th.dataset.sortable) {
const thValue = th.innerText;
th.innerHTML = `${thValue}`
// Add value to mobile dropdown map
mobileSortableColumns.set(index, thValue);
const sortButton = document.createElement('button');
sortButton.classList.add('uol-index-table__btn-sort');
sortButton.type = 'button';
sortButton.setAttribute('aria-label', 'Sort column');
sortButton.onclick = () => {
const allTh = table.querySelectorAll('thead th');
const thisBtn = allTh[index].querySelector('button');
if (thisBtn.classList.contains('sorted--asc')) {
ascending = false;
thisBtn.classList.add('sorted');
thisBtn.classList.add('sorted--desc');
thisBtn.classList.remove('sorted--asc');
} else {
ascending = true;
thisBtn.classList.add('sorted');
thisBtn.classList.remove('sorted--desc');
thisBtn.classList.add('sorted--asc');
}
// Reset all the other buttons
allTh.forEach( (th, i) => {
// Don't reset the button just clicked
if (i != index) {
// Get the button
const otherBtn = th.querySelector('button');
// Not all th have buttons
if (otherBtn) {
otherBtn.classList.remove('sorted');
otherBtn.classList.remove('sorted--asc');
otherBtn.classList.remove('sorted--desc');
}
}
})
sortRowsByIndex(table, index);
}
th.querySelector('.uol-index-table__th-inner').appendChild(sortButton);
}
})
if (mobileSortableColumns.size > 0) {
let selectSort = document.createElement('select');
selectSort.classList.add('uol-index-table__sort-select');
selectSort.setAttribute('aria-label', 'Sort table columns');
let selectSortOptions = ``;
mobileSortableColumns.forEach( (value, key) => {
selectSortOptions += `
`;
})
selectSort.innerHTML = selectSortOptions;
selectSort.addEventListener('change', (e) => {
const selected = e.target.options[e.target.selectedIndex],
selectedIndex = selected.dataset.sort_index,
selectedDir = selected.dataset.sort_dir;
ascending = (selectedDir == "asc") ? true: false;
sortRowsByIndex(table, selectedIndex);
})
// Insert select
const thead = table.querySelector('thead');
thead.parentNode.insertBefore(selectSort, thead);
}
})
}
export const uolTableSticky = () => {
require('intersection-observer');
const tHeads = document.querySelectorAll('.uol-index-table thead')
tHeads.forEach( (thead) => {
(new IntersectionObserver(function(e,options){
if(e[0].intersectionRatio>0){
thead.classList.remove('thead--stuck');
} else {
thead.classList.add('thead--stuck');
};
})).observe(thead);
})
}