Bug 39698: Add option to expand responsive datatable

This patch adds the 'OPACTableColExpandedByDefault' system preference,
disabled by default, which controls whether responsive datatable rows
are expanded or not. This work has been performed after recommendations
from a recent accessibility audit.

TO TEST:
a)  set 'OpacLocationBranchToDisplay' to both
b)  search the OPAC for history, select first result
c)  zoom your browser in to maxiumum, scroll down to holdings table
    -   notice how the rows are collapsed by default, with '+' visible
**apply patch**
e)  refresh details page, notice how the behaviour is currently unchanged
f)  change new 'OPACTableColExpandedByDefault' syspref to 'Expand'
g)  return to OPAC details page, refresh, zoom in
    -  notice how the rows are now expanded by default, with '-' visible
**sign off**

Sponsored-by: British Museum
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@openfifth.co.uk>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
This commit is contained in:
Jake Deery 2025-04-22 09:45:35 +01:00 committed by Lucas Gass
parent 73c320e751
commit 5b59301de2
No known key found for this signature in database
GPG Key ID: 60B447398B0D36CA
17 changed files with 183 additions and 13 deletions

View File

@ -0,0 +1,19 @@
use Modern::Perl;
return {
bug_number => "39698",
description => "Add system preferences for responsive OPAC tables",
up => sub {
my ($args) = @_;
my ( $dbh, $out ) = @$args{qw(dbh out)};
$dbh->do(
q{
INSERT IGNORE INTO systempreferences (variable,value,options,explanation,type)
VALUES ('OPACTableColExpandedByDefault', '0', NULL, 'Determines whether or not table rows are expanded by default on mobile', 'YesNo');
}
);
say $out "Added OPACTableColExpandedByDefault syspref";
}
};

View File

@ -590,6 +590,7 @@ INSERT INTO systempreferences ( `variable`, `value`, `options`, `explanation`, `
('OpacSuppression','0',NULL,'Turn ON the OPAC Suppression feature, requires further setup, ask your system administrator for details','YesNo'),
('OpacSuppressionByIPRange','',NULL,'Restrict the suppression to IP adresses outside of the IP range','Free'),
('OpacSuppressionRedirect','1',NULL,'Redirect the opac detail page for suppressed records to an explanatory page (otherwise redirect to 404 error page)','YesNo'),
('OPACTableColExpandedByDefault','0',NULL,'Determines whether or not table rows are expanded by default on mobile','YesNo'),
('opacthemes','bootstrap',NULL,'Define the current theme for the OPAC interface.','Themes'),
('OpacTopissue','0',NULL,'If ON, enables the \'most popular items\' link on OPAC. Warning, this is an EXPERIMENTAL feature, turning ON may overload your server','YesNo'),
('OpacTrustedCheckout', '0', NULL, 'Allow logged in OPAC users to check out to themselves', 'YesNo'),

View File

@ -18,6 +18,12 @@ OPAC:
- pref: opacthemes
choices: opac-templates
- theme on the OPAC.
-
- pref: OPACTableColExpandedByDefault
choices:
1: Expand
0: Don't expand
- tables on the OPAC by default, when zoomed in or viewed on a mobile screen.
-
- Use the
- pref: OPACFallback

View File

@ -96,6 +96,12 @@
return false;
}
[% IF ( Koha.Preference('OPACTableColExpandedByDefault') ) %]
var responsive_display = DataTable.Responsive.display.childRowImmediate;
[% ELSE %]
var responsive_display = DataTable.Responsive.display.childRow;
[% END %]
var Tables = $("#clubs-table-enrolled,#clubs-table-unenrolled");
Tables.each(function(){
$(this).kohaTable({
@ -103,7 +109,11 @@
paging: false,
info: false,
responsive: {
details: { type: "column", target: -1 },
details: {
display: responsive_display,
type: "column",
target: -1
},
},
columnDefs: [
{ className: "dtr-control", orderable: false, targets: -1 },

View File

@ -121,12 +121,22 @@
[% INCLUDE 'datatables.inc' %]
<script type="text/JavaScript">
$(document).ready(function () {
[% IF ( Koha.Preference('OPACTableColExpandedByDefault') ) %]
var responsive_display = DataTable.Responsive.display.childRowImmediate;
[% ELSE %]
var responsive_display = DataTable.Responsive.display.childRow;
[% END %]
$(".table").kohaTable({
searching: false,
paging: false,
info: false,
responsive: {
details: { type: "column", target: -1 },
details: {
display: responsive_display,
type: "column",
target: -1
},
},
columnDefs: [{ className: "dtr-control", orderable: false, targets: -1 }],
});

View File

@ -141,6 +141,13 @@
<script>
$(document).ready(function() {
table_settings = [% TablesSettings.GetTableSettings( 'opac', 'course_items', 'course-items-table', 'json' ) | $raw %];
[% IF ( Koha.Preference('OPACTableColExpandedByDefault') ) %]
var responsive_display = DataTable.Responsive.display.childRowImmediate;
[% ELSE %]
var responsive_display = DataTable.Responsive.display.childRow;
[% END %]
$("#course-items-table").kohaTable(
{
dom: '<"top"<"table_controls"f>>rt<"clear">',
@ -150,7 +157,11 @@
searchPlaceholder: _("Search course reserves"),
},
responsive: {
details: { type: "column", target: -1 },
details: {
display: responsive_display,
type: "column",
target: -1
},
},
columnDefs: [
{ className: "dtr-control", orderable: false, targets: -1 },

View File

@ -86,6 +86,13 @@
<script>
$(document).ready(function() {
table_settings = [% TablesSettings.GetTableSettings( 'opac', 'course_list', 'course_reserves_table', 'json' ) | $raw %]
[% IF ( Koha.Preference('OPACTableColExpandedByDefault') ) %]
var responsive_display = DataTable.Responsive.display.childRowImmediate;
[% ELSE %]
var responsive_display = DataTable.Responsive.display.childRow;
[% END %]
$("#course_reserves_table").kohaTable(
{
dom: '<"top"<"table_controls"f>>rt<"clear">',
@ -96,7 +103,11 @@
searchPlaceholder: _("Search courses"),
},
responsive: {
details: { type: "column", target: -1 },
details: {
display: responsive_display,
type: "column",
target: -1
},
},
cColumnDefs: [
{ className: "dtr-control", orderable: false, targets: -1 },

View File

@ -331,13 +331,23 @@
existingPickupMoments[pickup.branchcode].push(pickupMoment);
});
[% IF ( Koha.Preference('OPACTableColExpandedByDefault') ) %]
var responsive_display = DataTable.Responsive.display.childRowImmediate;
[% ELSE %]
var responsive_display = DataTable.Responsive.display.childRow;
[% END %]
$(document).ready(function() {
$("#pickups-table").kohaTable({
searching: false,
paging: false,
info: false,
responsive: {
details: { type: "column", target: -1 },
details: {
display: responsive_display,
type: "column",
target: -1
},
},
columnDefs: [{ className: "dtr-control", orderable: false, targets: -1 }],
});

View File

@ -1946,12 +1946,22 @@
column.cannot_be_toggled = 1;
[% END %]
[% IF ( Koha.Preference('OPACTableColExpandedByDefault') ) %]
var responsive_display = DataTable.Responsive.display.childRowImmediate;
[% ELSE %]
var responsive_display = DataTable.Responsive.display.childRow;
[% END %]
$("#holdingst").kohaTable(
{
dom: '<"clearfix">t',
bKohaColumnsUseNames: true,
responsive: {
details: { type: "column", target: -1 },
details: {
display: responsive_display,
type: "column",
target: -1
},
},
},
holdingst_table_settings,
@ -1961,7 +1971,11 @@
dom: '<"clearfix">t',
bKohaColumnsUseNames: true,
responsive: {
details: { type: "column", target: -1 },
details: {
display: responsive_display,
type: "column",
target: -1
},
},
},
otherholdingst_table_settings,
@ -1975,7 +1989,11 @@
order: [[1, "desc"]],
bKohaColumnsUseNames: true,
responsive: {
details: { type: "column", target: -1 },
details: {
display: responsive_display,
type: "column",
target: -1
},
},
},
serial_table_settings

View File

@ -415,12 +415,23 @@
}, 100);
});
}
[% IF ( Koha.Preference('OPACTableColExpandedByDefault') ) %]
var responsive_display = DataTable.Responsive.display.childRowImmediate;
[% ELSE %]
var responsive_display = DataTable.Responsive.display.childRow;
[% END %]
$(".table").kohaTable({
searching: false,
paging: false,
info: false,
responsive: {
details: { type: "column", target: -1 },
details: {
display: responsive_display,
type: "column",
target: -1
},
},
columnDefs: [{ className: "dtr-control", orderable: false, targets: -1 }],
});

View File

@ -235,6 +235,12 @@
$('#sortform').submit();
});
[% IF ( Koha.Preference('OPACTableColExpandedByDefault') ) %]
var responsive_display = DataTable.Responsive.display.childRowImmediate;
[% ELSE %]
var responsive_display = DataTable.Responsive.display.childRow;
[% END %]
var table = $("#readingrec").kohaTable(
{
dom: '<"top"<"table_entries"i><"table_controls"fB>>t',
@ -243,7 +249,11 @@
searchPlaceholder: _("Search"),
},
responsive: {
details: { type: "column", target: -1 },
details: {
display: responsive_display,
type: "column",
target: -1
},
},
columnDefs: [
{ className: "dtr-control", orderable: false, targets: [-1] },

View File

@ -142,9 +142,20 @@
$(".cancel_recall").click(function () {
return confirmDelete(_("Are you sure you want to remove this recall?"));
});
[% IF ( Koha.Preference('OPACTableColExpandedByDefault') ) %]
var responsive_display = DataTable.Responsive.display.childRowImmediate;
[% ELSE %]
var responsive_display = DataTable.Responsive.display.childRow;
[% END %]
$("#recalls-table").kohaTable({
responsive: {
details: { type: "column", target: -1 },
details: {
display: responsive_display,
type: "column",
target: -1
},
},
columnDefs: [{ className: "dtr-control", orderable: false, targets: -1 }],
});

View File

@ -309,6 +309,13 @@
$(document).ready(function () {
// We show table ordered by descending dates by default
// (so that the more recent query is shown first)
[% IF ( Koha.Preference('OPACTableColExpandedByDefault') ) %]
var responsive_display = DataTable.Responsive.display.childRowImmediate;
[% ELSE %]
var responsive_display = DataTable.Responsive.display.childRow;
[% END %]
let history_tables = $(".historyt").kohaTable({
order: [[1, "desc"]],
dom: '<"top"<"table_entries"><"table_controls"fB>>t',
@ -318,7 +325,11 @@
searchPlaceholder: _("Search"),
},
responsive: {
details: { type: "column", target: -1 },
details: {
display: responsive_display,
type: "column",
target: -1
},
},
});

View File

@ -302,6 +302,12 @@
}
});
[% IF ( Koha.Preference('OPACTableColExpandedByDefault') ) %]
var responsive_display = DataTable.Responsive.display.childRowImmediate;
[% ELSE %]
var responsive_display = DataTable.Responsive.display.childRow;
[% END %]
$("#mytagst").kohaTable({
order: [[2, "asc"]],
columnDefs: [
@ -310,6 +316,7 @@
],
responsive: {
details: {
display: responsive_display,
type: "column",
target: -1,
},

View File

@ -154,11 +154,18 @@
[% INCLUDE 'datatables.inc' %]
<script>
$(function () {
[% IF ( Koha.Preference('OPACTableColExpandedByDefault') ) %]
var responsive_display = DataTable.Responsive.display.childRowImmediate;
[% ELSE %]
var responsive_display = DataTable.Responsive.display.childRow;
[% END %]
$("#topissuest").kohaTable({
order: [[3, "desc"]],
columnDefs: [{ className: "dtr-control", orderable: false, targets: -1 }],
responsive: {
details: {
display: responsive_display,
type: "column",
target: -1,
},

View File

@ -1226,6 +1226,12 @@
});
});
[% IF ( Koha.Preference('OPACTableColExpandedByDefault') ) %]
var responsive_display = DataTable.Responsive.display.childRowImmediate;
[% ELSE %]
var responsive_display = DataTable.Responsive.display.childRow;
[% END %]
var dataTables = $("#recalls-table,#article-requests-table");
dataTables.each(function(){
$(this).kohaTable({
@ -1233,7 +1239,11 @@
paging: false,
info: false,
responsive: {
details: { type: "column", target: -1 },
details: {
display: responsive_display,
type: "column",
target: -1
},
},
columnDefs: [{ className: "dtr-control", orderable: false, targets: -1 }],
});

View File

@ -476,6 +476,12 @@
dofocus();
[% IF ( patronid ) %]sco_init();[% END %]
[% IF ( Koha.Preference('OPACTableColExpandedByDefault') ) %]
var responsive_display = DataTable.Responsive.display.childRowImmediate;
[% ELSE %]
var responsive_display = DataTable.Responsive.display.childRow;
[% END %]
var dTables = $("#loanTable, #holdst, #finestable");
dTables.each(function(){
var thIndex = $(this).find("th.psort").index();
@ -493,6 +499,7 @@
},
responsive: {
details: {
display: responsive_display,
type: "column",
target: -1,
},