ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement row selection controls in templates and refactor related JavaScript functionality

Browse Source
This commit is contained in:
Ross
2025-11-01 21:20:10 +00:00
parent 62c26d199e
commit 09d9befceb
5 changed files with 150 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/base.html
+117 -100
View File
@@ -312,113 +312,130 @@
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggleBtn = document.getElementById('toggle-row-selection');
const selectionControls = document.getElementById('selection-controls');
const selectAllBtn = document.getElementById('select-all');
const clearBtn = document.getElementById('clear-selection');
const selectedCountSpan = document.getElementById('selected-count');
const table = document.querySelector('.table-responsive table');
let selectionEnabled = false;
function findRowCheckboxes() {
if (!table) return [];
return Array.from(table.querySelectorAll('input[type="checkbox"]'));
}
function updateSelectedCount() {
const checks = findRowCheckboxes();
const count = checks.filter(c => c.checked).length;
selectedCountSpan.textContent = count;
// update row highlight based on checkbox state
checks.forEach(cb => {
const tr = cb.closest('tr');
if (tr) tr.classList.toggle('table-active', cb.checked);
});
}
function setCheckboxesDisabled(disabled) {
findRowCheckboxes().forEach(cb => {
cb.disabled = disabled;
});
}
function hideSelectionColumn() {
if (!table) return;
// hide any th/td that contains the selection checkbox
table.querySelectorAll('th, td').forEach(function(cell) {
if (cell.querySelector && cell.querySelector('input[type="checkbox"]')) {
cell.style.display = 'none';
// Wire up all row-selection control blocks to the nearest .js-row-selectable table.
function findTableForControl(elem) {
// Walk up ancestors and look for a table that either has the
// `js-row-selectable` class or contains a checkbox named 'selection'.
var ancestor = elem.closest('div, section, main, article, form, body');
while (ancestor) {
// Prefer explicit selectable class
var tbl = ancestor.querySelector && ancestor.querySelector('table.js-row-selectable');
if (tbl) return tbl;
// Otherwise look for any table in this ancestor that contains a
// checkbox input named 'selection' (or any checkbox as a fallback).
var tables = ancestor.querySelectorAll && ancestor.querySelectorAll('table');
if (tables && tables.length) {
for (var i = 0; i < tables.length; i++) {
var t = tables[i];
if (t.querySelector && (t.querySelector('input[name="selection"]') || t.querySelector('input[type="checkbox"]'))) return t;
}
}
});
}
function showSelectionColumn() {
if (!table) return;
table.querySelectorAll('th, td').forEach(function(cell) {
if (cell.querySelector && cell.querySelector('input[type="checkbox"]')) {
cell.style.display = '';
}
});
}
// disable checkboxes by default and hide the selection column
setCheckboxesDisabled(true);
hideSelectionColumn();
// row click toggling
document.addEventListener('click', function(e) {
if (!selectionEnabled) return;
// ignore clicks on inputs, anchors, buttons
const tag = e.target.tagName.toLowerCase();
if (['input','a','button','select','textarea','label'].includes(tag)) return;
const tr = e.target.closest('tr');
if (!tr || !table || !table.contains(tr)) return;
const cb = tr.querySelector('input[type="checkbox"]');
if (cb && !cb.disabled) {
cb.checked = !cb.checked;
// reflect highlight immediately
tr.classList.toggle('table-active', cb.checked);
updateSelectedCount();
ancestor = ancestor.parentElement;
}
});
if (toggleBtn) {
toggleBtn.addEventListener('click', function() {
selectionEnabled = !selectionEnabled;
if (selectionEnabled) {
toggleBtn.textContent = 'Disable row selection';
selectionControls.style.display = '';
setCheckboxesDisabled(false);
showSelectionColumn();
} else {
toggleBtn.textContent = 'Enable row selection';
selectionControls.style.display = 'none';
setCheckboxesDisabled(true);
hideSelectionColumn();
// clear any selected checkboxes
findRowCheckboxes().forEach(cb => cb.checked = false);
updateSelectedCount();
}
});
// fallback to any table on the page that looks like it has selection
var any = document.querySelector('table.js-row-selectable') || Array.from(document.querySelectorAll('table')).find(function(t){ return t.querySelector && (t.querySelector('input[name="selection"]') || t.querySelector('input[type="checkbox"]')); });
return any || null;
}
if (selectAllBtn) {
selectAllBtn.addEventListener('click', function() {
findRowCheckboxes().forEach(cb => { if (!cb.disabled) cb.checked = true; });
updateSelectedCount();
});
// Helper to build id with optional token
function suffixed(idBase, token) {
return token ? idBase + '-' + token : idBase;
}
if (clearBtn) {
clearBtn.addEventListener('click', function() {
findRowCheckboxes().forEach(cb => { if (!cb.disabled) cb.checked = false; });
updateSelectedCount();
});
}
// For every toggle button (supports both unsuffixed and suffixed IDs)
document.querySelectorAll('button[id^="toggle-row-selection"]').forEach(function(toggleBtn) {
// derive token (empty for unsuffixed)
var token = '';
if (toggleBtn.id !== 'toggle-row-selection') token = toggleBtn.id.replace('toggle-row-selection-', '');
// Keep count updated if checkboxes are toggled directly
document.addEventListener('change', function(e) {
if (e.target && e.target.matches('input[type="checkbox"]')) updateSelectedCount();
var controlsEl = document.getElementById(suffixed('selection-controls', token));
var selectAllBtn = document.getElementById(suffixed('select-all', token));
var clearBtn = document.getElementById(suffixed('clear-selection', token));
var selectedCountSpan = document.getElementById(suffixed('selected-count', token));
var table = findTableForControl(toggleBtn);
if (!table) return; // nothing to do
var selectionEnabled = false;
function findRowCheckboxes() {
if (!table) return [];
// prefer named selection inputs but fall back to any checkbox
var checks = Array.from(table.querySelectorAll('input[type="checkbox"][name="selection"]'));
if (!checks.length) checks = Array.from(table.querySelectorAll('input[type="checkbox"]'));
return checks;
}
function updateSelectedCount() {
if (!selectedCountSpan) return;
var checks = findRowCheckboxes();
var count = checks.filter(function(c){ return c.checked; }).length;
selectedCountSpan.textContent = count;
checks.forEach(function(cb){ var tr = cb.closest('tr'); if (tr) tr.classList.toggle('table-active', cb.checked); });
}
function setCheckboxesDisabled(disabled) {
findRowCheckboxes().forEach(function(cb){ cb.disabled = disabled; });
}
function hideSelectionColumn() {
if (!table) return;
table.querySelectorAll('th, td').forEach(function(cell){ if (cell.querySelector && cell.querySelector('input[type="checkbox"][name="selection"]')) cell.style.display = 'none'; });
}
function showSelectionColumn() {
if (!table) return;
table.querySelectorAll('th, td').forEach(function(cell){ if (cell.querySelector && cell.querySelector('input[type="checkbox"][name="selection"]')) cell.style.display = ''; });
}
// initialise state
setCheckboxesDisabled(true);
hideSelectionColumn();
// row click toggling (attach to table to avoid global handlers)
table.addEventListener('click', function(e){
if (!selectionEnabled) return;
var tag = (e.target.tagName || '').toLowerCase();
if (['input','a','button','select','textarea','label'].indexOf(tag) !== -1) return;
var tr = e.target.closest('tr');
if (!tr || !table.contains(tr)) return;
var cb = tr.querySelector('input[type="checkbox"][name="selection"]') || tr.querySelector('input[type="checkbox"]');
if (cb && !cb.disabled) { cb.checked = !cb.checked; tr.classList.toggle('table-active', cb.checked); updateSelectedCount(); }
}, true);
// listen for changes within the table to keep counts in sync
table.addEventListener('change', function(e){ if (e.target && e.target.matches && e.target.matches('input[type="checkbox"]')) updateSelectedCount(); }, true);
// wire controls
if (toggleBtn) {
toggleBtn.addEventListener('click', function() {
selectionEnabled = !selectionEnabled;
if (selectionEnabled) {
toggleBtn.textContent = 'Disable row selection';
if (controlsEl) controlsEl.style.display = '';
setCheckboxesDisabled(false);
showSelectionColumn();
} else {
toggleBtn.textContent = 'Enable row selection';
if (controlsEl) controlsEl.style.display = 'none';
setCheckboxesDisabled(true);
hideSelectionColumn();
findRowCheckboxes().forEach(function(cb){ cb.checked = false; });
updateSelectedCount();
}
});
}
if (selectAllBtn) {
selectAllBtn.addEventListener('click', function(){ findRowCheckboxes().forEach(function(cb){ if (!cb.disabled) cb.checked = true; }); updateSelectedCount(); });
}
if (clearBtn) {
clearBtn.addEventListener('click', function(){ findRowCheckboxes().forEach(function(cb){ if (!cb.disabled) cb.checked = false; }); updateSelectedCount(); });
}
// initial count
updateSelectedCount();
});
});
</script>