mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-27 00:50:08 +00:00
2adab440a5
Replacing Less mixin calls of `.transition()`, deprecated since MW 1.37, with CSS property, but constituent properties. This has been an outcome of recent discussions around design tokens, which will be simpler to define, more modular, and better scoped. See T304443 for further information. Also clarifying, aligning comments. Bug: T308351 Change-Id: Iab9d04c9a9f31f3842d076ce8fd8bf6e3534fc89
111 lines
3.8 KiB
JavaScript
111 lines
3.8 KiB
JavaScript
var languageButton = require( './languageButton.js' ),
|
|
initSearchLoader = require( './searchLoader.js' ).initSearchLoader,
|
|
dropdownMenus = require( './dropdownMenus.js' ),
|
|
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
|
|
* // non-JavaScript 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 ) {
|
|
enableCssAnimations( window.document );
|
|
sidebar.init( window );
|
|
initSearchLoader( document );
|
|
languageButton();
|
|
dropdownMenus();
|
|
}
|
|
|
|
/**
|
|
* @param {Window} window
|
|
* @return {void}
|
|
*/
|
|
function init( window ) {
|
|
var now = mw.now();
|
|
// This is the earliest time we can run JS for users (and bucket anonymous
|
|
// users for A/B tests).
|
|
// Where the browser supports it, for a 10% sample of users
|
|
// we record a value to give us a sense of the expected delay in running A/B tests or
|
|
// disabling JS features. This will inform us on various things including what to expect
|
|
// with regards to delay while running A/B tests to anonymous users.
|
|
// When EventLogging is not available this will reject.
|
|
// This code can be removed by the end of the Desktop improvements project.
|
|
// https://www.mediawiki.org/wiki/Desktop_improvements
|
|
mw.loader.using( 'ext.eventLogging' ).then( function () {
|
|
if (
|
|
mw.eventLog &&
|
|
mw.eventLog.eventInSample( 100 /* 1 in 100 */ ) &&
|
|
window.performance &&
|
|
window.performance.timing &&
|
|
window.performance.timing.navigationStart
|
|
) {
|
|
mw.track( 'timing.Vector.ready', now - window.performance.timing.navigationStart ); // milliseconds
|
|
}
|
|
} );
|
|
}
|
|
|
|
init( window );
|
|
|
|
/**
|
|
* 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 );
|
|
}, 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();
|
|
} );
|
|
}
|