From 7ec0ae5b8ee9b8e318f07791e1fb80e782eaeb9c Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Tue, 2 Jul 2024 19:20:17 -0400 Subject: [PATCH] =?UTF-8?q?refactor(stickyHeader):=20=E2=99=BB=EF=B8=8F=20?= =?UTF-8?q?create=20sticky=20sentinel=20in=20JS=20instead?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It is only used for sticky header which requires JS, we should just create it in JS --- resources/skins.citizen.scripts/stickyHeader.js | 10 ++++++---- templates/PageHeader.mustache | 1 - 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/resources/skins.citizen.scripts/stickyHeader.js b/resources/skins.citizen.scripts/stickyHeader.js index 36e335fc..783a27e2 100644 --- a/resources/skins.citizen.scripts/stickyHeader.js +++ b/resources/skins.citizen.scripts/stickyHeader.js @@ -1,6 +1,5 @@ const SCROLL_DOWN_CLASS = 'citizen-scroll--down'; const SCROLL_UP_CLASS = 'citizen-scroll--up'; -const STICKY_SENTINEL_ID = 'citizen-page-header-sticky-sentinel'; const STICKY_CLASS = 'citizen-page-header--sticky'; const { initDirectionObserver, initIntersectionObserver } = require( './scrollObserver.js' ); @@ -28,11 +27,14 @@ function observeScrollDirection() { * @return {void} */ function init() { - const sentinel = document.getElementById( STICKY_SENTINEL_ID ); - const shouldStickyHeader = sentinel && getComputedStyle( sentinel ).getPropertyValue( 'display' ) !== 'none'; - observeScrollDirection(); + const header = document.querySelector( '.citizen-page-header' ); + const sentinel = document.createElement( 'div' ); + sentinel.id = 'citizen-page-header-sticky-sentinel'; + header.insertAdjacentElement( 'afterend', sentinel ); + + const shouldStickyHeader = getComputedStyle( sentinel ).getPropertyValue( 'display' ) !== 'none'; if ( !shouldStickyHeader ) { return; } diff --git a/templates/PageHeader.mustache b/templates/PageHeader.mustache index 7daf17ae..552304d7 100644 --- a/templates/PageHeader.mustache +++ b/templates/PageHeader.mustache @@ -2,4 +2,3 @@ {{#data-page-heading}}{{>PageHeading}}{{/data-page-heading}} {{>PageTools}} -