scrollObserver.js
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

scrollObserver.js
View Options

	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 ) {
	/**
	* For use by WikimediaEvents only.
	*
	* @event vector.page_title_scroll
	* @internal
	* @property {string} context
	* @property {string} action
	*/
	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( ( 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
	};