Bug 12519 - Convert OPAC list download pop-up to modal dialog
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>
This commit is contained in:
Chris Cormack
parent
54efd3d179
commit
e185aaf19b
3 changed files with 118 additions and 21 deletions
|
|
@ -1,12 +1,44 @@
|
|||
[% INCLUDE 'doc-head-open.inc' %][% IF ( LibraryNameTitle ) %][% LibraryNameTitle %][% ELSE %]Koha online[% END %] catalog › 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 › 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">›</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">›</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">›</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 ) %]
|
||||
|
|
@ -14,10 +46,10 @@
|
|||
<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>
|
||||
|
|
@ -26,15 +58,31 @@
|
|||
<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 %]
|
||||
|
|
@ -46,9 +94,25 @@
|
|||
[% 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 %]
|
||||
|
|
@ -156,7 +156,7 @@
|
|||
<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 %]&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>
|
||||
|
|
@ -805,6 +805,16 @@
|
|||
</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();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue