Bug 21751: Replace fixFloat with HC-sticky to fix Chrome display

This patch replaces the fixFloat jQuery plugin with a new one: HC-sticky
(https://github.com/somewebmedia/hc-sticky). This plugin provides the
same functionality without the page-reflow problems fixFloat suffers
from.

To test, apply the patch and regenerate the staff client CSS. Test the
behavior of the floating toolbar on these pages:

 - Acquisitions -> Vendor -> Vendor details
 - Acquisitions -> Vendor -> View basket
   - On both these pages, test toolbar behavior before and after
     expanding the "Orders search" options at the top of the page.
 - Administration -> System preferences
 - Authorities -> Create or edit an authority
 - Catalog -> Advanced search
   - Search results
 - Catalog -> Item search
 - Cataloging -> Add or edit a record
   - Open the plugin window for the 008 field
 - Tools -> Label creator -> New label batch -> Add items -> Search ->
   Results
 - Patrons -> New patron
   - Test before and after expanding the patron search options at the
     top of the page
   - Test editing a patron too
 - Tools -> Automatic item modifications by age -> Edit
 - Tools -> Notices & slips -> Edit
 - Lists -> View list

Check that the About page has been updated with information about the
plugin.

Signed-off-by: David Cook <dcook@prosentient.com.au>

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>

gulpfile.js

@@ -52,7 +52,7 @@ gulp.task('build', function() {
     return gulp.src( css_base + "/src/**/*.scss" )
       .pipe(sass( sassOptions ).on('error', sass.logError))
       .pipe(autoprefixer())
-      .pipe(cssnano())
+      .pipe(cssnano({ zindex: false }))
       .pipe(gulp.dest( css_base ));
 });
 

koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss

@@ -1651,6 +1651,16 @@ dd {
     border-radius: 5px 5px 0 0;
     margin: 0;
     padding: 5px;
+
+    .dropdown-menu {
+        border-top-width: 1px;
+        font-size: 13px;
+    }
+
+    &.floating {
+        border-radius: 0;
+        margin-top: 0;
+    }
 }
 
 #disabled {
@@ -3283,18 +3293,6 @@ button,
     padding: 3px 5px;
 }
 
-#toolbar {
-    .dropdown-menu {
-        border-top-width: 1px;
-        font-size: 13px;
-    }
-
-    &.floating {
-        border-radius: 0;
-        margin-top: 0;
-    }
-}
-
 .dropdown-menu {
     border-color: rgba(0, 0, 0, .2);
     border-top: 0;
@@ -3643,6 +3641,7 @@ progress {
 
 .floating {
     box-shadow: 0 3px 2px 0 rgba(0, 0, 0, .5);
+    z-index: 100;
 }
 
 .inline {

koha-tmpl/intranet-tmpl/prog/en/modules/about.tt

@@ -1061,6 +1061,9 @@
 
             <h2>Noto fonts</h2>
             <p><a href="https://github.com/googlei18n/noto-fonts">Noto</a> by Google is a family of fonts licensed under the <a href="http://scripts.sil.org/OFL">SIL Open Font License (OFL) v1.1</a>.</p>
+
+            <h2>HC Sticky</h2>
+            <p><a href="http://somewebmedia.com/hc-sticky/">HC Sticky</a> by Some Web Media is a JavaScript library that makes any element on your page visible while you scroll, licensed under the <a href="https://github.com/somewebmedia/hc-sticky/blob/master/LICENSE">MIT license</a>.</p>
         </div>
 
         <div id="translations">

koha-tmpl/intranet-tmpl/prog/en/modules/acqui/basket.tt

@@ -765,7 +765,7 @@
     [% Asset.js("js/acquisitions-menu.js") | $raw %]
     [% INCLUDE 'datatables.inc' %]
     [% INCLUDE 'columns_settings.inc' %]
-    [% Asset.js("lib/jquery/plugins/jquery.fixFloat.js") | $raw %]
+    [% Asset.js("lib/hc-sticky.js") | $raw %]
     <script>
         function updateColumnsVisibility(visible) {
             if ( visible ) {
@@ -779,8 +779,17 @@
             }
         }
 
+        var Sticky;
+
         $(document).ready(function() {
-            if ( $('#toolbar').length ) {$('#toolbar').fixFloat();}
+            if ( $('#toolbar').length ) {
+                Sticky = $("#toolbar");
+                Sticky.hcSticky({
+                    stickTo: "#yui-main",
+                    stickyClass: "floating"
+                });
+            }
+
             [% UNLESS ( closedate ) %]
                 $('#addtoBasket').on('show', function () {
                    $(this).find(".modal-body").html($(".acqui_basket_add")[0].outerHTML);

koha-tmpl/intranet-tmpl/prog/en/modules/acqui/supplier.tt

@@ -388,7 +388,7 @@
 </div> <!-- /.row -->
 [% MACRO jsinclude BLOCK %]
     [% Asset.js("js/acquisitions-menu.js") | $raw %]
-    [% Asset.js("lib/jquery/plugins/jquery.fixFloat.js") | $raw %]
+    [% Asset.js("lib/hc-sticky.js") | $raw %]
     [% INCLUDE 'datatables.inc' %]
     <script>
         function confirm_deletion() {
@@ -422,6 +422,8 @@
             ev.preventDefault();
         }
 
+        var Sticky;
+
          $(document).ready(function() {
             var contractst = $("#contractst").dataTable($.extend(true, {}, dataTablesDefaults, {
                 "aoColumnDefs": [
@@ -459,7 +461,12 @@
             $('body').on('click', '.contact_claimissues', null, function () {
                 $(this).next('.contact_claimissues_hidden').val($(this).is(':checked') ? '1' : '0');
             });
-            $('#toolbar').fixFloat();
+
+            Sticky = $("#toolbar");
+            Sticky.hcSticky({
+                stickTo: "main",
+                stickyClass: "floating"
+            });
         });
     </script>
 [% END %]

koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tt

@@ -159,14 +159,18 @@
 
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'datatables.inc' %]
-    [% Asset.js("lib/jquery/plugins/jquery.fixFloat.js") | $raw %]
+    [% Asset.js("lib/hc-sticky.js") | $raw %]
     [% Asset.js("lib/jquery/plugins/multiple-select/jquery.multiple.select.js") | $raw %]
     <script>
-        [% UNLESS ( searchfield ) %]$(document).ready(function(){
-                $('#toolbar').fixFloat();
-            });[% END %]
-
+        var Sticky;
         $(document).ready(function(){
+            [% UNLESS ( searchfield ) %]
+                Sticky = $("#toolbar");
+                Sticky.hcSticky({
+                    stickTo: "main",
+                    stickyClass: "floating"
+                });
+            [% END %]
             $("select[multiple='multiple']").multipleSelect( {
                 placeholder: _("Please select ..."),
                 selectAllText: _("Select all"),

koha-tmpl/intranet-tmpl/prog/en/modules/authorities/authorities.tt

@@ -3,7 +3,7 @@
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Authorities &rsaquo; [% IF ( authid ) %]Modify authority #[% authid | html %] ([% authtypetext | html %])[% ELSE %]Adding authority ([% authtypetext | html %])[% END %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
-[% Asset.js("lib/jquery/plugins/jquery.fixFloat.js") | $raw %]
+[% Asset.js("lib/hc-sticky.js") | $raw %]
 [% Asset.js("js/cataloging.js") | $raw %]
 
 <script type="text/javascript">
@@ -11,9 +11,14 @@
     $(window).load(function(){
         $("#loading").hide();
     });
+    var Sticky;
 	 $(document).ready(function() {
         $('#authoritytabs').tabs();
-        $('#toolbar').fixFloat();
+        Sticky = $("#toolbar");
+        Sticky.hcSticky({
+            stickTo: ".main",
+            stickyClass: "floating"
+        });
         $("#addauth").click(function(){
             if(Check()){
                 $("#f").submit();

koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/advsearch.tt

@@ -279,7 +279,7 @@
 </div>
 
 [% MACRO jsinclude BLOCK %]
-    [% Asset.js("lib/jquery/plugins/jquery.fixFloat.js") | $raw %]
+    [% Asset.js("lib/hc-sticky.js") | $raw %]
     <script type="text/JavaScript">
         /**
          *  Function add_field();
@@ -292,10 +292,15 @@
             dad.appendChild(line.cloneNode(true));
             line.removeChild(ButtonPlus);
         }
+        var Sticky;
         $(document).ready(function() {
             $("input[name=q]:eq(0)").focus();
             $('#advsearches').tabs();
-            $('#toolbar').fixFloat();
+            Sticky = $("#toolbar");
+            Sticky.hcSticky({
+                stickTo: ".main",
+                stickyClass: "floating"
+            });
             $("#branchloop").on("change",function(){
                 if( this.value != ""){
                     document.getElementById("categoryloop").disabled=true;

koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/itemsearch.tt

@@ -218,7 +218,7 @@
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'datatables.inc' %]
     [% Asset.js("lib/jquery/plugins/jquery.dataTables.columnFilter.js") | $raw %]
-    [% Asset.js("lib/jquery/plugins/jquery.fixFloat.js") | $raw %]
+    [% Asset.js("lib/hc-sticky.js") | $raw %]
     <script type="text/javascript">
         var authorised_values = [% authorised_values_json | html %];
 
@@ -410,9 +410,13 @@
                 ]
             });
         }
-
+        var Sticky;
         $(document).ready(function () {
-            $('#toolbar').fixFloat();
+            Sticky = $("#toolbar");
+            Sticky.hcSticky({
+                stickTo: "#item-search-block",
+                stickyClass: "floating"
+            });
             // Add the "New field" link.
             var form_field = $('div.form-field-select-text').last()
             var NEW_FIELD = _("New field");

koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tt

@@ -632,7 +632,7 @@
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'browser-strings.inc' %]
     [% Asset.js("js/browser.js") | $raw %]
-    [% Asset.js("lib/jquery/plugins/jquery.fixFloat.js") | $raw %]
+    [% Asset.js("lib/hc-sticky.js") | $raw %]
     [% Asset.js("lib/jquery/plugins/jquery.checkboxes.min.js") | $raw %]
     <script type="text/javascript">
         var MSG_NO_ITEM_SELECTED = _("Nothing is selected.");
@@ -658,10 +658,13 @@
                 verify_images();
             });
         [% END %]
-
+        var Sticky;
         $(document).ready(function() {
-
-            $("#searchheader").fixFloat();
+            Sticky = $("#searchheader");
+            Sticky.hcSticky({
+                stickTo: "#yui-main",
+                stickyClass: "floating"
+            });
 
             $("#cartsubmit").click(function(e){
                 e.preventDefault();

koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt

@@ -4,7 +4,7 @@
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Cataloging &rsaquo; [% IF ( biblionumber ) %]Editing [% title | html %] (Record number [% biblionumber | html %])[% ELSE %]Add MARC record[% END %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
-[% Asset.js("lib/jquery/plugins/jquery.fixFloat.js") | $raw %]
+[% Asset.js("lib/hc-sticky.js") | $raw %]
 [% Asset.js("js/cataloging.js") | $raw %]
 [% INCLUDE 'browser-strings.inc' %]
 [% Asset.js("js/browser.js") | $raw %]
@@ -16,6 +16,7 @@
     $(window).load(function(){
         $("#loading").hide();
     });
+    var Sticky;
 	 $(document).ready(function() {
 
         [% IF bib_doesnt_exist %]
@@ -31,7 +32,11 @@
           $('#addbibliotabs').selectTabByID("#[% tab | html %]");
         [% END %]
 
-        $('#toolbar').fixFloat();
+        Sticky = $("#toolbar");
+        Sticky.hcSticky({
+            stickTo: ".main",
+            stickyClass: "floating"
+        });
 
         /* check cookie to hide/show marcdocs*/
         if($.cookie("marcdocs_[% borrowernumber | html %]") == 'hide'){

koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/value_builder/marc21_field_008.tt

@@ -15,7 +15,7 @@
 </table>
 <h4 id="h4_result">&quot;[% result | html %]&quot;</h4>
 
-<form name="f_pop" id="f_pop" onsubmit="report()" action="">
+<form name="f_pop" id="f_pop" style="display:block" onsubmit="report()" action="">
     <div id="toolbar">
         <div class="btn-group">
             <button type="submit" class="btn btn-default btn-sm"><i class="fa fa-save"></i> Save</button>
@@ -42,11 +42,16 @@
 </form>
 
 [% MACRO jsinclude BLOCK %]
-    [% Asset.js("lib/jquery/plugins/jquery.fixFloat.js") | $raw %]
+    [% Asset.js("lib/hc-sticky.js") | $raw %]
     [% Asset.js("js/xmlControlfield.js") | $raw %]
     <script>
+        var Sticky;
         $(document).ready(function(){
-            $('#toolbar').fixFloat();
+            Sticky = $("#toolbar");
+            Sticky.hcSticky({
+                stickTo: "#f_pop",
+                stickyClass: "floating"
+            });
             $(".close_window").on("click", function(e){
                 e.preventDefault();
                 window.close();

koha-tmpl/intranet-tmpl/prog/en/modules/labels/result.tt

@@ -38,7 +38,7 @@
                 No results found
                 [% END %]
 
-            <form name="resultform" action="">
+            <form name="resultform" action="" style="display:block">
             <div id="toolbar" class="btn-toolbar">
                 <div class="btn-group"><button type="button" class="btn btn-default btn-sm" id="add_items"><i class="fa fa-plus"></i> Add checked</button></div>
                 <div class="btn-group"><a href="#" class="btn btn-default btn-sm close"><i class="fa fa-times-circle"></i> Done</a></div>
@@ -103,10 +103,15 @@
     </div>
 
 [% MACRO jsinclude BLOCK %]
-    [% Asset.js("lib/jquery/plugins/jquery.fixFloat.js") | $raw %]
+    [% Asset.js("lib/hc-sticky.js") | $raw %]
     <script>
+        var Sticky;
         $(document).ready(function(){
-            $("#toolbar").fixFloat();
+            Sticky = $("#toolbar");
+            Sticky.hcSticky({
+                stickTo: "form",
+                stickyClass: "floating"
+            });
             $("#CheckAll").click(function(e){
                 e.preventDefault();
                 $("input[type='checkbox']").prop("checked",true);

koha-tmpl/intranet-tmpl/prog/en/modules/members/memberentrygen.tt

@@ -1141,27 +1141,29 @@
      </div> <!-- /.row -->
 
 [% MACRO jsinclude BLOCK %]
-    [% Asset.js("lib/jquery/plugins/jquery.fixFloat.js") | $raw %]
+    [% Asset.js("lib/hc-sticky.js") | $raw %]
     [% INCLUDE 'calendar.inc' %]
     [% INCLUDE 'str/members-menu.inc' %]
     [% Asset.js("js/members-menu.js") | $raw %]
     <script>
+        function update_cardnumber_warning(size){
+            var max_len = [% maxlength_cardnumber | html %];
+            if ( size >= max_len ) {
+                $("#cn_max").show();
+            } else {
+                $("#cn_max").hide();
+            }
+        }
+        var Sticky;
         $(document).ready(function() {
 
                 $("#saverecord").css({ 'margin-left': 0 });
-                var original_offset = $("#toolbar").position().top;
-                var additional_height = $("#filters").height();
-                $('#toolbar').fixFloat({ 'originalOffset': original_offset });
-                $("#filteraction_on").on("click", function(){
-                    $(window).off('scroll');
-                    $("#toolbar").css({ top: original_offset + additional_height });
-                    $('#toolbar').fixFloat({ 'originalOffset': original_offset + additional_height });
-                });
-                $("#filteraction_off").on("click", function(){
-                    $(window).off('scroll');
-                    $("#toolbar").css({ top: original_offset });
-                    $('#toolbar').fixFloat({ 'originalOffset': original_offset });
-                })
+
+            Sticky = $("#toolbar");
+            Sticky.hcSticky({
+                stickTo: "#yui-main",
+                stickyClass: "floating"
+            });
 
             [% IF categorycode %]
                 update_category_code( "[% categorycode | html %]" );
@@ -1171,18 +1173,7 @@
                     update_category_code( category_code );
                 }
             [% END %]
-        });
 
-        function update_cardnumber_warning(size){
-            var max_len = [% maxlength_cardnumber | html %];
-            if ( size >= max_len ) {
-                $("#cn_max").show();
-            } else {
-                $("#cn_max").hide();
-            }
-        }
-
-        $(document).ready(function() {
             $("#cn_max").hide();
             var content;
             $("#cardnumber").on("keydown", function(e){

koha-tmpl/intranet-tmpl/prog/en/modules/tools/automatic_item_modification_by_age.tt

@@ -229,13 +229,18 @@
 
 [% MACRO jsinclude BLOCK %]
     [% Asset.js("js/tools-menu.js") | $raw %]
-    [% Asset.js("lib/jquery/plugins/jquery.fixFloat.js") | $raw %]
+    [% Asset.js("lib/hc-sticky.js") | $raw %]
     [% Asset.js("js/automatic_item_modification_by_age.js") | $raw %]
     [% IF op == 'edit_form' %]
         <script>
+            var Sticky;
             $(document).ready(function() {
                   [% IF ( op == 'edit_form' ) %]
-                      $('#toolbar').fixFloat();
+                Sticky = $("#toolbar");
+                Sticky.hcSticky({
+                    stickTo: "main",
+                    stickyClass: "floating"
+                });
                   [% END %]
                   [% IF rules.size > 0 %]
                       $("#norules").hide();

koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt

@@ -468,7 +468,7 @@
     [% Asset.js("js/tools-menu.js") | $raw %]
     [% INCLUDE 'datatables.inc' %]
     [% INCLUDE 'columns_settings.inc' %]
-    [% Asset.js("lib/jquery/plugins/jquery.fixFloat.js") | $raw %]
+    [% Asset.js("lib/hc-sticky.js") | $raw %]
     [% Asset.js("lib/jquery/plugins/jquery.insertatcaret.js") | $raw %]
     <script>
         var no_op_set = '[% no_op_set | html %]';

koha-tmpl/intranet-tmpl/prog/en/modules/virtualshelves/shelves.tt

@@ -443,7 +443,7 @@
 
     [% IF op == 'view' %]
         [% Asset.js("lib/jquery/plugins/jquery.checkboxes.min.js") | $raw %]
-        [% Asset.js("lib/jquery/plugins/jquery.fixFloat.js") | $raw %]
+        [% Asset.js("lib/hc-sticky.js") | $raw %]
     [% END %]
     <script>
         var MSG_NO_ITEM_SELECTED = _("Nothing is selected.");
@@ -536,8 +536,13 @@
         [% END %]
 
         [% IF shelf AND op == 'view' %]
+            var Sticky;
             $(document).ready(function(){
-                [% IF ( itemsloop ) %]$('#searchheader').fixFloat();[% END %]
+                Sticky = $("#searchheader");
+                Sticky.hcSticky({
+                    stickTo: "#listform",
+                    stickyClass: "floating"
+                });
                 $("span.clearall").html("<a id=\"CheckNone\" href=\"/cgi-bin/koha/shelves.pl\"><i class=\"fa fa-remove\"></i>"+_(" Clear all")+"<\/a>");
                 $("span.checkall").html("<a id=\"CheckAll\" href=\"/cgi-bin/koha/shelves.pl\"><i class=\"fa fa-check\"></i>"+_(" Select all")+"<\/a>");
                 $("#CheckAll").click(function(){

koha-tmpl/intranet-tmpl/prog/js/letter.js

@@ -30,9 +30,15 @@ function checkCodes( new_lettercode, new_branchcode ){
     });
 }
 
+var Sticky;
+
 $(document).ready(function() {
     if( add_form || copy_form ){
-        $('#toolbar').fixFloat();
+        Sticky = $("#toolbar");
+        Sticky.hcSticky({
+            stickTo: ".main",
+            stickyClass: "floating"
+        });
     }
 
     var ntable = KohaTable("lettert", {

koha-tmpl/intranet-tmpl/prog/js/members-menu.js

@@ -5,6 +5,9 @@ $(document).ready(function(){
         e.preventDefault();
         $('#filters').toggle();
         $('.filteraction').toggle();
+        if (typeof Sticky !== "undefined" && typeof hcSticky === "function") {
+            Sticky.hcSticky('update');
+        }
     });
     if( advsearch ){
         $("#filteraction_on").toggle();

koha-tmpl/intranet-tmpl/prog/js/staff-global.js

@@ -1,4 +1,4 @@
-// staff-global.js
+/* global shortcut delCookie delBasket Sticky */
 if ( KOHA === undefined ) var KOHA = {};
 
 function _(s) { return s; } // dummy function for gettext
@@ -71,6 +71,9 @@ $.fn.selectTabByID = function (tabID) {
     $(".toggle_element").on("click",function(e){
         e.preventDefault();
         $( $(this).data("element") ).toggle();
+        if (typeof Sticky !== "undefined" && typeof hcSticky === "function") {
+            Sticky.hcSticky('update');
+        }
     });
 
     var navmenulist = $("#navmenulist");