70 lines
2.8 KiB
JavaScript
70 lines
2.8 KiB
JavaScript
(function () {
|
|
"use strict";
|
|
|
|
function compareRows(left, right, key, direction) {
|
|
const leftValue = left.dataset[key] || "";
|
|
const rightValue = right.dataset[key] || "";
|
|
const numericLeft = Number(leftValue);
|
|
const numericRight = Number(rightValue);
|
|
const bothNumeric = leftValue !== "" && rightValue !== ""
|
|
&& Number.isFinite(numericLeft) && Number.isFinite(numericRight);
|
|
const comparison = bothNumeric
|
|
? numericLeft - numericRight
|
|
: leftValue.localeCompare(rightValue, undefined, {
|
|
numeric: true,
|
|
sensitivity: "base",
|
|
});
|
|
return comparison * direction;
|
|
}
|
|
|
|
function refreshList(list) {
|
|
const body = list.querySelector("[data-data-list-body]");
|
|
const table = list.querySelector("[data-data-list-table]");
|
|
const empty = list.querySelector("[data-data-list-empty]");
|
|
const hasRows = body && body.children.length > 0;
|
|
table.hidden = !hasRows;
|
|
empty.hidden = hasRows;
|
|
}
|
|
|
|
function initializeList(list) {
|
|
refreshList(list);
|
|
|
|
list.addEventListener("click", function (event) {
|
|
const sortButton = event.target.closest("[data-sort-key]");
|
|
if (sortButton) {
|
|
const body = list.querySelector("[data-data-list-body]");
|
|
const key = sortButton.dataset.sortKey;
|
|
const ascending = sortButton.dataset.sortDirection !== "asc";
|
|
const rows = Array.from(body.children);
|
|
rows.sort(function (left, right) {
|
|
return compareRows(left, right, key, ascending ? 1 : -1);
|
|
});
|
|
rows.forEach(function (row) {
|
|
body.appendChild(row);
|
|
});
|
|
list.querySelectorAll("[data-sort-key]").forEach(function (button) {
|
|
button.removeAttribute("data-sort-direction");
|
|
button.closest("th").setAttribute("aria-sort", "none");
|
|
});
|
|
sortButton.dataset.sortDirection = ascending ? "asc" : "desc";
|
|
sortButton.closest("th").setAttribute(
|
|
"aria-sort",
|
|
ascending ? "ascending" : "descending"
|
|
);
|
|
}
|
|
|
|
const confirmButton = event.target.closest("[data-confirm]");
|
|
if (confirmButton && !window.confirm(confirmButton.dataset.confirm)) {
|
|
event.preventDefault();
|
|
event.stopImmediatePropagation();
|
|
}
|
|
}, true);
|
|
|
|
new MutationObserver(function () {
|
|
refreshList(list);
|
|
}).observe(list.querySelector("[data-data-list-body]"), { childList: true });
|
|
}
|
|
|
|
document.querySelectorAll("[data-data-list]").forEach(initializeList);
|
|
}());
|