Bug 12519 - Convert OPAC list download pop-up to modal dialog
authorOwen Leonard <oleonard@myacpl.org>
Wed, 2 Jul 2014 16:50:54 +0000 (12:50 -0400)
committerChris Cormack <chrisc@catalyst.net.nz>
Mon, 21 Jul 2014 21:54:36 +0000 (09:54 +1200)
This patch changes the OPAC list download process so that the download
link triggers a modal dialog instead of a pop-up window. This
streamlines the process a little bit and makes it work better on mobile
devices.

The download list page has been altered so that it works better as a
standalone page, as it might be seen if JavaScript is disabled. Simple
form validation has been added to help prevent submission of the form
without choosing a format.

To test the virtualshelves system preference must be enabled.

- View an existing list in the OPAC and click the "download list" link.
- A modal dialog should be displayed with the download form.
- Submitting the form without selecting a format should trigger either a
  browser-based form validation error (in HTML5-supporting browsers) or
  a JavaScript alert (if your browser doesn't support the "required"
  attribute.
- Choosing a download format and submitting the form should close
  the dialog and trigger the correct download.
- Clicking the "Cancel" link should close the dialog.

Test with JavaScript disabled:

- Clicking the "download list" link should take you to a page which
  contains the same form which appeared in the modal dialog.
- Submitting the form without selecting a format should trigger either a
  browser-based form validation error (in HTML5-supporting browsers) or
  a JavaScript alert (if your browser doesn't support the "required"
  attribute..
- Choosing a download format and submitting the form should result in
  the corect download.
- Clicking the "Cancel" link should return you to the correct list.

Signed-off-by: Aleisha <aleishaamohia@hotmail.com>
Signed-off-by: Katrin Fischer <Katrin.Fischer.83@web.de>
Passes QA script and tests, works as described.

Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-downloadshelf.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
opac/opac-downloadshelf.pl

index 1d38e61..a852399 100644 (file)
@@ -1,12 +1,44 @@
-[% INCLUDE 'doc-head-open.inc' %][% IF ( LibraryNameTitle ) %][% LibraryNameTitle %][% ELSE %]Koha online[% END %] catalog &rsaquo; Download list[% INCLUDE 'doc-head-close.inc' %]
-[% BLOCK cssinclude %][% END %]
-</head>
-<body id="opac-downloadlist" class="popup">
-    <div class="main">
-        <div class="container-fluid">
-            <div class="row-fluid">
-                <div class="span12">
-                    <div id="userdownloadshelf">
+[% USE Koha %]
+[% IF ( fullpage ) %]
+    [% INCLUDE 'doc-head-open.inc' %][% IF ( LibraryNameTitle ) %][% LibraryNameTitle %][% ELSE %]Koha online[% END %] catalog &rsaquo; Download list [% shelfname %][% INCLUDE 'doc-head-close.inc' %]
+    [% BLOCK cssinclude %][% END %]
+    </head>
+    <body id="opac-downloadlist">
+        [% INCLUDE 'masthead.inc' %]
+        <div class="main">
+            <ul class="breadcrumb">
+                <li><a href="/cgi-bin/koha/opac-main.pl">Home</a> <span class="divider">&rsaquo;</span></li>
+                [% IF ( loggedinusername ) %]
+                    <li><a href="/cgi-bin/koha/opac-user.pl">[% FOREACH USER_INF IN USER_INFO %][% USER_INF.title %] [% USER_INF.firstname %] [% USER_INF.surname %][% END %]</a> <span class="divider">&rsaquo;</span></li>
+                [% END %]
+                <li>
+                    [% IF ( showprivateshelves ) %]
+                        <a href="/cgi-bin/koha/opac-shelves.pl">Your lists</a>
+                    [% ELSE %]
+                        <a href="/cgi-bin/koha/opac-shelves.pl?display=publicshelves">Public lists</a>
+                    [% END %]
+                    <span class="divider">&rsaquo;</span>
+                </li>
+                <li>Download list <i>[% shelfname %]</i></li>
+            </ul>
+            <div class="container-fluid">
+                <div class="row-fluid">
+                    [% IF ( OpacNav||loggedinusername ) %]
+                        <div class="span2">
+                            <div id="navigation">
+                                [% INCLUDE 'navigation.inc' IsPatronPage=1 %]
+                            </div>
+                        </div>
+                    [% END %]
+
+                    [% IF ( OpacNav||loggedinusername ) %]
+                        <div class="span10">
+                    [% ELSE %]
+                        <div class="span12">
+                    [% END %]
+[% END # / IF fullpage %]
+
+                    <div id="userdownloadshelf" class="maincontent">
                         [% UNLESS ( invalidlist ) %]
 
                             [% IF ( format ) %]
                                     <p>Your download should begin automatically.</p>
                                 </div>
                             [% ELSE %]
-                                <h1>Download list</h1>
+                                <h1>Download list <i>[% shelfname %]</i></h1>
                                 <form method="post" action="/cgi-bin/koha/opac-downloadshelf.pl">
                                     <fieldset>
-                                        <select name="format" id="format">
+                                        <select name="format" id="dlformat" required="required">
                                             <option value="">-- Choose format --</option>
                                             <option value="ris">RIS (Zotero, EndNote, others)</option>
                                             <option value="bibtex">BibTeX</option>
                                             <option value="[% csv_profile.export_format_id %]">CSV - [% csv_profile.profile %]</option>
                                             [% END %]
                                         </select>
+                                        <span class="required">Required</span>
                                     </fieldset>
 
                                     <fieldset class="action">
                                         <input type="hidden" name="shelfid" value="[% shelfid | html %]" />
                                         <input type="submit" name="save" class="btn" value="Go" />
-                                        <a href="/cgi-bin/koha/opac-shelves.pl?viewshelf=[% shelfid %]" class="cancel close">Cancel</a>
+                                        <a href="/cgi-bin/koha/opac-shelves.pl?viewshelf=[% shelfid %]" class="cancel close" data-dismiss="modal">Cancel</a>
                                     </fieldset>
                                 </form>
-
+                                [% IF ( modal ) %]
+                                    <script type="text/javascript">
+                                        //<![CDATA[
+                                            $(document).ready(function(){
+                                                $("#userdownloadshelf form").on("submit",function(e){
+                                                    if( $("#dlformat").val() == "" ){
+                                                        e.preventDefault();
+                                                        alert(_("Please choose a download format"));
+                                                    } else {
+                                                        $("#modalWin").modal("hide");
+                                                    }
+                                                });
+                                            });
+                                        //]]>
+                                    </script>
+                                [% END %]
                             [% END # / IF format %]
 
                         [% ELSE %]
                         [% END # / invalidlist %]
 
                     </div> <!-- / #userdownloadshelf -->
-                </div> <!-- / .span10 -->
-            </div> <!-- / .row-fluid -->
-        </div> <!-- / .container-fluid -->
-    </div> <!-- / .main -->
-[% INCLUDE 'opac-bottom.inc' is_popup=1 %]
-[% BLOCK jsinclude %][% END %]
+
+[% IF ( fullpage ) %]
+                    </div> <!-- / .span10 -->
+                </div> <!-- / .row-fluid -->
+            </div> <!-- / .container-fluid -->
+        </div> <!-- / .main -->
+    [% INCLUDE 'opac-bottom.inc' %]
+    [% BLOCK jsinclude %]
+        <script type="text/javascript">
+            //<![CDATA[
+                $(document).ready(function(){
+                    $("#userdownloadshelf form").on("submit",function(e){
+                        if( $("#dlformat").val() == "" ){
+                            e.preventDefault();
+                            alert(_("Please choose a download format"));
+                        }
+                    });
+                });
+            //]]>
+        </script>
+    [% END %]
+[% END # / IF fullpage %]
\ No newline at end of file
index a6d9040..a65be1b 100644 (file)
                             <div id="toolbar" class="toolbar clearfix">
                                 <div class="list-actions">
                                     <a class="newshelf" href="/cgi-bin/koha/opac-shelves.pl?shelves=1">New list</a> <span class="sep">|</span>
-                                    <a href="/cgi-bin/koha/opac-downloadshelf.pl?shelfid=[% shelfnumber %]" class="download" onclick="open('/cgi-bin/koha/opac-downloadshelf.pl?shelfid=[% shelfnumber %]','win_form','scrollbars=no,resizable=no,height=300,width=450,top=50,left=100'); return false;">Download list</a>
+                                    <a href="/cgi-bin/koha/opac-downloadshelf.pl?shelfid=[% shelfnumber %]&amp;showprivateshelves=[% showprivateshelves %]" class="download" data-toggle="modal" data-target="#modalWin">Download list</a>
 
                                     [% IF Koha.Preference( 'opacuserlogin' ) == 1 %]
                                         <span class="sendlist"><a href="/cgi-bin/koha/opac-sendshelf.pl?shelfid=[% shelfnumber %]" class="send" onclick="open('/cgi-bin/koha/opac-sendshelf.pl?shelfid=[% shelfnumber %]','win_form','scrollbars=no,resizable=no,height=300,width=450,top=50,left=100'); return false; ">Send list</a></span>
     </div> <!-- / .container-fluid -->
   </div> <!-- / .main -->
 
+<div class="modal hide" id="modalWin" role="dialog" aria-hidden="true" tabindex="-1">
+    <div class="modal-content">
+        <div class="modal-body">
+            <div style="margin:1em;padding:1em;font-size:150%;">
+                <img src="[% interface %]/[% theme %]/images/loading.gif" /> Loading
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- DEBUG -->
     <div id="debug"></div>
 <!-- /DEBUG -->
@@ -905,6 +915,11 @@ $(function() {
         });
     [% END %]
 
+    // If JS is enabled add paramter to download link
+    var dialoglink = $(".download").attr("href");
+    dialoglink += "&context=modal";
+    $(".download").attr("href",dialoglink);
+
     $("#CheckAll").click(function(){
         $(".checkboxed").checkCheckboxes();
         enableCheckboxActions();
index 17ee166..012e51b 100755 (executable)
@@ -46,6 +46,8 @@ my ( $template, $borrowernumber, $cookie ) = get_template_and_user (
 
 my $shelfid = $query->param('shelfid');
 my $format  = $query->param('format');
+my $context = $query->param('context');
+my $showprivateshelves = $query->param('showprivateshelves');
 my $dbh     = C4::Context->dbh;
 
 if ( ShelfPossibleAction( (defined($borrowernumber) ? $borrowernumber : -1), $shelfid, 'view' ) ) {
@@ -94,8 +96,24 @@ if ( ShelfPossibleAction( (defined($borrowernumber) ? $borrowernumber : -1), $sh
         print $output;
 
     } else {
+
+        # get details of the list
+        my ($shelfnumber,$shelfname,$owner,$category,$sorton) = GetShelf($shelfid);
+
+        # if modal context is passed set a variable so that page markup can be different
+        if($context eq "modal"){
+            $template->param(modal => 1);
+        } else {
+            $template->param(fullpage => 1);
+        }
         $template->param(csv_profiles => GetCsvProfilesLoop('marc'));
-        $template->param(shelfid => $shelfid); 
+        $template->param(
+            showprivateshelves  => $showprivateshelves,
+            shelfid             => $shelfid,
+            shelfname           => $shelfname,
+            shelfnumber         => $shelfnumber,
+            viewshelf           => $shelfnumber
+        );
         output_html_with_http_headers $query, $cookie, $template->output;
     }