mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-01 02:37:05 +00:00
64df4fde20
Remove JavaScript that collapses tabs and replace with an easier to maintain breakpoint based solution. Tabs will now collapse below the tablet breakpoint Note: In the case of mw.util.addPortletLink, to add items to the `views` menu, these will not be collapsed into the more menu and must now be explicitly added to both menus, ie. if the window is resized these will hide and not appear in the more menu. However, when mw.util.addPortletLink attempts to add to `views` menu when there is not available space, we will redirect those links to the more (`cactions`) dropdown menu. Bug: T306229 Change-Id: I34ace0aeb3e23d8f6a8c5a8680bb492f37e343ad
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
|
|
* // 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 ) {
|
|
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();
|
|
} );
|
|
}
|