Attachment 145731 Details for Bug 32721 – Bug 32721: Add branch specific userjs and usercss

[patch] Bug 32721: Add branch specific userjs and usercss

Bug-32721-Add-branch-specific-userjs-and-usercss.patch (text/plain), 10.88 KB, created by Matt Blenkinsop on 2023-01-27 12:54:34 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Matt Blenkinsop

Created: 2023-01-27 12:54:34 UTC

Size: 10.88 KB

patch

obsolete

>From d8c2676f3022c441bf54647243ce3cf836dd58d5 Mon Sep 17 00:00:00 2001
>From: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
>Date: Fri, 27 Jan 2023 12:34:39 +0000
>Subject: [PATCH] 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
>---
> Koha/Template/Plugin/Branches.pm              | 22 +++++
> admin/branches.pl                             |  2 +
> .../prog/en/modules/admin/branches.tt         | 87 ++++++++++++++++---
> .../bootstrap/en/includes/doc-head-close.inc  |  5 ++
> .../bootstrap/en/includes/opac-bottom.inc     |  6 ++
> 5 files changed, 111 insertions(+), 11 deletions(-)
>
>diff --git a/Koha/Template/Plugin/Branches.pm b/Koha/Template/Plugin/Branches.pm
>index 981c5b413da..e439a500966 100644
>--- a/Koha/Template/Plugin/Branches.pm
>+++ b/Koha/Template/Plugin/Branches.pm
>@@ -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;
>diff --git a/admin/branches.pl b/admin/branches.pl
>index 112ca421d35..2ee0a71760c 100755
>--- a/admin/branches.pl
>+++ b/admin/branches.pl
>@@ -81,6 +81,8 @@ if ( $op eq 'add_form' ) {
>       marcorgcode
>       pickup_location
>       public
>+      userjs
>+      usercss
>     );
>     my $is_a_modif = $input->param('is_a_modif');
> 
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt
>index 881e3d92c92..33880c39330 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt
>+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt
>@@ -17,6 +17,8 @@
> Libraries &rsaquo; Administration &rsaquo; Koha
> </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">
>@@ -288,6 +290,23 @@ Libraries &rsaquo; Administration &rsaquo; Koha
>                     </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">
>@@ -488,7 +507,30 @@ Libraries &rsaquo; Administration &rsaquo; Koha
>     [% 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");
>@@ -687,17 +729,40 @@ Libraries &rsaquo; Administration &rsaquo; Koha
>             [% 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 %]
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc
>index 05b5a393fd7..a1b7ba5eda1 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc
>@@ -48,6 +48,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 %]
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
>index 4fab59077de..4e8adf5f553 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
>@@ -1,5 +1,6 @@
> [% USE raw %]
> [% USE Koha %]
>+[% USE Branches %]
> [% USE AdditionalContents %]
> [%- USE KohaPlugins -%]
> [% USE Asset %]
>@@ -294,6 +295,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 ) %]
>-- 
>2.37.1 (Apple Git-137.1)

Actions: View | Diff | Splinter Review

Attachments on bug 32721: 145731 | 145732 | 145733 | 145734 | 145735 | 145754 | 145759 | 146159 | 146160 | 146161 | 146162 | 146163 | 146164 | 147373 | 149860 | 149861 | 149862 | 149863 | 149864 | 149865 | 149866 | 150713 | 150724 | 150725 | 150726 | 150727 | 150728 | 150729 | 150730 | 150731 | 150732 | 150754 | 150755 | 150756 | 150757 | 150758 | 156157 | 156158 | 156159 | 156160 | 156161 | 156162 | 156163 | 156164 | 157335