Bug 15316 - Use Bootstrap modal for authority Z39.50 search results preview

In order to reduce the number of dependencies for common interactions we
should attempt to use Bootstrap modals in place of Greybox ones.

This patch modifies the authorities Z39.50 search results page so that
MARC previews are displayed in Bootstrap modals. This patch also
modifies the authorities toolbar include file to make the Z39.50 search
popup size match that in cataloging.

Because the modal is triggered from a pop-up window, the modal has been
reformated to exclude the footer and reduce the size of the modal
header.

To test:

1. Apply the patch and navigate to Authorities.
2. Click the "New from Z39.50" button to open the search
   window.
3. Perform any search which will return multiple results.
4. Test the visible "MARC" link for multiple results and
   confirm that the correct data is shown each time.
5. Click anywhere in the results table to show the hidden menu and test
   the "MARC" link it displays.

Signed-off-by: Frédéric Demians <f.demians@tamil.fr>

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

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>

koha-tmpl/intranet-tmpl/prog/en/includes/authorities-toolbar.inc

@@ -9,10 +9,10 @@
         $("#z3950submit").click(function(){
             [% IF ( authid ) %]
                 if (confirm(_("Please note that this Z39.50 search could replace the current record."))){
-                    window.open("/cgi-bin/koha/cataloguing/z3950_auth_search.pl?authid=[% authid %]","z3950search",'width=740,height=450,location=yes,toolbar=no,scrollbars=yes,resize=yes');
+                    window.open("/cgi-bin/koha/cataloguing/z3950_auth_search.pl?authid=[% authid %]","z3950search",'width=800,height=500,location=yes,toolbar=no,scrollbars=yes,resize=yes');
                 }
             [% ELSE %]
-                window.open("/cgi-bin/koha/cataloguing/z3950_auth_search.pl","z3950search",'width=740,height=450,location=yes,toolbar=no,scrollbars=yes,resize=yes');
+                window.open("/cgi-bin/koha/cataloguing/z3950_auth_search.pl","z3950search",'width=800,height=500,location=yes,toolbar=no,scrollbars=yes,resize=yes');
             [% END %]
             return false;
         });

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

@@ -1,6 +1,5 @@
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Z39.50 search results</title>
-[% INCLUDE 'greybox.inc' %]
 [% INCLUDE 'doc-head-close.inc' %]
 <script type="text/javascript" src="[% interface %]/lib/jquery/plugins/jquery.checkboxes.min.js"></script>
 <link rel="stylesheet" type="text/css" href="[% themelang %]/css/datatables.css" />
@@ -62,6 +61,18 @@ $(document).ready(function(){
         e.preventDefault();
         $("form[name='f']").find("input[type=text]").val("");
     });
+    $(".previewMARC").on("click", function(e){
+        e.preventDefault();
+        var ltitle = $(this).text();
+        var page = $(this).attr("href");
+        $("#marcPreviewLabel").text(ltitle);
+        $("#marcPreview .modal-body").load(page + " pre");
+        $('#marcPreview').modal({show:true});
+    });
+    $("#marcPreview").on("hidden", function(){
+        $("#marcPreviewLabel").html("");
+        $("#marcPreview .modal-body").html("<div id=\"loading\"><img src=\"[% interface %]/[% theme %]/img/loading-small.gif\" alt=\"\" /> "+_("Loading")+"</div>");
+    });
 });
 
 [% IF ( total_pages ) %]
@@ -87,7 +98,7 @@ function validate_goto_page(){
 .linktools { background-color:#FFF;border-top:1px solid #DDD; border-left: 1px solid #DDD; border-right: 1px solid #666; border-bottom:1px solid #666;display: none; white-space: nowrap;}
 .linktools a { font-size : 85%; text-decoration:none; padding:.3em;;background-color:#FFF; display:block;float:left;border-right:1px solid #DDD;}
 .linktools a:hover { background-color:#EEE;color:#CC3300;border-right:1px solid #CCC;}
-tr.selected { background-color : #FFFFCC; } tr.selected td { background-color : transparent; }
+tr.selected { background-color : #FFFFCC; } tr.selected td { background-color : transparent; } #marcPreview { width : 90%; margin-left : -45%; top: 5%; } .modal-body { max-height: 380px; } .modal-header { padding: 0 14px; } @media (max-width: 767px) { #marcPreview { margin: 0; width : auto; } }
 </style>
 
     [% IF ( opsearch ) %]
@@ -164,10 +175,10 @@ tr.selected { background-color : #FFFFCC; } tr.selected td { background-color :
     <tbody>[% FOREACH breeding_loo IN breeding_loop %]
         [% IF ( breeding_loo.breedingid ) %]
         <tr id="row[% breeding_loo.breedingid %]">
-            <td>[% breeding_loo.server %] <div class="linktools"><a href="/cgi-bin/koha/catalogue/showmarc.pl?importid=[% breeding_loo.breedingid %]" rel="gb_page_center[600,500]">Preview MARC</a> <a href="#" onclick="Import([% breeding_loo.breedingid %],'[% breeding_loo.heading_code %]','[% breeding_loo.authid %]'); return false">Import</a><a href="#" onclick="closemenu();return false;" title="Close this menu"> X </a></div> </td>
+            <td>[% breeding_loo.server %] <div class="linktools"><a href="/cgi-bin/koha/catalogue/showmarc.pl?importid=[% breeding_loo.breedingid %]" class="previewMARC">Preview MARC</a> <a href="#" onclick="Import([% breeding_loo.breedingid %],'[% breeding_loo.heading_code %]','[% breeding_loo.authid %]'); return false">Import</a><a href="#" onclick="closemenu();return false;" title="Close this menu"> X </a></div> </td>
             <td>[% breeding_loo.heading %]</td>
             <td>[% breeding_loo.heading_code %]</td>
-            <td><a href="/cgi-bin/koha/catalogue/showmarc.pl?importid=[% breeding_loo.breedingid %]" title="MARC" rel="gb_page_center[600,500]">MARC</a></td>
+            <td><a href="/cgi-bin/koha/catalogue/showmarc.pl?importid=[% breeding_loo.breedingid %]" class="previewMARC">MARC</a></td>
             <!-- <td><a href="/cgi-bin/koha/catalogue/showmarc.pl?viewas=card&amp;importid=[% breeding_loo.breedingid %]" title="MARC" rel="gb_page_center[600,500]">Card</a></td> -->
             <td><a href="#" onclick="Import([% breeding_loo.breedingid %],'[% breeding_loo.heading_code %]','[% breeding_loo.authid %]'); return false">Import</a></td>
         </tr>
@@ -175,6 +186,16 @@ tr.selected { background-color : #FFFFCC; } tr.selected td { background-color :
     [% END %]</tbody>
 </table>
 
+    <div id="marcPreview" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="marcPreviewLabel" aria-hidden="true">
+        <div class="modal-header">
+            <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
+            <h3 id="marcPreviewLabel">MARC preview</h3>
+        </div>
+        <div class="modal-body">
+            <div id="loading"> <img src="[% interface %]/[% theme %]/img/loading-small.gif" alt="" /> Loading </div>
+        </div>
+    </div>
+
     <form method="post" action="z3950_auth_search.pl" id="page_form" name="page_form" class="checkboxed">
         <input type="hidden" name="op" id="op" value="do_search" />
         <input type="hidden" name="current_page" id="current_page" value="[% current_page %]" />