Bug 19461: Add floating toolbar to staff client catalog search results
authorOwen Leonard <oleonard@myacpl.org>
Thu, 1 Jun 2017 12:19:46 +0000 (12:19 +0000)
committerJonathan Druart <jonathan.druart@bugs.koha-community.org>
Wed, 25 Oct 2017 19:12:53 +0000 (16:12 -0300)
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>
koha-tmpl/intranet-tmpl/prog/css/staff-global.css
koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tt
koha-tmpl/intranet-tmpl/prog/js/basket.js

index 3a26b0d..cf90142 100644 (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;
 }
index 29b70a4..b20150e 100644 (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">
index 1329f7b..8a255ab 100644 (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);