Bug 12755 - MARC Preview doesn't always display in managed MARC record

The MARC preview feature seems to have been broken by Bug 11570 -
Upgrade jQueryUI to the latest version. When that patch was being
developed there were no existing cases where the jQueryUI dialog feature
was used, so the patch omitted it.

Rather than update the build of jQueryUI to include the dialog feature
I'm submitting a patch which uses a Bootstrap modal instead. This keeps
the jQueryUI library smaller and avoids an unnecessary duplication of JS
functionality. It also helps keep our modals consistent.

The implementation uses progressive enhancement principles to improve
click handling: Real links in the table, so that the preview link can be
opened in a new tab if the user chooses; Event handling in the
JavaScript instead of the markup ( $(selector).on(click... instead of <a
onclick=...).

To test, apply the patch and add or view a batch of staged MARC records
(Tools -> Staged MARC management). In the list of titles (the "Citation"
column) click any link and confirm that the MARC preview loads
correctly. Confirm that previews work correctly on any page and after
re-sorting.

Confirm also that the modal window flexibly handles different browser
window sizes.

Signed-off-by: Nick Clemens <nick@quecheelibrary.org>
Signed-off-by: Jonathan Druart <jonathan.druart@biblibre.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@gmail.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/manage-marc-import.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/manage-marc-import.tt
index 3d5f01d..2b4684a 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/manage-marc-import.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/manage-marc-import.tt
@@ -62,9 +62,7 @@ $(document).ready(function(){
             [% END %]
 
             $('td:eq(1)', nRow).html(
-                '<a href="javascript:void(0)" onclick="show_marc('
-                + aData['import_record_id']
-                + ')">' + aData['citation'] + '</a>'
+                '<a href="/cgi-bin/koha/catalogue/showmarc.pl?importid=' + aData['import_record_id'] + '" class="previewMARC">' + aData['citation'] + '</a>'
             );
 
             $('td:eq(2)', nRow).html(
@@ -103,29 +101,27 @@ $(document).ready(function(){
           },
       }));
     [% END %]
+    $("body").on("click",".previewMARC", 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>");
+    });
 });
 
-function show_marc( id ) {
-    var page = "/cgi-bin/koha/catalogue/showmarc.pl?importid=" + id;
-
-    var $dialog = $('<div></div>')
-        .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
-        .dialog({
-            autoOpen: false,
-            modal: true,
-            height: 625,
-            width: 500,
-            title: _("MARC Preview")
-        });
-
-    $dialog.dialog('open');
-}
 //]]>
 </script>
 <style type="text/css">
        #jobpanel,#jobstatus,#jobfailed { display : none; }
        #jobstatus { margin:.4em; }
-    #jobprogress{ width:200px;height:10px;border:1px solid #666;background:url('[% interface %]/[% theme %]/img/progress.png') -300px 0px no-repeat; } span.change-status { font-style:italic; color:#666; display:none; }</style>
+    #jobprogress{ width:200px;height:10px;border:1px solid #666;background:url('[% interface %]/[% theme %]/img/progress.png') -300px 0px no-repeat; } span.change-status { font-style:italic; color:#666; display:none; }#marcPreview { width : 80%; margin-left : -40%; } @media (max-width: 767px) { #marcPreview { margin: 0; width : auto; } }
+</style>
 </head>
 <body id="tools_manage-marc-import" class="tools">
 [% INCLUDE 'header.inc' %]
@@ -452,6 +448,19 @@ Page
             </tr>
         </thead>
     </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 class="modal-footer">
+            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
+        </div>
+    </div>
 [% END %]
 
 </div>