Bug 15313 - Use Bootstrap modal for z39.50 search MARC and Card 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 cataloging Z39.50 search results page so that
"MARC" and "Card" previews are displayed in Bootstrap modals.

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 Cataloging.
2. Click the "New from Z39.50/SRU button to open the search
   window.
3. Perform any search which will return results.
4. Test the visible "MARC" and "Card" links 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" and "Card" links it displays.

Corrected: The original patch didn't address the hidden menu which
appears if you click in any table cell.

Followed test plan, works as expected (including click in table cell).
Signed-off-by: Marc Véron <veron@veron.ch>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Brendan A Gallagher <brendan@bywatersolutions.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/z3950_search.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/z3950_search.tt
index 4272f84..d66c007 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/z3950_search.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/z3950_search.tt
@@ -1,6 +1,5 @@
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Z39.50/SRU 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" />
@@ -63,6 +62,19 @@ $(document).ready(function(){
         e.preventDefault();
        $("form[name='f']").find("input[type=text]").val("");
     });
+    $(".previewData").on("click", function(e){
+        e.preventDefault();
+        var ltitle = $(this).text();
+        var page = $(this).attr("href");
+        $("#dataPreviewLabel").text(ltitle);
+        $("#dataPreview .modal-body").load(page + " div");
+        $('#dataPreview').modal({show:true});
+    });
+    $("#dataPreview").on("hidden", function(){
+        $("#dataPreviewLabel").html("");
+        $("#dataPreview .modal-body").html("<div id=\"loading\"><img src=\"[% interface %]/[% theme %]/img/loading-small.gif\" alt=\"\" /> "+_("Loading")+"</div>");
+    });
+
 });
 
 [% IF ( total_pages ) %]
@@ -89,6 +101,7 @@ function validate_goto_page(){
 .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; }
+#dataPreview { width : 90%; margin-left : -45%; top: 5%; } .modal-body { max-height: 380px; } .modal-header { padding: 0 14px; } @media (max-width: 767px) { #dataPreview { margin: 0; width : auto; } }
 </style>
       [% IF ( opsearch ) %]
    <style type="text/css">
@@ -193,21 +206,33 @@ tr.selected { background-color : #FFFFCC; } tr.selected td { background-color :
         [% 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="/cgi-bin/koha/catalogue/showmarc.pl?viewas=card&amp;importid=[% breeding_loo.breedingid %]" rel="gb_page_center[600,500]">Preview card</a> <a href="#" onclick="Import([% breeding_loo.breedingid %],[% breeding_loo.biblionumber %]); 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="previewData">Preview MARC</a> <a href="/cgi-bin/koha/catalogue/showmarc.pl?viewas=card&amp;importid=[% breeding_loo.breedingid %]" class="previewData">Preview card</a> <a href="#" onclick="Import([% breeding_loo.breedingid %],[% breeding_loo.biblionumber %]); return false">Import</a><a href="#" onclick="closemenu();return false;" title="Close this menu"> X </a></div> </td>
             <td>[% breeding_loo.title |html %]</td>
             <td>[% breeding_loo.author %]</td>
             <td>[% breeding_loo.date %]</td>
             <td>[% breeding_loo.edition %]</td>
             <td>[% breeding_loo.isbn %]</td>
             <td>[% breeding_loo.lccn %]</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?viewas=card&amp;importid=[% breeding_loo.breedingid %]" title="MARC" rel="gb_page_center[600,500]">Card</a></td>
+            <td><a href="/cgi-bin/koha/catalogue/showmarc.pl?importid=[% breeding_loo.breedingid %]" class="previewData">MARC</a></td>
+            <td><a href="/cgi-bin/koha/catalogue/showmarc.pl?viewas=card&amp;importid=[% breeding_loo.breedingid %]" class="previewData">Card</a></td>
             <td><a href="#" onclick="Import([% breeding_loo.breedingid %],[% breeding_loo.biblionumber %]); return false">Import</a></td> 
         </tr>
         [% END %]
     [% END %]</tbody>
 </table>
 
+<div id="dataPreview" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="dataPreviewLabel" aria-hidden="true">
+    <div class="modal-header">
+        <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
+        <h3 id="dataPreviewLabel">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_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 %]" />