const theme = require( './theme.js' ), search = require( './search.js' ), checkboxHack = require( './checkboxHack.js' ); /** * Based on Vector * 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. * .citizen-animations-ready .foo { * .transition( transform 100ms ease-out; ); * } * ``` * * @param {Document} document * @return {void} */ function enableCssAnimations( document ) { document.documentElement.classList.add( 'citizen-animations-ready' ); } /** * @param {Window} window * @return {void} */ function main( window ) { enableCssAnimations( window.document ); theme.init( window ); search.init( window.document ); checkboxHack.init(); } main( window );