From 2e1833b89d04fd48d82dfb52c0ab3b781a41af69 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

Rebased-by: Victor Grousset/tuxayo <victor@tuxayo.net>
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Victor Grousset/tuxayo <victor@tuxayo.net>
---
 koha-tmpl/intranet-tmpl/prog/js/staff-global.js       |  2 +-
 koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss       |  6 ++++++
 .../opac-tmpl/bootstrap/en/modules/opac-basket.tt     |  8 +-------
 .../opac-tmpl/bootstrap/en/modules/opac-results.tt    |  3 +--
 .../opac-tmpl/bootstrap/en/modules/opac-shelves.tt    |  3 +--
 koha-tmpl/opac-tmpl/bootstrap/js/global.js            | 11 ++++++++++-
 6 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
index b6f165c776..ca92dae010 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 e3e16efa7b..108234c5bd 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -2898,6 +2898,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 143cd99827..c4b5ad9bf0 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt
@@ -24,7 +24,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>
@@ -369,7 +369,6 @@
 [% INCLUDE 'opac-bottom.inc' %]
 
 [% BLOCK jsinclude %]
-    [% Asset.js("lib/hc-sticky/hc-sticky.js") | $raw %]
         [% INCLUDE 'datatables.inc' %]
         <script>
             [% IF ( TagsInputEnabled && loggedinusername ) %]
@@ -527,11 +526,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 a8179b0e7a..46bc94ff14 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
@@ -176,7 +176,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' %]
@@ -422,7 +422,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 %]
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 9c85e423c8..d012228a31 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
@@ -228,7 +228,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>
@@ -812,7 +812,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 %]
diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/global.js b/koha-tmpl/opac-tmpl/bootstrap/js/global.js
index dd84b006eb..accdf69986 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/js/global.js
+++ b/koha-tmpl/opac-tmpl/bootstrap/js/global.js
@@ -252,7 +252,16 @@ function setPlaceholder(){
     $("#translControl1").attr("placeholder", search_placeholder );
 }
 
-$(document).ready(function(){
+$(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.46.1