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

Remove row selection controls from case and question table views for cleaner UI

Browse Source
This commit is contained in:
Ross
2025-11-01 21:31:13 +00:00
parent 09d9befceb
commit 0e7307de18
4 changed files with 57 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/base.html
+56 -17
View File
@@ -316,24 +316,24 @@ document.addEventListener('DOMContentLoaded', function() {
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;
}
}
ancestor = ancestor.parentElement;
}
//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;
// }
// }
// ancestor = ancestor.parentElement;
//}
// 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"]')); });
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;
}
@@ -342,6 +342,45 @@ document.addEventListener('DOMContentLoaded', function() {
return token ? idBase + '-' + token : idBase;
}
// Ensure every selectable table has a row-selection control block. If the
// page author didn't render the controls, create them automatically and
// insert them before the table so the behavior is available out-of-the-box.
function ensureControlsForTable(table) {
if (!table) return;
// detect an existing nearby toggle button
var existing = table.previousElementSibling && table.previousElementSibling.querySelector && table.previousElementSibling.querySelector('[id^="toggle-row-selection"]');
if (existing) return; // already present
// generate a short token for unique IDs
var token = (Date.now().toString(16) + Math.floor(Math.random()*0xffff).toString(16));
var wrapper = document.createElement('div');
wrapper.className = 'row-selection-controls-wrapper';
wrapper.innerHTML = '<div class="d-flex justify-content-between align-items-center mb-2">'
+ ' <div>'
+ ' <button class="btn btn-outline-secondary btn-sm" id="toggle-row-selection-' + token + '" type="button">Enable row selection</button>'
+ ' <div id="selection-controls-' + token + '" class="btn-group ms-2" role="group" style="display:none;">'
+ ' <button class="btn btn-sm btn-outline-primary" id="select-all-' + token + '">Select all</button>'
+ ' <button class="btn btn-sm btn-outline-secondary" id="clear-selection-' + token + '">Clear</button>'
+ ' </div>'
+ ' </div>'
+ ' <div>'
+ ' <small class="text-muted">Selected: <span id="selected-count-' + token + '">0</span></small>'
+ ' </div>'
+ '</div>';
// Insert the controls immediately before the table (or its responsive wrapper)
var container = table.closest('.table-responsive') || table;
container.parentNode.insertBefore(wrapper, container);
}
// Create controls for any table that looks selectable but lacks a control block
Array.from(document.querySelectorAll('table')).forEach(function(t){
if (t.querySelector && (t.querySelector('input[name="selection"]') || t.querySelector('input[type="checkbox"]'))) {
ensureControlsForTable(t);
}
});
// 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)