From 14a4b61acbb312f40c8ecb91fecb1681ec5c2a8f Mon Sep 17 00:00:00 2001
From: Lucas Gass <lucas@bywatersolutions.com>
Date: Fri, 26 Apr 2024 17:37:52 +0000
Subject: [PATCH] Bug 36694: Remove HC sticky from OPAC pages

---
 koha-tmpl/intranet-tmpl/prog/js/staff-global.js          | 2 +-
 koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss          | 6 ++++++
 koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt  | 8 +-------
 koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt | 9 +--------
 koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt | 9 +--------
 koha-tmpl/opac-tmpl/bootstrap/js/global.js               | 9 +++++++++
 6 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
index 9a4b3cb6fc..6ee9a8183b 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
@@ -61,7 +61,7 @@ $.fn.selectTabByID = function (tabID) {
 
 $(document).ready(function () {
     //check if sticky element is stuck, if so add floating class
-    if ( $('#toolbar.sticky').length ) {
+    if ( $('.sticky').length ) {
       const observer = new IntersectionObserver(
         ([e]) => e.target.classList.toggle('floating', e.intersectionRatio < 1),
         {threshold: [1]}
diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index a3884592c9..ba6fdb2826 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -2977,6 +2977,12 @@ $star-selected: #EDB867;
     margin-top: 30px;
 }
 
+.sticky {
+    position: sticky;
+    top: -1px;
+    z-index: 999;
+}
+
 .chocolat-wrapper {
     z-index: 1050;
 
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt
index 36915017ab..c281c99686 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt
@@ -19,7 +19,7 @@
                 <div class="col">
                     <div id="userbasket" class="maincontent">
                         <h1>Your cart</h1>
-                        <div id="floating">
+                        <div id="floating" class="sticky">
                             <div id="toolbar" class="toolbar noprint">
                                 [% IF ( verbose ) %]
                                     <a href="opac-basket.pl" class="btn btn-link btn-sm brief"><i class="fa fa-fw fa-search-minus" aria-hidden="true"></i> Brief display</a>
@@ -364,7 +364,6 @@
 [% INCLUDE 'opac-bottom.inc' %]
 
 [% BLOCK jsinclude %]
-    [% Asset.js("lib/hc-sticky/hc-sticky.js") | $raw %]
         [% INCLUDE 'datatables.inc' %]
         <script>
             [% IF ( TagsInputEnabled && loggedinusername ) %]
@@ -522,11 +521,6 @@
                 });
                 enableCheckboxActions();
 
-                Sticky = $("#floating");
-                Sticky.hcSticky({
-                    stickTo: "#userbasket",
-                    stickyClass: "floating"
-                });
             });
 
             function enableCheckboxActions(){
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
index 38b4b97fe1..3658776b50 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
@@ -155,7 +155,7 @@
                                     [% END %]
                                 [% END # IF /searchdesc %]
 
-                                <div id="floating">
+                                <div id="floating" class="sticky">
                                     <div id="toolbar" class="toolbar row align-items-center">
                                         <div id="top-pages" class="col">
                                             [% INCLUDE 'page-numbers.inc' %]
@@ -571,7 +571,6 @@
     [% END %]
     [% IF ( OverDriveEnabled ) %][% Asset.js("js/overdrive.js") | $raw %][% END %]
     [% Asset.js("js/authtoresults.js") | $raw %]
-    [% Asset.js("lib/hc-sticky/hc-sticky.js") | $raw %]
     [% IF ( OpacHighlightedWords ) %]
         [% Asset.js("lib/jquery/plugins/jquery.highlight-5.js") | $raw %]
     [% END %]
@@ -903,12 +902,6 @@
                 if (e.keyCode == 13) { e.preventDefault(); }
             });
 
-            Sticky = $("#floating");
-            Sticky.hcSticky({
-                stickTo: ".searchresults",
-                stickyClass: "floating"
-            });
-
         });
     </script>
 [% END %]
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 0adf950810..b69a5f433e 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
@@ -219,7 +219,7 @@
                         [% IF ( itemsloop ) %]
                             [% SET contents = shelf.get_contents %]
                             [% IF ( contents.count ) %]<p>This list contains [% contents.count | html %] titles</p>[% END %]
-                            <div id="floating">
+                            <div id="floating" class="sticky">
                                 <div id="toolbar" class="toolbar clearfix">
                                     <div class="list-actions">
                                         <a class="btn btn-link newshelf" href="/cgi-bin/koha/opac-shelves.pl?op=add_form"><i class="fa fa-fw fa-plus" aria-hidden="true"></i> New list</a> <span class="sep">|</span>
@@ -832,7 +832,6 @@
 
 [% INCLUDE 'opac-bottom.inc' %]
 [% BLOCK jsinclude %]
-[% Asset.js("lib/hc-sticky/hc-sticky.js") | $raw %]
 [% IF OpenLibraryCovers || OpenLibrarySearch %]
     [% Asset.js("js/openlibrary.js") | $raw %]
 [% END %]
@@ -1048,12 +1047,6 @@ $(function() {
 
     AdjustRemark();
 
-    Sticky = $("#floating");
-    Sticky.hcSticky({
-        stickTo: "#usershelves",
-        stickyClass: "floating"
-    });
-
     [% IF itemsloop %]
         sortMenu( $("#sorting-form") );
 
diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/global.js b/koha-tmpl/opac-tmpl/bootstrap/js/global.js
index 83b21779ae..6816ae0706 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/js/global.js
+++ b/koha-tmpl/opac-tmpl/bootstrap/js/global.js
@@ -212,6 +212,15 @@ var facetHandler = function(e){
 };
 
 $(document).ready(function(){
+    //check if sticky element is stuck, if so add floating class
+    if ( $('.sticky').length ) {
+      const observer = new IntersectionObserver(
+        ([e]) => e.target.classList.toggle('floating', e.intersectionRatio < 1),
+        {threshold: [1]}
+      );
+
+      observer.observe(document.querySelector('.sticky'));
+    }
     $("html").removeClass("no-js").addClass("js");
     $(".close").click(function(){
         window.close();
-- 
2.30.2