Bug 19461: Add floating toolbar to staff client catalog search results

This patch adds a floating toolbar to the staff client search results
page, making all the various controls visible as the user scrolls down.

To test, apply the patch and perform a catalog search in the staff
client.

- The toolbar should "stick" to the top of the page as you scroll down.
- Controls in the toolbar should all work correctly:

  - Select all / Clear all
  - Highlight / Unhighlight
  - Add to Cart
    - Cart notifications should be positioned correctly
  - Add to list (and all list menu controls)
  - Place hold (including controls which are visible when
    a "Search to hold" has been initiated
  - Z39.50/SRU search
  - Sort

Signed-off-by: Mark Tompsett <mtompset@hotmail.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This commit is contained in:
Owen Leonard 2017-06-01 12:19:46 +00:00 committed by Jonathan Druart
parent cffc99cbe5
commit 7d2cb42dce
3 changed files with 224 additions and 107 deletions

View File

@ -1565,6 +1565,18 @@ li.email {
padding : 5px 25em 0 0;
}
#searchheader .dropdown-menu > li > a {
padding: 2px 10px;
}
#searchheader .dropdown-menu > li > a {
padding: 2px 10px;
}
#searchheader .dropdown-header {
padding: 4px 5px
}
#search-facets ul {
margin : 0;
padding : .3em;
@ -2499,6 +2511,12 @@ a.dropdown-toggle {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.dropdown-header {
border-top: 1px solid #EEE;
color: #000;
font-weight: bold;
}
a.disabled {
color : #999999;
}

View File

@ -19,6 +19,7 @@
<script type="text/javascript" src="[% interface %]/lib/shims/json2.min.js"></script>
<![endif]-->
<script type="text/javascript" src="[% interface %]/js/browser.js"></script>
<script type="text/javascript" src="[% interface %]/lib/jquery/plugins/jquery.fixFloat.js"></script>
<script type="text/javascript">
//<![CDATA[
var MSG_NO_ITEM_SELECTED = _("Nothing is selected.");
@ -47,110 +48,59 @@ $(window).load(function() {
function Dopop(link) {
newin=window.open(link,'popup','width=500,height=500,toolbar=false,scrollbars=yes,resizeable=yes');
}
function cartList(){
var checkboxes = $("#searchresults").find(":checkbox");
var vshelf = vShelfAdd(checkboxes);
if($("#addto").find("option:selected").attr("value") == "addtolist"){
var shelfnumber = $("#addto").find("option:selected").attr("id").replace("s","");
if (vshelf) {
Dopop('/cgi-bin/koha/virtualshelves/addbybiblionumber.pl?shelfnumber='+shelfnumber+'&confirm=1&' + vshelf);
}
return false;
} else if($("#addto").find("option:selected").attr("value") == "newlist"){
if (vshelf) {
Dopop('/cgi-bin/koha/virtualshelves/addbybiblionumber.pl?newshelf=1&' + vshelf);
}
return false;
} else if($("#addto").find("option:selected").attr("value") == "morelists"){
if (vshelf) {
Dopop('/cgi-bin/koha/virtualshelves/addbybiblionumber.pl?' + vshelf);
}
return false;
}
if($("#addto").find("option:selected").attr("value") == "addtocart"){
addMultiple(checkboxes);
return false;
}
}
$(document).ready(function() {
$("#cartsubmit").click(function(){
cartList();
return false;
});
$("#searchheader").fixFloat();
$("#cartsubmit").click(function(e){
e.preventDefault();
var checkboxes = $("#searchresults").find(":checkbox");
addMultiple(checkboxes);
});
$(".addtolist").on("click",function(e){
e.preventDefault();
var shelfnumber = $(this).data("shelfnumber");
var checkboxes = $("#searchresults").find(":checkbox");
var vshelf = vShelfAdd(checkboxes);
if( vshelf ){
if( $(this).hasClass("morelists") ){
Dopop('/cgi-bin/koha/virtualshelves/addbybiblionumber.pl?' + vshelf);
} else if( $(this).hasClass("newlist") ){
Dopop('/cgi-bin/koha/virtualshelves/addbybiblionumber.pl?newshelf=1&' + vshelf);
} else {
Dopop('/cgi-bin/koha/virtualshelves/addbybiblionumber.pl?shelfnumber='+shelfnumber+'&confirm=1&' + vshelf);
}
}
});
$("#z3950submit").click(function(){
PopupZ3950();
return false;
});
$("#searchheader").on("click",".placehold", function(){
$("#holdFor").val("");
placeHold();
$(".btn-group").removeClass("open");
return false;
});
$(".placeholdfor").click(function(){
holdForPatron();
$(".btn-group").removeClass("open");
return false;
});
$("#forgetholdfor").click(function(){
forgetPatron();
$(".btn-group").removeClass("open");
return false;
});
$('#sortbyform').find("input:submit").hide();
$('#sort_by').change(function() {
$('#sortbyform').submit();
});
var param1 = "<label for=\"addto\">"+_("Add to:")+"<\/label><select name=\"addto\" id=\"addto\"><option value=\"\"><\/option>";
[% IF ( intranetbookbag ) %] param1 += "<option value=\"addtocart\">"+_("Cart")+"<\/option>"; [% END %]
[% IF Koha.Preference('virtualshelves') %]
[% IF add_to_some_private_shelves.count %]
param1 += "<optgroup label=\""+_("Your lists:")+"\">";
[% SET number_of_private_shelves = 0 %]
[% FOREACH s IN add_to_some_private_shelves %]
[% IF shelfnumber != s.shelfnumber %]
param1 += "<option id=\"s[% s.shelfnumber %]\" value=\"addtolist\">[% s.shelfname |html %]<\/option>";
[% SET number_of_private_shelves = number_of_private_shelves + 1 %]
[% IF number_of_private_shelves == 10 %][% LAST %][% END %]
[% END %]
[% END %]
param1 += "<\/optgroup>";
[% END %]
[% IF add_to_some_public_shelves.count %]
param1 += "<optgroup label=\""+_("Public lists:")+"\">";
[% SET number_of_public_shelves = 0 %]
[% FOREACH s IN add_to_some_public_shelves %]
[% IF shelfnumber != s.shelfnumber %]
param1 += "<option id=\"s[% s.shelfnumber %]\" value=\"addtolist\">[% s.shelfname |html %]<\/option>";
[% SET number_of_public_shelves = number_of_public_shelves + 1 %]
[% IF number_of_public_shelves == 10 %][% LAST %][% END %]
[% END %]
[% END %]
param1 += "<\/optgroup>";
[% END %]
[% IF ( add_to_some_private_shelves and add_to_some_private_shelves.count > 10 ) or ( add_to_some_public_shelves and add_to_some_public_shelves.count > 10 ) %]
param1 += "<option value=\"morelists\">[ "+_("More lists")+" ]<\/option>";
[% END %]
param1 +="<option value=\"newlist\">"+_("[ New list ]")+"<\/option>"
[% END %]
param1 += "<\/select> <input id=\"cartsubmit\" type=\"submit\" class=\"submit\" value=\""+_("Save")+"\" />";
$('#sortsubmit').hide();
$("span.clearall").html("<a id=\"CheckNone\" href=\"#\">"+_("Clear all")+"<\/a>");
$("span.checkall").html("<a id=\"CheckAll\" href=\"#\">"+_("Select all")+"<\/a>");
$("span.addto").html(param1);
$("#addto").change(function(){
cartList();
});
$(".addto").find("input:submit").click(function(){
cartList();
return false;
});
$("#tagsel_span").html("<input id=\"tagsel_tag\" class=\"submit\" type=\"submit\" value=\"Tag\"/>");
$("#selection_ops").show();
$(".selection").show();
[% IF ( query_desc ) %]
toHighlight = $("p,span.results_summary,a.title");
@ -162,8 +112,14 @@ $('#sort_by').change(function() {
q_array = q_array.splice(0,-1);
}
highlightOn();
$("#highlight_toggle_on" ).hide().click(function() {highlightOn() ;});
$("#highlight_toggle_off").show().click(function() {highlightOff();});
$("#highlight_toggle_on" ).hide().click(function(e) {
e.preventDefault();
highlightOn();
});
$("#highlight_toggle_off").show().click(function(e) {
e.preventDefault();
highlightOff();
});
[% END %]
[% IF (SEARCH_RESULTS) %]
@ -299,11 +255,12 @@ function GetZ3950Terms(){
return strQuery;
}
var holdFor = function (){
function holdfor(){
$("#holdFor").val("");
placeHold();
}
var holdForPatron = function () {
function holdForPatron() {
$("#holdFor").val("[% holdfor_cardnumber %]");
placeHold();
}
@ -343,28 +300,14 @@ var holdForPatron = function () {
[% END %]
[% IF ( total ) %]
<h3>
[% total %] result(s) found [% IF ( query_desc ) %]for <span class="results_query_desc">'[% query_desc |html %]'</span>[% END %][% IF limit_desc %]&nbsp;with limit(s): <span class="results_limit_desc">'[% limit_desc | html %]'</span>[% END %][% IF ( LibraryName ) %] in [% LibraryName %] Catalog[% END %].
</h3>
<div id="searchheader">
<form action="/cgi-bin/koha/catalogue/search.pl" method="get" id="sortbyform">
[% IF ( searchdesc ) %]
[% FOREACH QUERY_INPUT IN QUERY_INPUTS %]
<input type="hidden" name="[% QUERY_INPUT.input_name |html %]" value="[% QUERY_INPUT.input_value |html %]"/>
[% END %]
[% FOREACH LIMIT_INPUT IN LIMIT_INPUTS %]
<input type="hidden" name="[% LIMIT_INPUT.input_name |html %]" value="[% LIMIT_INPUT.input_value |html %]"/>
[% END %]
[% END %]
<!-- RE-SORT START -->
<label for="sort_by">Sort By: </label>
<select id="sort_by" name="sort_by">
[% INCLUDE 'resort_form.inc' %]
</select>
<input type="submit" value="Go" />
<!-- RESORT END -->
</form>
<h3>
[% total %] result(s) found [% IF ( query_desc ) %]for <span style="font-weight: bold;">'[% query_desc |html %]'</span>[% END %][% IF limit_desc %]&nbsp;with limit(s): <span style="font-weight: bold;">'[% limit_desc | html %]'</span>[% END %][% IF ( LibraryName ) %] in [% LibraryName %] Catalog[% END %].<br />&nbsp;
</h3>
<div id="selection_ops" class="cartlist" style="display:none">
<div id="selection_ops">
<a href="#" id="select_all"><i class="fa fa-check"></i> Select all</a>
|
<a href="#" id="clear_all"><i class="fa fa-remove"></i> Clear all</a>
@ -372,7 +315,59 @@ var holdForPatron = function () {
<a href="#" class="highlight_toggle" id="highlight_toggle_off">Unhighlight</a>
<a href="#" class="highlight_toggle" id="highlight_toggle_on">Highlight</a>
|
<span class="addto"></span>
[% IF ( intranetbookbag ) %]
<div class="btn-group">
<a id="cartsubmit" class="btn btn-default btn-xs" href="#"><i class="fa fa-shopping-cart"></i> Add to cart</a>
</div>
[% END %]
[% IF Koha.Preference('virtualshelves') %]
<div class="btn-group">
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-list"></i> Add to list <span class="caret"></span>
</button>
<ul class="dropdown-menu">
[% IF add_to_some_private_shelves.count %]
<li class="dropdown-header">Your lists</li>
[% SET number_of_private_shelves = 0 %]
[% FOREACH s IN add_to_some_private_shelves %]
[% IF shelfnumber != s.shelfnumber %]
<li>
<a href="#" class="addtolist" data-shelfnumber="[% s.shelfnumber %]">[% s.shelfname |html %]</a>
</li>
[% SET number_of_private_shelves = number_of_private_shelves + 1 %]
[% IF number_of_private_shelves == 10 %][% LAST %][% END %]
[% END %]
[% END %]
[% END %]
[% IF add_to_some_public_shelves.count %]
<li class="dropdown-header">Public lists</li>
[% SET number_of_public_shelves = 0 %]
[% FOREACH s IN add_to_some_public_shelves %]
[% IF shelfnumber != s.shelfnumber %]
<li>
<a href="#" data-shelfnumber="[% s.shelfnumber %]" class="addtolist">[% s.shelfname |html %]</a>
</li>
[% SET number_of_public_shelves = number_of_public_shelves + 1 %]
[% IF number_of_public_shelves == 10 %][% LAST %][% END %]
[% END %]
[% END %]
[% END %]
<li role="separator" class="divider"></li>
[% IF add_to_some_private_shelves.count > 10 or add_to_some_public_shelves.count > 10 %]
<li>
<a href="#" class="addtolist morelists">More lists</a>
</li>
[% END %]
<li>
<a href="#" class="addtolist newlist">New list</a>
</li>
</ul>
</div>
[% END %]
[% IF ( CAN_user_reserveforothers && DisplayMultiPlaceHold ) %]
[% IF ( holdfor ) %]
<div id="placeholdc" class="btn-group">
@ -393,7 +388,110 @@ var holdForPatron = function () {
[% END %]
[% IF ( CAN_user_editcatalogue_edit_catalogue ) %] <div class="btn-group"><a class="btn btn-default btn-xs" id="z3950submit" href="#"><i class="fa fa-search"></i> Z39.50/SRU search</a></div>[% END %]
[% IF ( searchdesc ) %]
[% BLOCK sort_search_query ~%]
[% FOREACH QUERY_INPUT IN QUERY_INPUTS ~%]
&amp;[% QUERY_INPUT.input_name |html %]=[% QUERY_INPUT.input_value |html %]
[%~ END %]
[% FOREACH LIMIT_INPUT IN LIMIT_INPUTS ~%]
&amp;[% LIMIT_INPUT.input_name |html %]=[% LIMIT_INPUT.input_value |html %]
[%~ END %]
[%~ END %]
[% END %]
<div class="btn-group">
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Sort <span class="caret"></span>
</button>
<ul class="dropdown-menu">
[% IF ( sort_by == "relevance_dsc" ) %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=relevance[% PROCESS sort_search_query %]"><i class="fa fa-check"></i> Relevance</a></li>
[% ELSE %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=relevance[% PROCESS sort_search_query %]">Relevance</a></li>
[% END %]
<li class="dropdown-header">Popularity</li>
[% IF ( sort_by == "popularity_dsc" ) %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=popularity_dsc[% PROCESS sort_search_query %]"><i class="fa fa-check"></i> Popularity (most to least)</a></li>
[% ELSE %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=popularity_dsc[% PROCESS sort_search_query %]">Popularity (most to least)</a></li>
[% END %]
[% IF ( sort_by == "popularity_asc" ) %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=popularity_asc[% PROCESS sort_search_query %]"><i class="fa fa-check"></i> Popularity (least to most)</a></li>
[% ELSE %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=popularity_asc[% PROCESS sort_search_query %]">Popularity (least to most)</a></li>
[% END %]
<li class="dropdown-header">Author</li>
[% IF ( sort_by == "author_az" || sort_by == "author_asc" ) %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=author_a[% PROCESS sort_search_query %]z"><i class="fa fa-check"></i> Author (A-Z)</a></li>
[% ELSE %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=author_az[% PROCESS sort_search_query %]">Author (A-Z)</a></li>
[% END %]
[% IF ( sort_by == "author_za" || sort_by == "author_dsc" ) %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=author_za[% PROCESS sort_search_query %]"><i class="fa fa-check"></i> Author (Z-A)</a></li>
[% ELSE %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=author_za[% PROCESS sort_search_query %]">Author (Z-A)</a></li>
[% END %]
<li class="dropdown-header">Call number</li>
[% IF ( sort_by == "call_number_asc" ) %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=call_number_asc[% PROCESS sort_search_query %]"><i class="fa fa-check"></i> Call Number (0-9 to A-Z)</a></li>
[% ELSE %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=call_number_asc[% PROCESS sort_search_query %]">Call Number (0-9 to A-Z)</a></li>
[% END %]
[% IF ( sort_by == "call_number_dsc" ) %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=call_number_dsc[% PROCESS sort_search_query %]"><i class="fa fa-check"></i> Call number (Z-A to 9-0)</a></li>
[% ELSE %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=call_number_dsc[% PROCESS sort_search_query %]">Call number (Z-A to 9-0)</a></li>
[% END %]
<li class="dropdown-header">Dates</li>
[% IF ( sort_by == "pubdate_dsc" ) %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=pubdate_dsc[% PROCESS sort_search_query %]"><i class="fa fa-check"></i> Publication/Copyright date: newest to oldest</a></li>
[% ELSE %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=pubdate_dsc[% PROCESS sort_search_query %]">Publication/Copyright date: newest to oldest</a></li>
[% END %]
[% IF ( sort_by == "pubdate_asc" ) %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=pubdate_asc[% PROCESS sort_search_query %]"><i class="fa fa-check"></i> Publication/Copyright date: oldest to newest</a></li>
[% ELSE %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=pubdate_asc[% PROCESS sort_search_query %]">Publication/Copyright date: oldest to newest</a></li>
[% END %]
[% IF ( sort_by == "acqdate_dsc" ) %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=acqdate_dsc[% PROCESS sort_search_query %]"><i class="fa fa-check"></i> Acquisition date: newest to oldest</a></li>
[% ELSE %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=acqdate_dsc[% PROCESS sort_search_query %]">Acquisition date: newest to oldest</a></li>
[% END %]
[% IF ( sort_by == "acqdate_asc" ) %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=acqdate_asc[% PROCESS sort_search_query %]"><i class="fa fa-check"></i> Acquisition date: oldest to newest</a></li>
[% ELSE %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=acqdate_asc[% PROCESS sort_search_query %]">Acquisition date: oldest to newest</a></li>
[% END %]
<li class="dropdown-header">Title</li>
[% IF ( sort_by == "title_az" || sort_by == "title_asc" ) %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=title_az[% PROCESS sort_search_query %]"><i class="fa fa-check"></i> Title (A-Z)</a></li>
[% ELSE %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=title_az[% PROCESS sort_search_query %]">Title (A-Z)</a></li>
[% END %]
[% IF ( sort_by == "title_za" || sort_by == "title_dsc" ) %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=title_za[% PROCESS sort_search_query %]"><i class="fa fa-check"></i> Title (Z-A)</a></li>
[% ELSE %]
<li><a href="/cgi-bin/koha/catalogue/search.pl?sort_by=title_za[% PROCESS sort_search_query %]">Title (Z-A)</a></li>
[% END %]
</ul>
</div>
</div>
</div>
[% ELSE %]
<div id="searchheader">

View File

@ -439,10 +439,11 @@ function vShelfAdd(biblist) {
function showCart(){
var position = $("#cartmenulink").offset();
var toolbarh = $(".floating").outerHeight();
var scrolld = $(window).scrollTop();
var top = position.top + $("#cartmenulink").outerHeight();
if( scrolld > top ){
top = scrolld + 15;
top = scrolld + toolbarh + 15;
}
var left = position.left;
$("#cartDetails").css("position","absolute").css("top",top);