mediawiki-skins-Vector/resources/skins.vector.js/scrollObserver.js
Jon Robson c3e57e0ecd Merge skins.vector.es6 into skins.vector.js
With T178356 ES6 is the default, so these can now be
managed in the same module. Keeping them in the same module
will hopefully allow us to make more optimizations on the long
term.

Change-Id: I3fe9e50143b85b4cdc3d9171a60c3720a7c26b4b
2023-04-11 23:18:46 +00:00

48 lines
1.3 KiB
JavaScript

const
SCROLL_TITLE_HOOK = 'vector.page_title_scroll',
SCROLL_TITLE_CONTEXT_ABOVE = 'scrolled-above-page-title',
SCROLL_TITLE_CONTEXT_BELOW = 'scrolled-below-page-title',
SCROLL_TITLE_ACTION = 'scroll-to-top';
/**
* Fire a hook to be captured by WikimediaEvents for scroll event logging.
*
* @param {string} direction the scroll direction
*/
function firePageTitleScrollHook( direction ) {
if ( direction === 'down' ) {
mw.hook( SCROLL_TITLE_HOOK ).fire( {
context: SCROLL_TITLE_CONTEXT_BELOW
} );
} else {
mw.hook( SCROLL_TITLE_HOOK ).fire( {
context: SCROLL_TITLE_CONTEXT_ABOVE,
action: SCROLL_TITLE_ACTION
} );
}
}
/**
* Create an observer for showing/hiding feature and for firing scroll event hooks.
*
* @param {Function} show functionality for when feature is visible
* @param {Function} hide functionality for when feature is hidden
* @return {IntersectionObserver}
*/
function initScrollObserver( show, hide ) {
return new IntersectionObserver( function ( entries ) {
if ( !entries[ 0 ].isIntersecting && entries[ 0 ].boundingClientRect.top < 0 ) {
// Viewport has crossed the bottom edge of the target element.
show();
} else {
// Viewport is above the bottom edge of the target element.
hide();
}
} );
}
module.exports = {
initScrollObserver,
firePageTitleScrollHook
};