| 1 |
(function () { |
| 2 |
function apply(tableRoot) { |
| 3 |
if (!tableRoot) return; |
| 4 |
var container = |
| 5 |
tableRoot.querySelector(".aibui-table-container") || tableRoot; |
| 6 |
var searchable = (container.getAttribute("data-searchable") || "0") === "1"; |
| 7 |
var sortable = (container.getAttribute("data-sortable") || "0") === "1"; |
| 8 |
var pageSize = |
| 9 |
parseInt(container.getAttribute("data-page-size") || "5", 10) || 5; |
| 10 |
|
| 11 |
var input = container.querySelector(".aibui-input"); |
| 12 |
var table = container.querySelector("table"); |
| 13 |
if (!table) return; |
| 14 |
var tbody = table.querySelector("tbody"); |
| 15 |
var headers = [].slice.call(table.querySelectorAll("thead th")); |
| 16 |
var rowEls = [].slice.call(tbody.querySelectorAll("tr")); |
| 17 |
|
| 18 |
var state = { q: "", sortIndex: -1, sortDir: 1, page: 1 }; |
| 19 |
|
| 20 |
function getRowValues(tr) { |
| 21 |
return [].slice.call(tr.children).map(function (td) { |
| 22 |
return (td.textContent || "").toLowerCase(); |
| 23 |
}); |
| 24 |
} |
| 25 |
var original = rowEls.map(function (tr) { |
| 26 |
return { el: tr, vals: getRowValues(tr) }; |
| 27 |
}); |
| 28 |
|
| 29 |
function render() { |
| 30 |
var filtered = original.filter(function (r) { |
| 31 |
if (!state.q) return true; |
| 32 |
return r.vals.some(function (v) { |
| 33 |
return v.indexOf(state.q) >= 0; |
| 34 |
}); |
| 35 |
}); |
| 36 |
if (sortable && state.sortIndex >= 0) { |
| 37 |
filtered.sort(function (a, b) { |
| 38 |
var av = a.vals[state.sortIndex] || ""; |
| 39 |
var bv = b.vals[state.sortIndex] || ""; |
| 40 |
if (av < bv) return -1 * state.sortDir; |
| 41 |
if (av > bv) return 1 * state.sortDir; |
| 42 |
return 0; |
| 43 |
}); |
| 44 |
} |
| 45 |
var total = filtered.length; |
| 46 |
var pages = Math.max(1, Math.ceil(total / pageSize)); |
| 47 |
if (state.page > pages) state.page = pages; |
| 48 |
var start = (state.page - 1) * pageSize, |
| 49 |
end = start + pageSize; |
| 50 |
// hide all rows first |
| 51 |
original.forEach(function (r) { |
| 52 |
r.el.style.display = "none"; |
| 53 |
}); |
| 54 |
// append visible rows in the correct order so sorting is reflected |
| 55 |
var pageRows = filtered.slice(start, end); |
| 56 |
var frag = document.createDocumentFragment(); |
| 57 |
pageRows.forEach(function (r) { |
| 58 |
r.el.style.display = ""; |
| 59 |
frag.appendChild(r.el); |
| 60 |
}); |
| 61 |
tbody.appendChild(frag); |
| 62 |
var ind = container.querySelector(".aibui-page-indicator"); |
| 63 |
if (ind) ind.textContent = state.page + " / " + pages; |
| 64 |
var prev = container.querySelector( |
| 65 |
".aibui-table-pagination .aibui-btn:first-child" |
| 66 |
); |
| 67 |
var next = container.querySelector( |
| 68 |
".aibui-table-pagination .aibui-btn:last-child" |
| 69 |
); |
| 70 |
if (prev) prev.disabled = state.page <= 1; |
| 71 |
if (next) next.disabled = state.page >= pages; |
| 72 |
} |
| 73 |
|
| 74 |
if (searchable && input) { |
| 75 |
input.addEventListener("input", function () { |
| 76 |
state.q = (input.value || "").toLowerCase(); |
| 77 |
state.page = 1; |
| 78 |
render(); |
| 79 |
}); |
| 80 |
} |
| 81 |
if (sortable) { |
| 82 |
headers.forEach(function (th, idx) { |
| 83 |
var btn = th.querySelector(".aibui-th-btn"); |
| 84 |
if (!btn) return; |
| 85 |
btn.addEventListener("click", function () { |
| 86 |
if (state.sortIndex === idx) { |
| 87 |
state.sortDir *= -1; |
| 88 |
} else { |
| 89 |
state.sortIndex = idx; |
| 90 |
state.sortDir = 1; |
| 91 |
} |
| 92 |
state.page = 1; |
| 93 |
// update header sort indicators |
| 94 |
headers.forEach(function (h) { |
| 95 |
h.removeAttribute("data-sort"); |
| 96 |
}); |
| 97 |
th.setAttribute("data-sort", state.sortDir === 1 ? "asc" : "desc"); |
| 98 |
render(); |
| 99 |
}); |
| 100 |
}); |
| 101 |
} |
| 102 |
var prev = container.querySelector( |
| 103 |
".aibui-table-pagination .aibui-btn:first-child" |
| 104 |
); |
| 105 |
var next = container.querySelector( |
| 106 |
".aibui-table-pagination .aibui-btn:last-child" |
| 107 |
); |
| 108 |
if (prev) |
| 109 |
prev.addEventListener("click", function () { |
| 110 |
if (state.page > 1) { |
| 111 |
state.page--; |
| 112 |
render(); |
| 113 |
} |
| 114 |
}); |
| 115 |
if (next) |
| 116 |
next.addEventListener("click", function () { |
| 117 |
state.page++; |
| 118 |
render(); |
| 119 |
}); |
| 120 |
|
| 121 |
render(); |
| 122 |
} |
| 123 |
|
| 124 |
function boot() { |
| 125 |
var blocks = document.querySelectorAll( |
| 126 |
".wp-block-ai-builder-aibui-table, .aibui-table" |
| 127 |
); |
| 128 |
for (var i = 0; i < blocks.length; i++) apply(blocks[i]); |
| 129 |
} |
| 130 |
if (document.readyState === "loading") |
| 131 |
document.addEventListener("DOMContentLoaded", boot); |
| 132 |
else boot(); |
| 133 |
})(); |
| 134 |
|
