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