You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 lines
2.4 KiB
JavaScript
2 lines
2.4 KiB
JavaScript
1 year ago
|
var table=document.querySelector("#sitemapTable"),headers=Array.from(table.querySelectorAll("th")),liveRegion=document.createElement("div");function updateSortIndicators(e,t){removeSortArrows(e);var r=document.createElement("span");r.classList.add("sort-arrow"),r.textContent="asc"===t?" ▲":" ▼",r.setAttribute("aria-hidden","true"),e.appendChild(r)}function removeSortArrows(e){e.querySelectorAll(".sort-arrow").forEach(function(e){e.remove()})}function initializeHeaders(){headers.forEach(function(e,t){e.classList.add("sortable"),e.setAttribute("tabindex","0"),e.sortDirection="asc",e.setAttribute("aria-sort",0===t?"ascending":"none"),e.addEventListener("click",function(){sortTable(t)}),e.addEventListener("keydown",function(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),sortTable(t))})})}function announceSort(e,t){e=e.querySelector(".columntitle").textContent;liveRegion.textContent="Column "+e+" is now sorted in "+t+" order"}function sortTable(e){var t=headers[e],r="asc"===t.sortDirection?"desc":"asc",n=table.querySelector("tbody"),o=Array.from(n.querySelectorAll("tr"));sortRows(o,e,r),refreshTableBody(n,o),updateHeaderAttributes(t,r),announceSort(t,"asc"==r?"ascending":"descending")}function sortRows(e,r,n){e.sort(function(e,t){e=e.querySelectorAll("td")[r].textContent,t=t.querySelectorAll("td")[r].textContent;return"asc"===n?e.localeCompare(t):t.localeCompare(e)})}function refreshTableBody(t,e){t.innerHTML="",e.forEach(function(e){t.appendChild(e)})}function updateHeaderAttributes(t,e){headers.forEach(function(e){e!==t&&(e.setAttribute("aria-sort","none"),removeSortArrows(e))}),t.setAttribute("aria-sort","asc"===e?"ascending":"descending"),t.sortDirection=e,updateSortIndicators(t,e),updateAnnounceText(t)}function updateAnnounceText(e){e.querySelector(".visually-hidden").textContent="Click to sort in "+("asc"===e.sortDirection?"descending":"ascending")+" order"}function addSortText(){headers.forEach(function(e){var t=document.createElement("span");t.classList.add("visually-hidden"),t.textContent="Click to sort in descending order",e.appendChild(t)})}liveRegion.setAttribute("aria-live","polite"),liveRegion.setAttribute("aria-atomic","true"),liveRegion.classList.add("visually-hidden"),document.body.appendChild(liveRegion),initializeHeaders(),addSortText(),updateSortIndicators(headers[0],"asc"),headers[0].sortDirection="asc",headers[0].setAttribute("aria-sort","ascending");
|