Bug 25702: Actions button on Search results from Z39.50 is displayed incorrectly

This patch modifies, again, the way the actions popup is implemented in
Z39.50 search results, whether it be in cataloging, authorities, or
acquisitions. The solution for Bug 25282 changed some markup which was
being referred to in JavaScript. This patch makes the markup more
consistent and unifies handling of the menu in one JavaScript file.

The solution changes the way a menu is generated when the user clicks
within the row of Z39.50 search results (not on the "Actions" button).
The script now creates a clone of the actions menu in that row and
appends it to the <td> the user clicked on.

To test, apply the patch and clear your browser cache if necessary. Test
these three areas in the same way:

1. Cataloging -> New from Z39.50 -> Search
2. Authorities -> New from Z39.50 -> Search
3. Acquisitions -> Vendor -> Add to Basket -> From an external source ->
Search.

In each case, test the functionality of the "Actions" menu button in the
last column ("Preview" in Acquisitions search results). The menu
should be positioned correctly and menu choice works correctly

Click anywhere else in the search results table. The same actions menu
should be triggered in that table cell. Confirm that these menu items
work correctly according to the row which was clicked.

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

koha-tmpl/intranet-tmpl/prog/en/modules/acqui/z3950_search.tt

@@ -135,7 +135,7 @@ tr.selected { background-color : #FFFFCC; } tr.selected td { background-color :
                </dl>
             </td>
             [% END %]
-            <td>
+            <td class="actions">
                 <div class="btn-group dropup">
                     <a class="btn btn-default btn-xs dropdown-toggle" id="z3950preview[% breeding_loo.breedingid | uri %]" role="button" data-toggle="dropdown" href="#">
                         Preview <b class="caret"></b>
@@ -227,6 +227,7 @@ tr.selected { background-color : #FFFFCC; } tr.selected td { background-color :
     [% Asset.js("js/acquisitions-menu.js") | $raw %]
     [% INCLUDE 'datatables.inc' %]
     [% Asset.js("lib/jquery/plugins/jquery.checkboxes.min.js") | $raw %]
+    [% Asset.js("js/z3950_search.js") | $raw %]
     <script>
         $(document).ready(function(){
             var resultst = $("#resultst").dataTable($.extend(true, {}, dataTablesDefaults, {
@@ -237,26 +238,9 @@ tr.selected { background-color : #FFFFCC; } tr.selected td { background-color :
                 "aaSorting": [[ 1, "asc" ]],
                 "bPaginate": false
             }));
-            /* Inline edit/delete links */
-            $("td").click(function(event){
-                var $tgt = $(event.target);
-                var row = $(this).parent();
-                $(".linktools").hide();
-                $("tr").removeClass("selected");
-                row.addClass("selected");
-                if($tgt.is("a")||$tgt.is(":nth-child(6)")||$tgt.is(":nth-child(7)")){
-                    //Don't show inline links for cells containing links of their own.
-                } else {
-                    var position = $(this).offset();
-                    var top = position.top+5;
-                    var left = position.left+5;
-                    $(".linktools",row).show().css("position","absolute").css("top",top).css("left",left);
-                }
-            });
         });
     </script>
     [% INCLUDE 'z3950_search.inc' %]
-    [% Asset.js("js/z3950_search.js") | $raw %]
 [% END %]
 
 [% INCLUDE 'intranet-bottom.inc' %]

koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/z3950_auth_search.tt

@@ -170,20 +170,9 @@
 [% MACRO jsinclude BLOCK %]
     [% Asset.js("lib/jquery/plugins/jquery.checkboxes.min.js") | $raw %]
     [% INCLUDE 'datatables.inc' %]
+    [% Asset.js("js/z3950_search.js") | $raw %]
     <script>
         $(document).ready(function(){
-
-            $(".dropdown").on("hidden.bs.dropdown", function(){
-                // Reset menu styles so that a click on the
-                // original dropdown button toggle works correctly
-                $(".dropdown").css("position","absolute");
-                $(".dropdown-menu").css({
-                    "top" : "100%",
-                    "left" : "auto",
-                    "right" : 0
-                });
-            });
-
             $("#resultst").dataTable($.extend(true, {}, dataTablesDefaults, {
                 "sDom": 't',
                 "aoColumnDefs": [
@@ -192,38 +181,9 @@
                 "aaSorting": [[ 1, "asc" ]],
                 "bPaginate": false
             }));
-
-            /* Display actions menu anywhere the table is clicked */
-            $("td").click(function(event){
-                var tgt = $(event.target);
-                var row = $(this).parent();
-                var rowid = row.attr("id");
-                $("tr").removeClass("highlighted-row");
-                row.addClass("highlighted-row");
-                $(".dropdown").removeClass("open");
-                if(tgt.is("a")||tgt.is(":nth-child(8)")){
-                    // Don't show inline links for cells containing links of their own.
-                } else {
-                    event.stopPropagation();
-                    var dropdown = $(".dropdown", row);
-                    dropdown.addClass("open");
-                    var position = $(this).offset();
-                    var top = position.top + 5;
-                    var left = position.left + 5;
-                    dropdown.css("position","unset");
-                    $(".dropdown-menu", row).css({
-                        "top" : top,
-                        "left" : left,
-                        "right" : "unset"
-                    });
-
-               }
-            });
-
         });
     </script>
     [% INCLUDE 'z3950_search.inc' %]
-    [% Asset.js("js/z3950_search.js") | $raw %]
 [% END %]
 
 [% INCLUDE 'intranet-bottom.inc' popup_window=1 %]

koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/z3950_search.tt

@@ -154,7 +154,7 @@
                                                    </dl>
                                                 </td>
                                             [% END %]
-                                            <td>
+                                            <td class="actions">
                                                 <div class="btn-group dropup">
                                                     <a class="btn btn-default btn-xs dropdown-toggle" id="cataloguesearchactions[% breeding_loo.breedingid | html %]" role="button" data-toggle="dropdown" href="#">
                                                       Actions <b class="caret"></b>
@@ -242,18 +242,6 @@
     [% INCLUDE 'columns_settings.inc' %]
     <script>
         $(document).ready(function(){
-
-            $(".dropdown").on("hidden.bs.dropdown", function(){
-                // Reset menu styles so that a click on the
-                // original dropdown button toggle works correctly
-                $(".dropdown").css("position","absolute");
-                $(".dropdown-menu").css({
-                    "top" : "100%",
-                    "left" : "auto",
-                    "right" : 0
-                });
-            });
-
             var columns_settings = [% ColumnsSettings.GetColumns( 'cataloguing', 'z3950_search', 'resultst', 'json' ) | $raw %];
             var thetable = KohaTable("resultst", {
                 "aoColumnDefs": [
@@ -263,33 +251,6 @@
                 "aaSorting": [[ 1, "asc" ]],
                 "bPaginate": false
             }, columns_settings );
-
-
-            /* Display actions menu anywhere the table is clicked */
-            $("td").click(function(event){
-                var tgt = $(event.target);
-                var row = $(this).parent();
-                var rowid = row.attr("id");
-                $("tr").removeClass("highlighted-row");
-                row.addClass("highlighted-row");
-                $(".dropdown").removeClass("open");
-                if(tgt.is("a")||tgt.is(":nth-child(8)")){
-                    // Don't show inline links for cells containing links of their own.
-                } else {
-                    event.stopPropagation();
-                    var dropdown = $(".dropdown", row);
-                    dropdown.addClass("open");
-                    var position = $(this).offset();
-                    var top = position.top + 5;
-                    var left = position.left + 5;
-                    dropdown.css("position","unset");
-                    $(".dropdown-menu", row).css({
-                        "top" : top,
-                        "left" : left,
-                        "right" : "unset"
-                    });
-               }
-            });
         });
 
         function columnsInit(){

koha-tmpl/intranet-tmpl/prog/js/z3950_search.js

@@ -21,12 +21,7 @@ $( document ).ready( function() {
         $( ".checkboxed" ).unCheckCheckboxes();
         return false;
     });
-    $( "#close_menu" ).on( "click", function(e) {
+
-        e.preventDefault();
-        $( ".linktools" ).hide();
-        $( "tr" ).removeClass( "selected" );
-        return false;
-    });
     $( ".submit" ).on( "click", function() {
         $( "body" ).css( "cursor", "wait" );
     });
@@ -56,7 +51,52 @@ $( document ).ready( function() {
             return true;
         }
     });
-    $( ".previewMARC" ).on( "click", function(e) {
+
+    /* Display actions menu anywhere the table is clicked */
+    /* Note: The templates where this is included must have a search results
+       table with the id "resultst" and "action" table cells with the class "actions" */
+    $("#resultst").on("click", "td", function(event){
+        var tgt = $(event.target);
+        var row = $(this).parent();
+        /* Remove highlight from all rows and add to the clicked row */
+        $("tr").removeClass("highlighted-row");
+        row.addClass("highlighted-row");
+        /* Remove any menus created on the fly for other rows */
+        $(".btn-wrapper").remove();
+
+        if( tgt.is("a") || tgt.hasClass("actions") ){
+            /* Don't show inline links for cells containing links of their own. */
+        } else {
+            event.stopPropagation();
+            /* Remove the "open" class from all dropup menus in case one is open */
+            $(".dropup").removeClass("open");
+            /* Create a clone of the Bootstrap dropup menu in the "Actions" column */
+            var menu_clone = $(".dropdown-menu", row)
+                .clone()
+                .addClass("menu-clone")
+                .css({
+                    "display" : "block",
+                    "position" : "absolute",
+                    "top" : "auto",
+                    "bottom" : "100%",
+                    "right" : "auto",
+                    "left" : "0",
+                });
+            /* Append the menu clone to the table cell which was clicked.
+                The menu must first be wrapped in a block-level div to clear
+                the table cell's text contents and then a relative-positioned
+                div to allow the menu to be positioned correctly */
+            tgt.append(
+                $('<div/>', {'class': 'btn-wrapper'}).append(
+                    $('<div/>', {'class': 'btn-group'}).append(
+                        menu_clone
+                    )
+                )
+            );
+        }
+    });
+
+    $( "#resultst" ).on("click", ".previewMARC", function(e) {
         e.preventDefault();
         var ltitle = $( this ).text();
         var page = $( this ).attr( "href" );
@@ -68,7 +108,7 @@ $( document ).ready( function() {
         $( "#marcPreviewLabel" ).html( "" );
         $( "#marcPreview .modal-body" ).html( "<div id='loading'><img src='" + interface + "/" + theme + "/img/spinner-small.gif' alt='' /> " + MSG_LOADING + "</div>" );
     });
-    $( ".previewData" ).on( "click", function(e) {
+    $( "#resultst" ).on("click", ".previewData", function(e) {
         e.preventDefault();
         var ltitle = $( this ).text();
         var page = $( this ).attr( "href" );
@@ -80,7 +120,7 @@ $( document ).ready( function() {
         $( "#dataPreviewLabel" ).html( "" );
         $( "#dataPreview .modal-body" ).html( "<div id='loading'><img src='" + interface + "/" + theme + "/img/spinner-small.gif' alt='' /> " + MSG_LOADING + "</div>" );
     });
-    $( ".import_record" ).on( "click", function(e) {
+    $( "#resultst" ).on("click", ".import_record", function(e) {
         e.preventDefault();
         var data_breedingid = $( this ).data( "breedingid" );
         var data_headingcode = $( this ).data( "heading_code" );