Bug 32721: Add branch specific userjs and usercss

This patch allows for branch specific userJS and userCSS to be added through the libraries table. This works in conjunction with the global UserJS and UserCSS functionality and allows for multiple OPACs with different css and js options.

Test plan:
1) Add to apache conf (/etc/apache2/sites-available/kohadev.conf)
    SetEnv OPAC_BRANCH_DEFAULT "FFL"
    RequestHeader add X-Koha-SetEnv "OPAC_BRANCH_DEFAULT FFL"
2) In the container, run restart_all
3) Navigate to the OPACUserJS and OPACUserCSS system preferences and add the following: OPACUserJS - console.log('Hello from global sysprefs');, OPACUserCSS - 'body { background-color: black; }'
4) Refresh the OPAC and the background should be black and the message should be logged to the console in developer tools
5) Navigate to Administration > Libraries
6) On the Fairfield branch (if this does not exist you will need to create a branch with a code matching the code that you added to the apache conf file), click edit
7) At the bottom there should be two fields to add userjs and usercss, complete with Codemirror syntax checking
8) In userjs add console.log('Hello from branch level'); and in usercss add 'body { background-color: blue; } then save
9) Return to the OPAC and refresh
10) If you are logged out of the OPAC it should now be logging both the message from global and from the branch level and the background should be blue (if not you will need to log out)
11) Log back into the OPAC using a user that DOES NOT have a default branch matching the branch you added to the Apache conf
12) The OPAC should now revert to only showing the global message in the console with a black background

Sponsored-by: PTFS Europe

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This commit is contained in:
Matt Blenkinsop 2023-01-27 12:34:39 +00:00 committed by Tomas Cohen Arazi
parent 7e23abcccb
commit 82e2547e1b
Signed by: tomascohen
GPG key ID: 0A272EA1B2F3C15F
5 changed files with 111 additions and 11 deletions

View file

@ -153,4 +153,26 @@ sub pickup_locations {
return \@libraries;
}
sub GetBranchSpecificJS {
my ($self, $branchcode) = @_;
return q{} unless defined $branchcode;
my $library = Koha::Libraries->find($branchcode);
my $userjs = $library ? $library->userjs : q{};
return $userjs
}
sub GetBranchSpecificCSS {
my ($self, $branchcode) = @_;
return q{} unless defined $branchcode;
my $library = Koha::Libraries->find($branchcode);
my $usercss = $library ? $library->usercss : q{};
return $usercss
}
1;

View file

@ -81,6 +81,8 @@ if ( $op eq 'add_form' ) {
marcorgcode
pickup_location
public
userjs
usercss
);
my $is_a_modif = $input->param('is_a_modif');

View file

@ -23,6 +23,8 @@
[% t("Koha") | html %]
[% END %]</title>
[% INCLUDE 'doc-head-close.inc' %]
[% Asset.css("lib/codemirror/codemirror.min.css") | $raw %]
[% Asset.css("lib/codemirror/lint.min.css") | $raw %]
</head>
<body id="admin_branches" class="admin">
@ -286,6 +288,23 @@
</select>
<div class="hint">Set to 'yes' to show this library as a search option and on the libraries page in the OPAC.</div>
</li>
<li>
<label for="UserJS">UserJS: </label>
<div style="display:flex; flex-direction:column;">
<a class="expand-textarea" id="expand_userjs" data-target="userjs" data-syntax="javascript" href="#">Click to edit</a>
<textarea style="display:none" name="userjs" id="userjs" class="codemirror" rows="10" cols="40">[% library.userjs %]</textarea>
<a class="collapse-textarea" id="collapse_userjs" data-target="userjs" data-syntax="javascript" style="display:none" href="#">Click to collapse</br></a>
</div>
</li>
<li>
<label for="UserCSS">UserCSS: </label>
<div style="display:flex; flex-direction:column;">
<a class="expand-textarea" id="expand_usercss" data-target="usercss" data-syntax="css" href="#">Click to edit</a>
<textarea style="display:none" name="usercss" id="usercss" class="" rows="10" cols="40">[% library.usercss %]</textarea>
<a class="collapse-textarea" id="collapse_usercss" data-target="usercss" data-syntax="css" style="display:none" href="#">Click to collapse</br></a>
</div>
</li>
</li>
</ol>
</fieldset>
<fieldset class="action">
@ -486,7 +505,30 @@
[% INCLUDE 'datatables.inc' %]
[% INCLUDE 'columns_settings.inc' %]
[% Asset.js("lib/tiny_mce/tinymce.min.js") | $raw %]
[% Asset.js( "lib/codemirror/codemirror.min.js" ) | $raw %]
[% Asset.js( "lib/codemirror/css.min.js" ) | $raw %]
[% Asset.js( "lib/codemirror/javascript.min.js" ) | $raw %]
[% Asset.js( "lib/codemirror/xml.min.js" ) | $raw %]
[% Asset.js( "lib/codemirror/yaml.min.js" ) | $raw %]
[% Asset.js( "lib/codemirror/lint.min.js" ) | $raw %]
[% Asset.js( "lib/linters/jshint.min.js" ) | $raw %]
[% Asset.js( "lib/linters/htmlhint.min.js" ) | $raw %]
[% Asset.js( "lib/linters/csslint.min.js" ) | $raw %]
[% Asset.js( "lib/linters/js-yaml.min.js" ) | $raw %]
[% Asset.js( "lib/codemirror/html-lint.min.js" ) | $raw %]
[% Asset.js( "lib/codemirror/javascript-lint.min.js" ) | $raw %]
[% Asset.js( "lib/codemirror/css-lint.min.js" ) | $raw %]
[% Asset.js( "lib/codemirror/yaml-lint.min.js" ) | $raw %]
[% Asset.css("lib/codemirror/codemirror.css") | $raw %]
[% INCLUDE 'str/tinymce_i18n.inc' %]
<style>
.CodeMirror {
border: 1px solid #EEE;
margin: 1em, 1em, 1em, 0;
resize: vertical;
width: 50em;
}
</style>
<script>
var table_settings = [% TablesSettings.GetTableSettings( 'admin', 'libraries', 'libraries', 'json' ) | $raw %];
var saved_table = localStorage.getItem("DataTables_libraries_/cgi-bin/koha/admin/branches.pl");
@ -685,17 +727,40 @@
[% END %]
});
tinyMCE.init({
branding : false,
relative_urls : false,
content_css : "[% interface | html %]/[% theme | html %]/css/tinymce.css",
menubar : "file edit view insert format tools table",
mode : "specific_textareas",
plugins : "autoresize table hr link image charmap lists code emoticons",
toolbar : [
"formatselect | bold italic | cut copy paste | alignleft aligncenter alignright | outdent indent | image link unlink anchor cleanup hr",
"table | bullist numlist | undo redo | removeformat | emoticons charmap | forecolor backcolor | code"
],
$( ".expand-textarea" ).on("click", function(e){
e.preventDefault();
$(this).hide();
var target = $(this).data("target");
var syntax = $(this).data("syntax");
$("#collapse_" + target ).show();
if( syntax ){
var editor = CodeMirror.fromTextArea( document.getElementById( target ), {
lineNumbers: true,
mode: syntax,
lineWrapping: true,
viewportMargin: Infinity,
gutters: ["CodeMirror-lint-markers"],
lint: true
});
editor.on("blur", function(){
editor.save();
});
} else {
$( target ).show();
}
});
$( ".collapse-textarea" ).on("click", function(e){
e.preventDefault();
$(this).hide();
var target = $(this).data("target");
var syntax = $(this).data("syntax");
$("#expand_" + target ).show();
if( syntax ){
var editor = $( "#" + target ).next(".CodeMirror")[0].CodeMirror;
editor.toTextArea();
}
$( "#" + target ).hide();
});
</script>
[% END %]

View file

@ -44,6 +44,11 @@
[% IF ( Koha.Preference('OPACUserCSS') ) %]
<style>[% Koha.Preference('OPACUserCSS') | $raw %]</style>
[% END %]
[% IF Branches.GetBranchSpecificCSS( Branches.GetLoggedInBranchcode() || default_branch) %]
<style>
[% Branches.GetBranchSpecificCSS( Branches.GetLoggedInBranchcode() || default_branch) | $raw %]
</style>
[% END %]
[% IF SCO_login %]
[% SET SCOUserCSS = Koha.Preference('SCOUserCSS') %]
[% IF SCOUserCSS %]

View file

@ -1,5 +1,6 @@
[% USE raw %]
[% USE Koha %]
[% USE Branches %]
[% USE AdditionalContents %]
[%- USE KohaPlugins -%]
[% USE Asset %]
@ -239,6 +240,11 @@ $(document).ready(function() {
[% Koha.Preference('OPACUserJS') | $raw %]
</script>
[% END %]
[% IF Branches.GetBranchSpecificJS( Branches.GetLoggedInBranchcode() || default_branch) %]
<script>
[% Branches.GetBranchSpecificJS( Branches.GetLoggedInBranchcode() || default_branch) | $raw %]
</script>
[% END %]
[% IF SCO_login %]
[% SET SCOUserJS = Koha.Preference('SCOUserJS') %]
[% IF ( SCOUserJS ) %]