74 lines
2.2 KiB
JavaScript
74 lines
2.2 KiB
JavaScript
var collapsibleTabs = require( '../skins.vector.legacy.js/collapsibleTabs.js' ),
|
|
vector = require( '../skins.vector.legacy.js/vector.js' ),
|
|
initSearchLoader = require( './searchLoader.js' ).initSearchLoader,
|
|
sidebar = require( './sidebar.js' );
|
|
|
|
/**
|
|
* Wait for first paint before calling this function. That's its whole purpose.
|
|
*
|
|
* Some CSS animations and transitions are "disabled" by default as a workaround to this old Chrome
|
|
* bug, https://bugs.chromium.org/p/chromium/issues/detail?id=332189, which otherwise causes them to
|
|
* render in their terminal state on page load. By adding the `vector-animations-ready` class to the
|
|
* `html` root element **after** first paint, the animation selectors suddenly match causing the
|
|
* animations to become "enabled" when they will work properly. A similar pattern is used in Minerva
|
|
* (see T234570#5779890, T246419).
|
|
*
|
|
* Example usage in Less:
|
|
*
|
|
* ```less
|
|
* .foo {
|
|
* color: #f00;
|
|
* .transform( translateX( -100% ) );
|
|
* }
|
|
*
|
|
* // This transition will be disabled initially for JavaScript users. It will never be enabled for
|
|
* // no-JS users.
|
|
* .vector-animations-ready .foo {
|
|
* .transition( transform 100ms ease-out; );
|
|
* }
|
|
* ```
|
|
*
|
|
* @param {Document} document
|
|
* @return {void}
|
|
*/
|
|
function enableCssAnimations( document ) {
|
|
document.documentElement.classList.add( 'vector-animations-ready' );
|
|
}
|
|
|
|
/**
|
|
* @param {Window} window
|
|
* @return {void}
|
|
*/
|
|
function main( window ) {
|
|
var
|
|
ulsModuleStatus = mw.loader.getState( 'ext.uls.interface' ),
|
|
pLangBtnLabel;
|
|
|
|
enableCssAnimations( window.document );
|
|
collapsibleTabs.init();
|
|
sidebar.init( window );
|
|
$( vector.init );
|
|
initSearchLoader( document );
|
|
if ( ulsModuleStatus && ulsModuleStatus !== 'registered' ) {
|
|
mw.loader.using( 'ext.uls.interface' ).then( function () {
|
|
var pLangBtn = document.getElementById( 'p-lang-btn' );
|
|
if ( !pLangBtn ) {
|
|
return;
|
|
}
|
|
|
|
pLangBtn.classList.add( 'vector-menu--hide-dropdown' );
|
|
} );
|
|
} else {
|
|
pLangBtnLabel = document.getElementById( 'p-lang-btn-label' );
|
|
if ( !pLangBtnLabel ) {
|
|
return;
|
|
}
|
|
|
|
// Remove .mw-interlanguage-selector to show the dropdown arrow since evidently
|
|
// ULS is not used.
|
|
pLangBtnLabel.classList.remove( 'mw-interlanguage-selector' );
|
|
}
|
|
}
|
|
|
|
main( window );
|