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

perf(core): ⚡️ further improvements to scroll and section observers

Browse source
This commit is contained in:
alistair3149 2024-05-25 23:18:18 -04:00
parent af3d72ad75
commit e9289b149a
No known key found for this signature in database
2 changed files with 17 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,21 +1,22 @@
/**
* Create an observer based vertical scroll direction with debouncing
* Initialize a direction observer based on scroll behavior.
*
* @param {Function} onScrollDown functionality for when viewport is scrolled down
* @param {Function} onScrollUp functionality for when viewport is scrolled up
* @param {number} threshold minimum scrolled px to trigger the function
* @return {void}
* @param {Function} onScrollDown - Function to be called when scrolling down.
* @param {Function} onScrollUp - Function to be called when scrolling up.
* @param {number} threshold - The threshold for significant scroll position change.
*/
function initDirectionObserver( onScrollDown, onScrollUp, threshold ) {
let lastScrollTop = window.scrollY;
const onScroll = () => {
// Check if the scroll position has changed significantly
const scrollTop = window.scrollY;
if ( Math.abs( scrollTop - lastScrollTop ) < threshold ) {
return;
}
// Determine scroll direction and trigger appropriate functions
if ( scrollTop > lastScrollTop ) {
onScrollDown();
} else {
@ -24,8 +25,8 @@ function initDirectionObserver( onScrollDown, onScrollUp, threshold ) {
lastScrollTop = scrollTop;
};
const debouncedOnScroll = mw.util.debounce( onScroll, 100 );
window.addEventListener( 'scroll', mw.util.throttle( debouncedOnScroll, 250 ) );
const debouncedOnScroll = mw.util.debounce( mw.util.throttle( onScroll, 250 ), 100 );
window.addEventListener( 'scroll', debouncedOnScroll );
}
/**
@ -38,13 +39,13 @@ function initDirectionObserver( onScrollDown, onScrollUp, threshold ) {
*/
function initIntersectionObserver( onHidden, onVisible ) {
/* eslint-disable-next-line compat/compat */
return new IntersectionObserver( ( entries ) => {
if ( !entries[ 0 ].isIntersecting && entries[ 0 ].boundingClientRect.top < 0 ) {
return new IntersectionObserver( ( [ entry ] ) => {
if ( entry.isIntersecting ) {
// Viewport is within the target element.
onVisible();
} else if ( entry.boundingClientRect.top < 0 ) {
// Viewport has crossed the bottom edge of the target element.
onHidden();
} else {
// Viewport is above the bottom edge of the target element.
onVisible();
}
} );
}

22
resources/skins.citizen.scripts/sectionObserver.js
View file

@ -1,9 +1,3 @@
/**
* Based on Vector
* NOTE: It is kept as an ES6 module because we are dropping ES5 soon.
* But some parts are in ES5 because ResourceLoader is messing up ES6 in 1.35
*/
/** @module SectionObserver */
/**
@ -33,9 +27,6 @@
* `props.onIntersection` callback will be fired with the corresponding section
* as a param.
*
* Because sectionObserver uses a scroll event listener (in combination with
* IntersectionObserver), the changes are throttled to a default maximum rate of
* 200ms so that the main thread is not excessively blocked.
* IntersectionObserver is used to asynchronously calculate the positions of the
* observed tags off the main thread and in a manner that does not cause
* expensive forced synchronous layouts.
@ -45,11 +36,7 @@
*/
function sectionObserver( props ) {
props = Object.assign( {
topMargin: 0,
throttleMs: 200,
onIntersection: () => {}
}, props );
const { topMargin = 0, onIntersection = () => {} } = props;
let /** @type {boolean} */ inThrottle = false;
let /** @type {HTMLElement | undefined} */ current;
@ -57,7 +44,6 @@ function sectionObserver( props ) {
const observer = new IntersectionObserver( ( entries ) => {
let /** @type {IntersectionObserverEntry | undefined} */ closestNegativeEntry;
let /** @type {IntersectionObserverEntry | undefined} */ closestPositiveEntry;
const topMargin = /** @type {number} */ ( props.topMargin );
entries.forEach( ( entry ) => {
const top =
@ -90,7 +76,7 @@ function sectionObserver( props ) {
// If the intersection is new, fire the `onIntersection` callback.
if ( current !== closestTag ) {
props.onIntersection( closestTag );
onIntersection( closestTag );
}
current = closestTag;
@ -119,10 +105,10 @@ function sectionObserver( props ) {
if ( !inThrottle ) {
inThrottle = true;
setTimeout( () => {
requestAnimationFrame( () => {
calcIntersection();
inThrottle = false;
}, props.throttleMs );
} );
}
}