From 83b7d6e0d398407c9ca7333f68b78f7478600286 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Fri, 4 Dec 2015 18:49:39 -0500
Subject: [PATCH]  Bug 15314: Use Bootstrap modal for cataloging merge MARC
 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 merge selection page so that the
MARC preview is shown in a Boostrap modal. This patch also changes the
preview link to be the text "View MARC" so that it is clear what it
does.

To test:

1. Apply the patch and navigate to Cataloging.
2. Perform a search which will return results from the catalog.
3. Select two records and click the "Merge selected" button to begin the
   merge process.
4. Test the "View MARC" link for both merge choices and confirm that the
   correct data is shown each time.

Signed-off-by: Hector Castro <hector.hecaxmmx@gmail.com>
Works as advertised

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

Signed-off-by: Brendan A Gallagher <brendan@bywatersolutions.com>
---
 .../prog/en/modules/cataloguing/merge.tt      | 33 +++++++++++++++++--
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/merge.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/merge.tt
index 9ec45c1d4e..deb74abcc7 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/merge.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/merge.tt
@@ -2,7 +2,6 @@
 
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Cataloging &rsaquo; Merging records</title>
-[% INCLUDE 'greybox.inc' %]
 [% INCLUDE 'doc-head-close.inc' %]
 <script type="text/javascript" src="[% themelang %]/js/merge-record.js"></script>
 [% INCLUDE 'merge-record-strings.inc' %]
@@ -10,6 +9,7 @@
 div.record ul, div.record li { float:none; display:block; }
 div#result { margin-top: 1em; }
 /* We use this style "against" the li ui-tabs-nav style automatically applied */
+#dataPreview { width : 80%; margin-left : -40%; } @media (max-width: 767px) { #dataPreview { margin: 0; width : auto; } }
 </style>
 <script type="text/javascript">
 //<![CDATA[
@@ -18,6 +18,20 @@ div#result { margin-top: 1em; }
     function changeFramework(fw) {
         $("#frameworkcode").val(fw);
     }
+    $(document).ready(function(){
+            $(".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>");
+        });
+    });
   [% ELSE %]
     function check_mandatory () {
         var missing = {
@@ -106,7 +120,6 @@ $(document).ready(function(){
 
   [% END %]
 [% END %]
-
 //]]>
 </script>
 </head>
@@ -201,7 +214,7 @@ $(document).ready(function(){
                     [% FOREACH subtitle IN record.subtitles %]
                         [% subtitle.subfield %]
                     [% END %]
-                    (<a href="/cgi-bin/koha/catalogue/showmarc.pl?id=[% record.biblionumber %]" title="MARC" rel="gb_page_center[600,500]">[% record.biblionumber %]</a>)
+                    ([% record.biblionumber %]) <a href="/cgi-bin/koha/catalogue/showmarc.pl?id=[% record.biblionumber %]" class="previewData">View MARC</a>
                 </label>
             </li>
         [% END %]
@@ -233,6 +246,20 @@ $(document).ready(function(){
     </fieldset>
     </fieldset>
 </form>
+
+<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 class="modal-footer">
+        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
+    </div>
+</div>
+
 [% ELSE %]
 [% IF ( errors.size ) %]
     <div class="dialog alert">