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

feat: ✨ improve scrolling performance

Browse source
This commit is contained in:
alistair3149 2024-05-25 19:26:38 -04:00
parent ae6d207fb4
commit 27bca0fc66
No known key found for this signature in database
2 changed files with 34 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
resources/skins.citizen.scripts/scrollObserver.js
View file

@ -1,5 +1,5 @@
/**
* Create an observer based vertical scroll direction
* Create an observer based vertical scroll direction with debouncing
*
* @param {Function} onScrollDown functionality for when viewport is scrolled down
* @param {Function} onScrollUp functionality for when viewport is scrolled up
@ -7,8 +7,6 @@
* @return {void}
*/
function initDirectionObserver( onScrollDown, onScrollUp, threshold ) {
const throttle = require( 'mediawiki.util' ).throttle;
let lastScrollTop = window.scrollY;
const onScroll = () => {
@ -26,7 +24,8 @@ function initDirectionObserver( onScrollDown, onScrollUp, threshold ) {
lastScrollTop = scrollTop;
};
window.addEventListener( 'scroll', throttle( onScroll, 250 ) );
const debouncedOnScroll = mw.util.debounce( onScroll, 100 );
window.addEventListener( 'scroll', mw.util.throttle( debouncedOnScroll, 250 ) );
}
/**

58
resources/skins.citizen.scripts/skin.js
View file

@ -1,3 +1,8 @@
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';
/**
* Wait for first paint before calling this function.
* (see T234570#5779890, T246419).
@ -10,40 +15,39 @@ function enableCssAnimations( document ) {
}
/**
* Add a class to indicate that sticky header is active
* Initializes the sticky header functionality by setting up scroll observers and intersection observers.
*
* @param {Document} document
* @return {void}
* @param {Document} document - The document object representing the webpage.
*/
function initStickyHeader( document ) {
const scrollObserver = require( './scrollObserver.js' );
const { initDirectionObserver, initIntersectionObserver } = require( './scrollObserver.js' );
// Detect scroll direction and add the right class
scrollObserver.initDirectionObserver(
() => {
document.body.classList.remove( 'citizen-scroll--up' );
document.body.classList.add( 'citizen-scroll--down' );
},
() => {
document.body.classList.remove( 'citizen-scroll--down' );
document.body.classList.add( 'citizen-scroll--up' );
},
10
);
const toggleScrollClass = ( removeClass, addClass ) => {
return () => {
window.requestAnimationFrame( () => {
document.body.classList.remove( removeClass );
document.body.classList.add( addClass );
} );
};
};
const sentinel = document.getElementById( 'citizen-page-header-sticky-sentinel' );
const addScrollDownClass = toggleScrollClass( SCROLL_UP_CLASS, SCROLL_DOWN_CLASS );
const addScrollUpClass = toggleScrollClass( SCROLL_DOWN_CLASS, SCROLL_UP_CLASS );
const toggleStickyClass = () => {
return ( state ) => {
window.requestAnimationFrame( () => {
document.body.classList.toggle( STICKY_CLASS, state );
} );
};
};
initDirectionObserver( addScrollDownClass, addScrollUpClass, 10 );
const sentinel = document.getElementById( STICKY_SENTINEL_ID );
// In some pages we use display:none to disable the sticky header
// Do not start observer if it is set to display:none
if ( sentinel && getComputedStyle( sentinel ).getPropertyValue( 'display' ) !== 'none' ) {
const observer = scrollObserver.initIntersectionObserver(
() => {
document.body.classList.add( 'citizen-page-header--sticky' );
},
() => {
document.body.classList.remove( 'citizen-page-header--sticky' );
}
);
const observer = initIntersectionObserver( toggleStickyClass( true ), toggleStickyClass( false ) );
observer.observe( sentinel );
}
}