Bug 11873: Upgrade jstree jQuery plugin to the latest version

This patch upgrades the jstree plugin in the OPAC and the staff
interface. The old version had compatibility issues with the latest
jQuery.

Also changed: When viewing an authority record in the OPAC's MARC view,
clicking one of the hierarchy links should now open the MARC view again
rather than reverting to the normal view.

To test, apply the patch and rebuild the staff interface and OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

To test you must have the AuthDisplayHierarchy system preference
enabled, and you must have some authorities data which can be displayed
as a hierarchy. From the test plan for Bug 8523:

"Create authority records with a hierarchy of see also fields (in
 MARC21/NORMARC, you'll be using 5xx fields for this, with a subfield
 $w = 'g' for broader terms and subfield $w = 'h' for narrower terms)"

- Perform an authority search in the OPAC which will return one of your
  modified authority records.
- View the record.
- There should be an expanded tree menu at the top of the authority
  information.
  - Clicking the arrows in the tree should correctly expand
    and collapse the nodes.
  - Clicking the authority record link in the node should load that
    record.
- Test also from the OPAC's MARC view of the authority record.
  - Confirm that clicking an authority record link in the MARC view
    opens the corresponding record in MARC view again.

- Perform the same tests in the staff interface.

Signed-off-by: Eugene Espinoza <eugenegf@yahoo.com>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>

koha-tmpl/intranet-tmpl/lib/jquery/plugins/themes/classic/style.css

@@ -1,77 +0,0 @@
-/*
- * jsTree classic theme 1.0
- * Supported features: dots/no-dots, icons/no-icons, focused, loading
- * Supported plugins: ui (hovered, clicked), checkbox, contextmenu, search
- */
-
-.jstree-classic li,
-.jstree-classic ins { background-image:url("d.png"); background-repeat:no-repeat; background-color:transparent; }
-.jstree-classic li { background-position:-90px 0; background-repeat:repeat-y;  }
-.jstree-classic li.jstree-last { background:transparent; }
-.jstree-classic .jstree-open > ins { background-position:-72px 0; }
-.jstree-classic .jstree-closed > ins { background-position:-54px 0; }
-.jstree-classic .jstree-leaf > ins { background-position:-36px 0; }
-
-.jstree-classic .jstree-hovered { background:#e7f4f9; border:1px solid #e7f4f9; padding:0 2px 0 1px; }
-.jstree-classic .jstree-clicked { background:navy; border:1px solid navy; padding:0 2px 0 1px; color:white; }
-.jstree-classic a .jstree-icon { background-position:-56px -19px; }
-.jstree-classic .jstree-open > a .jstree-icon { background-position:-56px -36px; }
-.jstree-classic a.jstree-loading .jstree-icon { background:url("throbber.gif") center center no-repeat !important; }
-
-.jstree-classic.jstree-focused { background:white; }
-
-.jstree-classic .jstree-no-dots li,
-.jstree-classic .jstree-no-dots .jstree-leaf > ins { background:transparent; }
-.jstree-classic .jstree-no-dots .jstree-open > ins { background-position:-18px 0; }
-.jstree-classic .jstree-no-dots .jstree-closed > ins { background-position:0 0; }
-
-.jstree-classic .jstree-no-icons a .jstree-icon { display:none; }
-
-.jstree-classic .jstree-search { font-style:italic; }
-
-.jstree-classic .jstree-no-icons .jstree-checkbox { display:inline-block; }
-.jstree-classic .jstree-no-checkboxes .jstree-checkbox { display:none !important; }
-.jstree-classic .jstree-checked > a > .jstree-checkbox { background-position:-38px -19px; }
-.jstree-classic .jstree-unchecked > a > .jstree-checkbox { background-position:-2px -19px; }
-.jstree-classic .jstree-undetermined > a > .jstree-checkbox { background-position:-20px -19px; }
-.jstree-classic .jstree-checked > a > .jstree-checkbox:hover { background-position:-38px -37px; }
-.jstree-classic .jstree-unchecked > a > .jstree-checkbox:hover { background-position:-2px -37px; }
-.jstree-classic .jstree-undetermined > a > .jstree-checkbox:hover { background-position:-20px -37px; }
-
-#vakata-dragged.jstree-classic ins { background:transparent !important; }
-#vakata-dragged.jstree-classic .jstree-ok { background:url("d.png") -2px -53px no-repeat !important; }
-#vakata-dragged.jstree-classic .jstree-invalid { background:url("d.png") -18px -53px no-repeat !important; }
-#jstree-marker.jstree-classic { background:url("d.png") -41px -57px no-repeat !important; text-indent:-100px; }
-
-.jstree-classic a.jstree-search { color:aqua; }
-.jstree-classic .jstree-locked a { color:silver; cursor:default; }
-
-#vakata-contextmenu.jstree-classic-context,
-#vakata-contextmenu.jstree-classic-context li ul { background:#f0f0f0; border:1px solid #979797; -moz-box-shadow: 1px 1px 2px #999; -webkit-box-shadow: 1px 1px 2px #999; box-shadow: 1px 1px 2px #999; }
-#vakata-contextmenu.jstree-classic-context li { }
-#vakata-contextmenu.jstree-classic-context a { color:black; }
-#vakata-contextmenu.jstree-classic-context a:hover,
-#vakata-contextmenu.jstree-classic-context .vakata-hover > a { padding:0 5px; background:#e8eff7; border:1px solid #aecff7; color:black; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; }
-#vakata-contextmenu.jstree-classic-context li.jstree-contextmenu-disabled a,
-#vakata-contextmenu.jstree-classic-context li.jstree-contextmenu-disabled a:hover { color:silver; background:transparent; border:0; padding:1px 4px; }
-#vakata-contextmenu.jstree-classic-context li.vakata-separator { background:white; border-top:1px solid #e0e0e0; margin:0; }
-#vakata-contextmenu.jstree-classic-context li ul { margin-left:-4px; }
-
-/* IE6 BEGIN */
-.jstree-classic li,
-.jstree-classic ins,
-#vakata-dragged.jstree-classic .jstree-invalid,
-#vakata-dragged.jstree-classic .jstree-ok,
-#jstree-marker.jstree-classic { _background-image:url("d.gif"); }
-.jstree-classic .jstree-open ins { _background-position:-72px 0; }
-.jstree-classic .jstree-closed ins { _background-position:-54px 0; }
-.jstree-classic .jstree-leaf ins { _background-position:-36px 0; }
-.jstree-classic .jstree-open a ins.jstree-icon { _background-position:-56px -36px; }
-.jstree-classic .jstree-closed a ins.jstree-icon { _background-position:-56px -19px; }
-.jstree-classic .jstree-leaf a ins.jstree-icon { _background-position:-56px -19px; }
-#vakata-contextmenu.jstree-classic-context ins { _display:none; }
-#vakata-contextmenu.jstree-classic-context li { _zoom:1; }
-.jstree-classic .jstree-undetermined a .jstree-checkbox { _background-position:-20px -19px; }
-.jstree-classic .jstree-checked a .jstree-checkbox { _background-position:-38px -19px; }
-.jstree-classic .jstree-unchecked a .jstree-checkbox { _background-position:-2px -19px; }
-/* IE6 END */

koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss

@@ -3076,13 +3076,25 @@ td {
 }
 
 #hierarchies {
+    margin-bottom: 1em;
+
     a {
         color: #069;
         font-weight: normal;
         text-decoration: underline;
 
-        &:hover {
-            color: #990033;
+        &.jstree-anchor {
+            &.jstree-hovered {
+                background: transparent none;
+                box-shadow: none;
+                color: #005580;
+            }
+
+            &.jstree-clicked {
+                background: transparent none;
+                box-shadow: none;
+                border: 0;
+            }
         }
     }
 }

koha-tmpl/intranet-tmpl/prog/en/modules/authorities/detail.tt

@@ -11,6 +11,9 @@
 </title>
 [% INCLUDE 'doc-head-close.inc' %]
 [% Asset.css("css/addbiblio.css") | $raw %]
+[% IF ( displayhierarchy ) %]
+    [% Asset.css("lib/jquery/plugins/jstree/themes/default/style.min.css") | $raw %]
+[% END %]
 </head>
 
 <body id="auth_detail" class="auth">
@@ -129,7 +132,7 @@
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'authorities_js.inc' %]
     [% IF ( displayhierarchy ) %]
-        [% Asset.js("lib/jquery/plugins/jquery.jstree.js") | $raw %]
+        [% Asset.js("lib/jquery/plugins/jstree/jstree-3.3.12.min.js") | $raw %]
     [% END %]
     <script>
         $(document).ready(function() {
@@ -141,16 +144,18 @@
                 }
             });
             [% IF ( displayhierarchy ) %]
-                var current_nodes = [];
-                $('.currentauth').each(function() {
-                    current_nodes.push('#' + $(this).parent().parents('li:first').attr('id'));
-                    });
                 $('#hierarchies').jstree({
-                        "plugins": [ "themes", "html_data"],
-                        "themes": { "theme": "classic",
-                                    "icons": false },
-                        "core": { "initially_open": current_nodes }
-                    });
+                    "types" : {
+                        "default" : {
+                            "icon" : "fa fa-file-o"
+                        }
+                    },
+                    "plugins" : [ "types" ]
+                }).on('ready.jstree', function(){ $(this).jstree('open_all')
+                }).bind("select_node.jstree", function (e, data) {
+                    e.preventDefault();
+                    document.location.href = data.node.a_attr.href;
+                });
             [% END %]
          });
     </script>

koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss

@@ -1721,15 +1721,25 @@ nav {
 }
 
 #hierarchies {
-    margin: 1em 0;
+    margin-bottom: 1em;
 
     a {
         color: #069;
         font-weight: normal;
         text-decoration: underline;
 
-        &:hover {
-            color: #990033;
+        &.jstree-anchor {
+            &.jstree-hovered {
+                background: transparent none;
+                box-shadow: none;
+                color: #005580;
+            }
+
+            &.jstree-clicked {
+                background: transparent none;
+                box-shadow: none;
+                border: 0;
+            }
         }
     }
 }

koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-authorities.inc

@@ -1,6 +1,6 @@
 [% BLOCK showhierarchy %]
     [% FOREACH tree IN trees %]
-        [% PROCESS showtree tree = tree %]
+        [% PROCESS showtree tree = tree marc = marc %]
     [% END %]
 [% END %]
 
@@ -11,10 +11,10 @@
             [% IF ( node.current_value ) %]
                 <span class="currentauth">[% node.value | html %]</span>
             [% ELSE %]
-                <a href="opac-authoritiesdetail.pl?authid=[% node.authid | uri %]" title="Term">[% node.value | html %]</a>
+                <a href="opac-authoritiesdetail.pl?authid=[% node.authid | uri %]&marc=[% marc | uri %]" title="Term">[% node.value | html %]</a>
             [% END %]
             [% IF ( node.children && node.children.size > 0 ) %]
-                [% PROCESS showtree tree = node.children %]
+                [% PROCESS showtree tree = node.children marc = marc %]
             [% END %]
             </li>
         [% END %]

koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-MARCdetail.tt

@@ -8,7 +8,11 @@
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Entry [% authtypetext | html %] &rsaquo; [% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog</title>
 [% INCLUDE 'doc-head-close.inc' %]
-[% BLOCK cssinclude %][% END %]
+[% BLOCK cssinclude %]
+    [% IF ( displayhierarchy ) %]
+        [% Asset.css("lib/jquery/plugins/jstree/themes/default/style.min.css") | $raw %]
+    [% END %]
+[% END %]
 </head>
 [% INCLUDE 'bodytag.inc' bodyid='opac-authoritiesdetail' bodyclass='scrollto' %]
 [% INCLUDE 'masthead.inc' %]
@@ -52,7 +56,7 @@
 
                         [% IF ( displayhierarchy ) %]
                             <div id="hierarchies">
-                                [% PROCESS showhierarchy trees = loophierarchies %]
+                                [% PROCESS showhierarchy trees = loophierarchies marc = 1 %]
                             </div>
                         [% END %]
 
@@ -76,20 +80,22 @@
 
 [% INCLUDE 'opac-bottom.inc' %]
 [% BLOCK jsinclude %]
-    [% Asset.js("lib/jquery/plugins/jquery.jstree.js") | $raw %]
+    [% Asset.js("lib/jquery/plugins/jstree/jstree-3.3.12.min.js") | $raw %]
     <script>
         $(document).ready(function() {
             [% IF ( displayhierarchy ) %]
-                var current_nodes = [];
-                $('.currentauth').each(function() {
-                    current_nodes.push('#' + $(this).parent().parents('li:first').attr('id'));
-                    });
                 $('#hierarchies').jstree({
-                        "plugins": [ "themes", "html_data"],
-                        "themes": { "theme": "classic",
-                                    "icons": false },
-                        "core": { "initially_open": current_nodes }
-                    });
+                    "types" : {
+                        "default" : {
+                            "icon" : "fa fa-file-o"
+                        }
+                    },
+                    "plugins" : [ "types" ]
+                }).on('ready.jstree', function(){ $(this).jstree('open_all')
+                }).bind("select_node.jstree", function (e, data) {
+                    e.preventDefault();
+                    document.location.href = data.node.a_attr.href;
+                });
             [% END %]
         });
     </script>

koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-detail.tt

@@ -8,7 +8,11 @@
 [% INCLUDE 'doc-head-open.inc' %]
 <title>[% summary.mainentry | html %][% IF authtypetext %] ([% authtypetext | html %])[% END %] &rsaquo; Authority search &rsaquo; [% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog</title>
 [% INCLUDE 'doc-head-close.inc' %]
-[% BLOCK cssinclude %][% END %]
+[% BLOCK cssinclude %]
+    [% IF ( displayhierarchy ) %]
+        [% Asset.css("lib/jquery/plugins/jstree/themes/default/style.min.css") | $raw %]
+    [% END %]
+[% END %]
 </head>
 [% INCLUDE 'bodytag.inc' bodyid='opac-authoritiesdetail' bodyclass='scrollto' %]
 [% INCLUDE 'masthead.inc' %]
@@ -166,22 +170,24 @@
 [% INCLUDE 'opac-bottom.inc' %]
 [% BLOCK jsinclude %]
 [% IF ( displayhierarchy ) %]
-    [% Asset.js("lib/jquery/plugins/jquery.jstree.js") | $raw %]
+    [% Asset.js("lib/jquery/plugins/jstree/jstree-3.3.12.min.js") | $raw %]
 [% END %]
 <script>
     $(document).ready(function() {
         $('#authdescriptions').tabs();
         [% IF ( displayhierarchy ) %]
-            var current_nodes = [];
-            $('.currentauth').each(function() {
-                current_nodes.push('#' + $(this).parent().parents('li:first').attr('id'));
-                });
             $('#hierarchies').jstree({
-                    "plugins": [ "themes", "html_data"],
-                    "themes": { "theme": "classic",
-                                "icons": false },
-                    "core": { "initially_open": current_nodes }
-                });
+                "types" : {
+                    "default" : {
+                        "icon" : "fa fa-file-o"
+                    }
+                },
+                "plugins" : [ "types" ]
+            }).on('ready.jstree', function(){ $(this).jstree('open_all')
+            }).bind("select_node.jstree", function (e, data) {
+                e.preventDefault();
+                document.location.href = data.node.a_attr.href;
+            });
         [% END %]
     });
 </script>

koha-tmpl/opac-tmpl/lib/jquery/plugins/themes/classic/style.css

@@ -1,77 +0,0 @@
-/*
- * jsTree classic theme 1.0
- * Supported features: dots/no-dots, icons/no-icons, focused, loading
- * Supported plugins: ui (hovered, clicked), checkbox, contextmenu, search
- */
-
-.jstree-classic li,
-.jstree-classic ins { background-image:url("d.png"); background-repeat:no-repeat; background-color:transparent; }
-.jstree-classic li { background-position:-90px 0; background-repeat:repeat-y;  }
-.jstree-classic li.jstree-last { background:transparent; }
-.jstree-classic .jstree-open > ins { background-position:-72px 0; }
-.jstree-classic .jstree-closed > ins { background-position:-54px 0; }
-.jstree-classic .jstree-leaf > ins { background-position:-36px 0; }
-
-.jstree-classic .jstree-hovered { background:#e7f4f9; border:1px solid #e7f4f9; padding:0 2px 0 1px; }
-.jstree-classic .jstree-clicked { background:navy; border:1px solid navy; padding:0 2px 0 1px; color:white; }
-.jstree-classic a .jstree-icon { background-position:-56px -19px; }
-.jstree-classic .jstree-open > a .jstree-icon { background-position:-56px -36px; }
-.jstree-classic a.jstree-loading .jstree-icon { background:url("throbber.gif") center center no-repeat !important; }
-
-.jstree-classic.jstree-focused { background:white; }
-
-.jstree-classic .jstree-no-dots li,
-.jstree-classic .jstree-no-dots .jstree-leaf > ins { background:transparent; }
-.jstree-classic .jstree-no-dots .jstree-open > ins { background-position:-18px 0; }
-.jstree-classic .jstree-no-dots .jstree-closed > ins { background-position:0 0; }
-
-.jstree-classic .jstree-no-icons a .jstree-icon { display:none; }
-
-.jstree-classic .jstree-search { font-style:italic; }
-
-.jstree-classic .jstree-no-icons .jstree-checkbox { display:inline-block; }
-.jstree-classic .jstree-no-checkboxes .jstree-checkbox { display:none !important; }
-.jstree-classic .jstree-checked > a > .jstree-checkbox { background-position:-38px -19px; }
-.jstree-classic .jstree-unchecked > a > .jstree-checkbox { background-position:-2px -19px; }
-.jstree-classic .jstree-undetermined > a > .jstree-checkbox { background-position:-20px -19px; }
-.jstree-classic .jstree-checked > a > .jstree-checkbox:hover { background-position:-38px -37px; }
-.jstree-classic .jstree-unchecked > a > .jstree-checkbox:hover { background-position:-2px -37px; }
-.jstree-classic .jstree-undetermined > a > .jstree-checkbox:hover { background-position:-20px -37px; }
-
-#vakata-dragged.jstree-classic ins { background:transparent !important; }
-#vakata-dragged.jstree-classic .jstree-ok { background:url("d.png") -2px -53px no-repeat !important; }
-#vakata-dragged.jstree-classic .jstree-invalid { background:url("d.png") -18px -53px no-repeat !important; }
-#jstree-marker.jstree-classic { background:url("d.png") -41px -57px no-repeat !important; text-indent:-100px; }
-
-.jstree-classic a.jstree-search { color:aqua; }
-.jstree-classic .jstree-locked a { color:silver; cursor:default; }
-
-#vakata-contextmenu.jstree-classic-context,
-#vakata-contextmenu.jstree-classic-context li ul { background:#f0f0f0; border:1px solid #979797; -moz-box-shadow: 1px 1px 2px #999; -webkit-box-shadow: 1px 1px 2px #999; box-shadow: 1px 1px 2px #999; }
-#vakata-contextmenu.jstree-classic-context li { }
-#vakata-contextmenu.jstree-classic-context a { color:black; }
-#vakata-contextmenu.jstree-classic-context a:hover,
-#vakata-contextmenu.jstree-classic-context .vakata-hover > a { padding:0 5px; background:#e8eff7; border:1px solid #aecff7; color:black; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; }
-#vakata-contextmenu.jstree-classic-context li.jstree-contextmenu-disabled a,
-#vakata-contextmenu.jstree-classic-context li.jstree-contextmenu-disabled a:hover { color:silver; background:transparent; border:0; padding:1px 4px; }
-#vakata-contextmenu.jstree-classic-context li.vakata-separator { background:white; border-top:1px solid #e0e0e0; margin:0; }
-#vakata-contextmenu.jstree-classic-context li ul { margin-left:-4px; }
-
-/* IE6 BEGIN */
-.jstree-classic li,
-.jstree-classic ins,
-#vakata-dragged.jstree-classic .jstree-invalid,
-#vakata-dragged.jstree-classic .jstree-ok,
-#jstree-marker.jstree-classic { _background-image:url("d.gif"); }
-.jstree-classic .jstree-open ins { _background-position:-72px 0; }
-.jstree-classic .jstree-closed ins { _background-position:-54px 0; }
-.jstree-classic .jstree-leaf ins { _background-position:-36px 0; }
-.jstree-classic .jstree-open a ins.jstree-icon { _background-position:-56px -36px; }
-.jstree-classic .jstree-closed a ins.jstree-icon { _background-position:-56px -19px; }
-.jstree-classic .jstree-leaf a ins.jstree-icon { _background-position:-56px -19px; }
-#vakata-contextmenu.jstree-classic-context ins { _display:none; }
-#vakata-contextmenu.jstree-classic-context li { _zoom:1; }
-.jstree-classic .jstree-undetermined a .jstree-checkbox { _background-position:-20px -19px; }
-.jstree-classic .jstree-checked a .jstree-checkbox { _background-position:-38px -19px; }
-.jstree-classic .jstree-unchecked a .jstree-checkbox { _background-position:-2px -19px; }
-/* IE6 END */