78 lines
2.7 KiB
HTML
78 lines
2.7 KiB
HTML
{# ── Shared row-selection behaviour for bulk-action list pages ────────────────
|
|
Included by the issues and inspections list templates (classic + modern).
|
|
Generic on purpose — it keys off classes/attributes, not page-specific ids,
|
|
so both pages share one implementation:
|
|
|
|
.bulk-check one per row (name=issue_ids / inspection_ids)
|
|
.bulk-check-all the header select-all box
|
|
.bulk-count element whose text becomes the selected count
|
|
[data-bulk-action] submit buttons, disabled while nothing is selected
|
|
[data-bulk-confirm] optional confirm text, count substituted for {n}
|
|
|
|
Guarding the submit on a zero selection matters: the browser would happily
|
|
POST an empty id list, and the route would flash "No issues selected" after
|
|
a full page round trip.
|
|
#}
|
|
<script>
|
|
(function () {
|
|
'use strict';
|
|
|
|
var boxes = Array.prototype.slice.call(document.querySelectorAll('.bulk-check'));
|
|
var all = document.querySelector('.bulk-check-all');
|
|
var counts = Array.prototype.slice.call(document.querySelectorAll('.bulk-count'));
|
|
var btns = Array.prototype.slice.call(document.querySelectorAll('[data-bulk-action]'));
|
|
if (!boxes.length) return;
|
|
|
|
function selected() {
|
|
return boxes.filter(function (b) { return b.checked; });
|
|
}
|
|
|
|
function sync() {
|
|
var n = selected().length;
|
|
counts.forEach(function (el) { el.textContent = n; });
|
|
btns.forEach(function (b) { b.disabled = (n === 0); });
|
|
if (all) {
|
|
all.checked = (n > 0 && n === boxes.length);
|
|
// Distinguishes "some" from "none"/"all" in the header box.
|
|
all.indeterminate = (n > 0 && n < boxes.length);
|
|
}
|
|
}
|
|
|
|
boxes.forEach(function (b) { b.addEventListener('change', sync); });
|
|
|
|
if (all) {
|
|
all.addEventListener('change', function () {
|
|
boxes.forEach(function (b) { b.checked = all.checked; });
|
|
sync();
|
|
});
|
|
}
|
|
|
|
// Shift-click selects the range from the last clicked box — the usual
|
|
// convention, and the difference between ticking 3 boxes and 40.
|
|
var lastIndex = null;
|
|
boxes.forEach(function (b, i) {
|
|
b.addEventListener('click', function (e) {
|
|
if (e.shiftKey && lastIndex !== null) {
|
|
var lo = Math.min(lastIndex, i), hi = Math.max(lastIndex, i);
|
|
for (var j = lo; j <= hi; j++) { boxes[j].checked = b.checked; }
|
|
sync();
|
|
}
|
|
lastIndex = i;
|
|
});
|
|
});
|
|
|
|
btns.forEach(function (btn) {
|
|
btn.addEventListener('click', function (e) {
|
|
var n = selected().length;
|
|
if (n === 0) { e.preventDefault(); return; }
|
|
var msg = btn.getAttribute('data-bulk-confirm');
|
|
if (msg && !window.confirm(msg.replace('{n}', n) + '\n\n' + n + ' selected.')) {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
});
|
|
|
|
sync();
|
|
}());
|
|
</script>
|