Bug 23915: Replace OPAC list sort menu with Bootstrap menu button

This patch adds JavaScript to the list contents page which converts the
resort form's <select> menu into a Bootstrap dropdown menu. This allows
for a more compact and consistent display.

To test, apply the patch and regenerate the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

View a list in the OPAC. The toolbar of list controls ("New list,"
"Download list," etc.) should have a similary-styled "Sort" button. Each
sorting option should work correctly.

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index da7a049..eabc76a 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -24,11 +24,8 @@ $footer-height: 45px;
 }
 
 .js {
-    .dateformat {
-        display: none;
-    }
-
-    #sortsubmit {
+    .dateformat,
+    #sorting-form {
         display: none;
     }
 }
@@ -609,6 +606,29 @@ th {
     color: #333;
 }
 
+/* Add style for Bootstrap dropdown-header class */
+.dropdown-header {
+    border-top: 1px solid #eee;
+    color: #000;
+    display: block;
+    font-size: 90%;
+    font-weight: 700;
+    line-height: 1.42857143;
+    padding: 3px 20px;
+    padding-left: 10px;
+    white-space: nowrap;
+}
+
+.btn-group.open {
+    .btn-link {
+        &.dropdown-toggle {
+            background-image: none;
+            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
+        }
+    }
+}
+
+
 .breadcrumb {
     background-color: #F0F3F3;
     font-size: 85%;
@@ -1361,6 +1381,10 @@ div {
                 border-left: 0;
             }
         }
+
+        &.dropdown-header {
+            display: block;
+        }
     }
 
     ul {

diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
index cc1cfa6..424ae63 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
@@ -247,26 +247,26 @@
                                         </optgroup>
                                         <optgroup label="Copyright date">
                                             [% IF sortfield == 'copyrightdate' && direction == 'asc' %]
-                                                <option value="copyrightdate:asc" selected="selected">Copyright date (newest to oldest)</option>
+                                                <option value="copyrightdate:desc" selected="selected">Copyright date (newest to oldest)</option>
                                             [% ELSE %]
-                                                <option value="copyrightdate:asc">Copyright date (newest to oldest)</option>
+                                                <option value="copyrightdate:desc">Copyright date (newest to oldest)</option>
                                             [% END %]
                                             [% IF sortfield == 'copyrightdate' && direction == 'desc' %]
-                                                <option value="copyrightdate:desc" selected="selected">Copyright date (oldest to newest)</option>
+                                                <option value="copyrightdate:asc" selected="selected">Copyright date (oldest to newest)</option>
                                             [% ELSE %]
-                                                <option value="copyrightdate:desc">Copyright date (oldest to newest)</option>
+                                                <option value="copyrightdate:asc">Copyright date (oldest to newest)</option>
                                             [% END %]
                                         </optgroup>
                                         <optgroup label="Date added">
                                             [% IF sortfield == "dateadded" && direction == 'asc' %]
-                                                <option value="dateadded:asc" selected="selected">Date added (newest to oldest)</option>
+                                                <option value="dateadded:desc" selected="selected">Date added (newest to oldest)</option>
                                             [% ELSE %]
-                                                <option value="dateadded:asc">Date added (newest to oldest)</option>
+                                                <option value="dateadded:desc">Date added (newest to oldest)</option>
                                             [% END %]
                                             [% IF sortfield == "dateadded" && direction == 'desc' %]
-                                                <option value="dateadded:desc" selected="selected">Date added (oldest to newest)</option>
+                                                <option value="dateadded:asc" selected="selected">Date added (oldest to newest)</option>
                                             [% ELSE %]
-                                                <option value="dateadded:desc">Date added (oldest to newest)</option>
+                                                <option value="dateadded:asc">Date added (oldest to newest)</option>
                                             [% END %]
                                         </optgroup>
                                     </select>
@@ -929,8 +929,6 @@ $(function() {
         KOHA.coce.getURL('[% Koha.Preference('CoceHost') | html %]', '[% Koha.Preference('CoceProviders') | html %]');
     [% END %]
 
-    $('#sort-submit').hide();
-
     [% IF print %]
         window.print();
         window.onafterprint = function () {
@@ -947,12 +945,35 @@ $(function() {
         stickyClass: "floating"
     });
 
+    sortMenu( $("#sorting-form") );
+
     $("#sortfield").on("change", function(){
         $('#sorting-form').submit();
     });
 
 }); // document.ready
 
+function sortMenu( sorting_form ){
+    var shelfnumber = sorting_form.find("input[name='shelfnumber']").val();
+    var sort_link = "/cgi-bin/koha/opac-shelves.pl?op=view&amp;shelfnumber=" + shelfnumber + "&sortfield=";
+    var menu = "<div class=\"btn-group\"><button type=\"button\" class=\"btn btn-link dropdown-toggle\" data-toggle=\"dropdown\" id=\"sortmenu\" aria-haspopup=\"true\" aria-expanded=\"false\"><i class=\"fa fa-sort\"></i> " + _("Sort") + "</span></button><ul class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"sortmenu\">";
+    $("#sortfield").children().each(function(){
+        if( $(this)[0].tagName.toUpperCase() == "OPTION" ){
+            menu += "<li><a href=\"" + sort_link + $(this).val() + "\">" + $(this).text() + "</a></li>";
+        } else if( $(this)[0].tagName.toUpperCase() == "OPTGROUP" ){
+            menu += "<li class=\"dropdown-header\">" + $(this).attr("label") + "</li>";
+            $(this).children().each(function(){
+                if( $(this)[0].tagName.toUpperCase() == "OPTION" ){
+                    menu += "<li><a href=\"" + sort_link + $(this).val() + "\">" + $(this).text() + "</a></li>";
+                }
+            });
+        }
+    });
+    menu += "</ul></div>";
+    $(".list-actions").append( menu );
+    sorting_form.remove();
+}
+
 function AdjustRemark() {
     var category;
     if( $("#category").length > 0 ) {