From f8c0fee7bb9c0031ebd713f5e3e3b668f40ee704 Mon Sep 17 00:00:00 2001 From: Owen Leonard <oleonard@myacpl.org> Date: Thu, 1 Jun 2017 12:19:46 +0000 Subject: [PATCH] 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 --- koha-tmpl/intranet-tmpl/prog/css/staff-global.css | 18 ++ .../prog/en/modules/catalogue/results.tt | 310 ++++++++++++++------- koha-tmpl/intranet-tmpl/prog/js/basket.js | 3 +- 3 files changed, 224 insertions(+), 107 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css index 784fc3e..d89f13f 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css +++ b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css @@ -1553,6 +1553,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; @@ -2487,6 +2499,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; } diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tt index 29b70a4..b20150e 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tt @@ -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 %] 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 %] with limit(s): <span style="font-weight: bold;">'[% limit_desc | html %]'</span>[% END %][% IF ( LibraryName ) %] in [% LibraryName %] Catalog[% END %].<br /> - </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 ~%] + &[% QUERY_INPUT.input_name |html %]=[% QUERY_INPUT.input_value |html %] + [%~ END %] + [% FOREACH LIMIT_INPUT IN LIMIT_INPUTS ~%] + &[% 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"> diff --git a/koha-tmpl/intranet-tmpl/prog/js/basket.js b/koha-tmpl/intranet-tmpl/prog/js/basket.js index 1329f7b..8a255ab 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/basket.js +++ b/koha-tmpl/intranet-tmpl/prog/js/basket.js @@ -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); -- 2.1.4