Make beginning bold on scroll

Bug: T301254
Change-Id: I4469575ea8590ae22023b98c3dbd31bc672d5766
This commit is contained in:
Jon Robson 2022-03-17 09:54:26 -07:00 committed by Jdlrobson
parent cd04b72058
commit a2c7c024df
3 changed files with 62 additions and 9 deletions

View File

@ -0,0 +1,4 @@
{
"@doc": "This file describes the shape of the AB config. It exists to support jest",
"wgVectorWebABTestEnrollment": {}
}

View File

@ -14,6 +14,30 @@ const
TOC_SECTION_ID_PREFIX = 'toc-',
ABTestConfig = require( /** @type {string} */ ( './config.json' ) ).wgVectorWebABTestEnrollment || {};
/**
* @callback OnIntersection
* @param {HTMLElement} element The section that triggered the new intersection change.
*/
/**
* @ignore
* @param {Function} changeActiveSection
* @return {OnIntersection}
*/
const getHeadingIntersectionHandler = ( changeActiveSection ) => {
/**
* @param {HTMLElement} section
*/
return ( section ) => {
const headline = section.classList.contains( 'mw-body-content' ) ?
section :
section.querySelector( HEADLINE_SELECTOR );
if ( headline ) {
changeActiveSection( `${TOC_SECTION_ID_PREFIX}${headline.id}` );
}
};
};
/**
* @return {void}
*/
@ -126,18 +150,15 @@ const main = () => {
}
} );
const sectionObserver = initSectionObserver( {
elements: bodyContent.querySelectorAll( 'h1, h2, h3, h4, h5, h6' ),
elements: bodyContent.querySelectorAll( 'h1, h2, h3, h4, h5, h6, .mw-body-content' ),
topMargin: targetElement ? targetElement.getBoundingClientRect().height : 0,
onIntersection: ( section ) => {
const headline = section.querySelector( HEADLINE_SELECTOR );
if ( headline ) {
tableOfContents.changeActiveSection( TOC_SECTION_ID_PREFIX + headline.id );
}
}
onIntersection: getHeadingIntersectionHandler( tableOfContents.changeActiveSection )
} );
};
module.exports = {
main: main
main,
test: {
getHeadingIntersectionHandler
}
};

View File

@ -0,0 +1,28 @@
const { test } = require( '../../../resources/skins.vector.es6/main.js' );
describe( 'main.js', () => {
it( 'getHeadingIntersectionHandler', () => {
const section = document.createElement( 'div' );
section.setAttribute( 'class', 'mw-body-content' );
section.setAttribute( 'id', 'mw-content-text' );
const heading = document.createElement( 'h2' );
const headline = document.createElement( 'span' );
headline.classList.add( 'mw-headline' );
headline.setAttribute( 'id', 'headline' );
heading.appendChild( headline );
section.appendChild(
heading
);
[
[ section, 'toc-mw-content-text' ],
[ heading, 'toc-headline' ]
].forEach( ( testCase ) => {
const node = /** @type {HTMLElement} */ ( testCase[ 0 ] );
const fn = jest.fn();
const handler = test.getHeadingIntersectionHandler( fn );
handler( node );
expect( fn ).toHaveBeenCalledWith( testCase[ 1 ] );
} );
} );
} );