StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-27 15:50:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(stickyHeader): ♻️ create sticky sentinel in JS instead

Browse source 
It is only used for sticky header which requires JS, we should just create it in JS
This commit is contained in:
alistair3149 2024-07-02 19:20:17 -04:00
parent d71ee758f4
commit 7ec0ae5b8e
No known key found for this signature in database
2 changed files with 6 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
resources/skins.citizen.scripts/stickyHeader.js
View file

@ -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;
}

1
templates/PageHeader.mustache
View file

@ -2,4 +2,3 @@
{{#data-page-heading}}{{>PageHeading}}{{/data-page-heading}}
{{>PageTools}}
</header>
<div id="citizen-page-header-sticky-sentinel"></div>