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 );