mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-25 11:17:35 +00:00
457dcfc472
- Pull IntersectionObserver into new file to share observer with different callbacks: - Wrap show/hide functionality of sticky header in conditionals based on user test group or by default. - Fire hooks for scroll event tracking in WME. - Add new js for A/B test functions and variables: - Fire hook to send data for A/B test initialization. - Update main js to include scrollObserver, A/B test init functionality. - Add A/B test config. - Update ResourceLoader package dependencies for sticky header. - Though not a strict dependency, see I42e3e7c2084c1e88363d5d1662630ed23a28c4d2 in WME repo which uses these hooks to log scroll events. - This patch includes changes from I56f40e706f8706fde1c0891a0561dd32c5e02bfc which were consolidated here for simplicity and ease of review - related to T292587 which calls for logging an init event for bucketing of users during A/B testing. Bug: T292586 Change-Id: If6446e1e84cea3649905808c4f0e9f6862255fa3
65 lines
2 KiB
JavaScript
65 lines
2 KiB
JavaScript
// Enable Vector features limited to ES6 browse
|
|
const
|
|
searchToggle = require( './searchToggle.js' ),
|
|
stickyHeader = require( './stickyHeader.js' ),
|
|
scrollObserver = require( './scrollObserver.js' ),
|
|
AB = require( './AB.js' );
|
|
|
|
/**
|
|
* @return {void}
|
|
*/
|
|
const main = () => {
|
|
// Initialize the search toggle for the main header only. The sticky header
|
|
// toggle is initialized after wvui search loads.
|
|
const searchToggleElement = document.querySelector( '.mw-header .search-toggle' );
|
|
if ( searchToggleElement ) {
|
|
searchToggle( searchToggleElement );
|
|
}
|
|
|
|
// Get the A/B test config for sticky header if enabled.
|
|
const
|
|
testConfig = AB.getEnabledExperiment(),
|
|
stickyConfig = testConfig &&
|
|
// @ts-ignore
|
|
testConfig.experimentName === stickyHeader.STICKY_HEADER_EXPERIMENT_NAME ?
|
|
testConfig : null,
|
|
// Note that the default test group is set to experience the feature by default.
|
|
// @ts-ignore
|
|
testGroup = stickyConfig ? stickyConfig.group : scrollObserver.FEATURE_TEST_GROUP,
|
|
targetElement = stickyHeader.header;
|
|
|
|
// Check for target html, sticky header conditionals, and test group to continue.
|
|
if ( !( targetElement &&
|
|
stickyHeader.isStickyHeaderAllowed() &&
|
|
testGroup !== 'unsampled' )
|
|
) {
|
|
return;
|
|
}
|
|
|
|
// Fire the A/B test enrollment hook.
|
|
AB.initAB( testGroup );
|
|
|
|
// Set up intersection observer for sticky header functionality and firing scroll event hooks
|
|
// for event logging if AB test is enabled.
|
|
const observer = scrollObserver.initScrollObserver(
|
|
() => {
|
|
scrollObserver.onShowFeature( targetElement, testGroup );
|
|
scrollObserver.logScrollEvent( 'down' );
|
|
},
|
|
() => {
|
|
scrollObserver.onHideFeature( targetElement, testGroup );
|
|
scrollObserver.logScrollEvent( 'up' );
|
|
}
|
|
|
|
);
|
|
|
|
stickyHeader.initStickyHeader( observer );
|
|
};
|
|
|
|
if ( document.readyState === 'interactive' || document.readyState === 'complete' ) {
|
|
main();
|
|
} else {
|
|
// This is needed when document.readyState === 'loading'.
|
|
document.addEventListener( 'DOMContentLoaded', () => main );
|
|
}
|