wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-28 09:30:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initialize the skins.vector.es6 module before the skins.vector.js module

Browse source 
stickyHeader.js, a file in the "skins.vector.es6" module, clones the
user menu. Because of this, it must initialize before dropdownMenu.js, a
file in the "skins.vector.js" module, in order for dropdownMenu.js to
bind the correct checkboxHack event listeners to the user menu in the
sticky header.

Therefore, change the es6 module to export its main method. The
skins.vector.js module can then use mw.loader.using to ensure the
skins.vector.es6 module initialization happens first in browsers that
support es6. Browsers that don't support es6 will continue to initialize
the skins.vector.js module.

Bug: T291096
Change-Id: I1bb6f2da9703ed2679eacfdb42b9818efe614ab9
This commit is contained in:
Nicholas Ray 2021-10-29 19:01:36 -06:00
parent 43f6b74b6b
commit c741759cab
2 changed files with 31 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -15,9 +15,6 @@ const main = () => {
stickyHeader();
};
if ( document.readyState === 'interactive' || document.readyState === 'complete' ) {
main();
} else {
// This is needed when document.readyState === 'loading'.
document.addEventListener( 'DOMContentLoaded', () => main );
}
module.exports = {
main: main
};

31
resources/skins.vector.js/skin.js
View file

@ -81,11 +81,34 @@ function init( window ) {
init( window );
if ( document.readyState === 'interactive' || document.readyState === 'complete' ) {
/**
* Because stickyHeader.js clones the user menu, it must initialize before
* dropdownMenus.js initializes in order for the sticky header's user menu to
* bind the necessary checkboxHack event listeners. This is solved by using
* mw.loader.using to ensure that the skins.vector.es6 module initializes first
* followed by initializing this module. If the es6 module loading fails (which
* can happen in browsers that don't support es6), continue to initialize this
* module.
*/
function initAfterEs6Module() {
mw.loader.using( 'skins.vector.es6' ).then( function () {
// Loading of the 'skins.vector.es6' module has succeeded. Initialize the
// `skins.vector.es6` module first.
require( /** @type {string} */ ( 'skins.vector.es6' ) ).main();
// Initialize this module second.
main( window );
} else {
// This is needed when document.readyState === 'loading'.
document.addEventListener( 'DOMContentLoaded', function () {
}, function () {
// Loading of the 'skins.vector.es6' has failed (e.g. this will fail in
// browsers that don't support ES6) so only initialize this module.
main( window );
} );
}
if ( document.readyState === 'interactive' || document.readyState === 'complete' ) {
initAfterEs6Module();
} else {
// This is needed when document.readyState === 'loading'.
document.addEventListener( 'DOMContentLoaded', function () {
initAfterEs6Module();
} );
}