wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-24 07:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Factor out a separate scroll observer for the TOC A/B test, which should be fired separately from the page title observer used by the sticky header and TOC

Browse source 
Bug: T307952
Bug: T307345
Change-Id: I3f247730fa1c399e6d2e4d866677703fc24e8c58
This commit is contained in:
bwang 2022-05-05 15:01:51 -05:00 committed by Bernard Wang
parent 24ad8721b1
commit 94be7578f5
3 changed files with 32 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
resources/skins.vector.es6/main.js
View file

@ -18,7 +18,8 @@ const
TOC_SCROLL_HOOK = 'table_of_contents',
PAGE_TITLE_SCROLL_HOOK = 'page_title',
TOC_QUERY_PARAM = 'tableofcontents',
TOC_EXPERIMENT_NAME = 'skin-vector-toc-experiment';
TOC_EXPERIMENT_NAME = 'skin-vector-toc-experiment',
SCROLL_TOC_BELOW_CLASS = 'vector-scrolled-below-table-of-contents';
/**
* @callback OnIntersection
@ -95,30 +96,22 @@ const main = () => {
const tocElement = document.getElementById( TOC_ID );
const tocElementLegacy = document.getElementById( TOC_ID_LEGACY );
const bodyContent = document.getElementById( BODY_CONTENT_ID );
const tocLegacyPlaceholder = document.getElementsByTagName( TOC_LEGACY_PLACEHOLDER_TAG )[ 0 ];
const tocLegacyTargetIntersection = tocElementLegacy || tocLegacyPlaceholder;
// Set up intersection observer for sticky header and table of contents functionality
// and to fire scroll event hooks for event logging if AB tests are enabled for
// either feature.
// Set up intersection observer for page title, used by sticky header
const observer = scrollObserver.initScrollObserver(
() => {
if ( isStickyHeaderAllowed && isStickyHeaderEnabled ) {
stickyHeader.show( header );
document.body.classList.add( SCROLL_TOC_BELOW_CLASS );
}
scrollObserver.fireScrollHook( 'down', PAGE_TITLE_SCROLL_HOOK );
if ( tocLegacyTargetIntersection ) {
scrollObserver.fireScrollHook( 'down', TOC_SCROLL_HOOK );
}
},
() => {
if ( isStickyHeaderAllowed && isStickyHeaderEnabled ) {
stickyHeader.hide( header );
document.body.classList.remove( SCROLL_TOC_BELOW_CLASS );
}
scrollObserver.fireScrollHook( 'up', PAGE_TITLE_SCROLL_HOOK );
if ( tocLegacyTargetIntersection ) {
scrollObserver.fireScrollHook( 'up', TOC_SCROLL_HOOK );
}
}
);
@ -133,9 +126,21 @@ const main = () => {
observer.observe( stickyIntersection );
}
// Setup intersection observer for TOC scroll event tracking
// fire hooks for event logging if AB tests are enabled
const tocLegacyPlaceholder = document.getElementsByTagName( TOC_LEGACY_PLACEHOLDER_TAG )[ 0 ];
const tocLegacyTargetIntersection = tocElementLegacy || tocLegacyPlaceholder;
// Initiate observer for table of contents in main content.
if ( tocLegacyTargetIntersection ) {
observer.observe( tocLegacyTargetIntersection );
const tocObserver = scrollObserver.initScrollObserver(
() => {
scrollObserver.fireScrollHook( 'down', TOC_SCROLL_HOOK );
},
() => {
scrollObserver.fireScrollHook( 'up', TOC_SCROLL_HOOK );
}
);
tocObserver.observe( tocLegacyTargetIntersection );
}
// Add event data attributes to legacy TOC

11
resources/skins.vector.es6/scrollObserver.js
View file

@ -7,8 +7,7 @@ const
SCROLL_TOC_CONTEXT_ABOVE = 'scrolled-above-table-of-contents',
SCROLL_TOC_CONTEXT_BELOW = 'scrolled-below-table-of-contents',
SCROLL_TOC_ACTION = 'scroll-to-toc',
SCROLL_TOC_PARAMETER = 'table_of_contents',
SCROLL_TOC_BELOW_CLASS = 'vector-scrolled-below-table-of-contents';
SCROLL_TOC_PARAMETER = 'table_of_contents';
/**
* @typedef {Object} scrollVariables
@ -55,19 +54,11 @@ function fireScrollHook( direction, hook ) {
mw.hook( scrollVariables.scrollHook ).fire( {
context: scrollVariables.scrollContextBelow
} );
// Piggy back on this function to apply needed class for shifting TOC.
if ( hook === SCROLL_TOC_PARAMETER ) {
document.body.classList.add( SCROLL_TOC_BELOW_CLASS );
}
} else {
mw.hook( scrollVariables.scrollHook ).fire( {
context: scrollVariables.scrollContextAbove,
action: scrollVariables.scrollAction
} );
// Piggy back on this function to apply needed class for shifting TOC.
if ( hook === SCROLL_TOC_PARAMETER ) {
document.body.classList.remove( SCROLL_TOC_BELOW_CLASS );
}
}
}

14
resources/skins.vector.styles/layouts/screen.less
View file

@ -334,8 +334,20 @@ body {
}
.skin-vector-toc-experiment-control .mw-table-of-contents-container,
.skin-vector-toc-experiment-unsampled .mw-table-of-contents-container,
.skin-vector-toc-experiment-unsampled .mw-table-of-contents-container {
display: none;
}
// Cannot use display: none on legacy TOC because it needs to be accessible
// to scrollObserver for the TOC A/B test (T303297)
// Instead we hide the contents of the legacy TOC and reset it's styles
// See I3f247730fa1c399e6d2e4d866677703fc24e8c58
.skin-vector-toc-experiment-treatment #toc {
padding: 0;
border: 0;
}
.skin-vector-toc-experiment-treatment #toc > * {
display: none;
}