mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-30 18:35:44 +00:00
Merge "Make beginning bold on scroll"
This commit is contained in:
commit
056b242682
4
resources/skins.vector.es6/config.json
Normal file
4
resources/skins.vector.es6/config.json
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"@doc": "This file describes the shape of the AB config. It exists to support jest",
|
||||||
|
"wgVectorWebABTestEnrollment": {}
|
||||||
|
}
|
|
@ -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
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
28
tests/jest/skins.vector.es6/main.test.js
Normal file
28
tests/jest/skins.vector.es6/main.test.js
Normal 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 ] );
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
} );
|
Loading…
Reference in a new issue