Merge "Make beginning bold on scroll"

This commit is contained in:
jenkins-bot 2022-03-29 16:05:39 +00:00 committed by Gerrit Code Review
commit 056b242682
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-', TOC_SECTION_ID_PREFIX = 'toc-',
ABTestConfig = require( /** @type {string} */ ( './config.json' ) ).wgVectorWebABTestEnrollment || {}; 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} * @return {void}
*/ */
@ -126,18 +150,15 @@ const main = () => {
} }
} ); } );
const sectionObserver = initSectionObserver( { 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, topMargin: targetElement ? targetElement.getBoundingClientRect().height : 0,
onIntersection: ( section ) => { onIntersection: getHeadingIntersectionHandler( tableOfContents.changeActiveSection )
const headline = section.querySelector( HEADLINE_SELECTOR );
if ( headline ) {
tableOfContents.changeActiveSection( TOC_SECTION_ID_PREFIX + headline.id );
}
}
} ); } );
}; };
module.exports = { 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 ] );
} );
} );
} );