mediawiki-skins-Vector/resources/skins.vector.js/skin.js
Jan Drewniak 1dad545f63 Adds loading indicator for new search module
Provides a loading indicator to show while the new Vue.js based
search widget loads. Given that the new widget will pull down the
entire Vue.js runtime, it's likely that there will be a delay
before the search suggestions appear. This loader is meant to
improve the perceived loading experience of the new widget.

Adds:
- New searchLoader.js file containing loading behaviour.
  - This overrides the code searchSuggest loading behaviour.
- New SearchBoxLoader.less file containing the loader styles.
- i18n message: 'vector-search-loader'.
- The Event type to jsdoc.json

Bug: T254695
Change-Id: I6b5f0a60018954e10b9e80792030b67b2ec33e5a
2020-09-08 13:59:41 +00:00

51 lines
1.6 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 ) {
enableCssAnimations( window.document );
collapsibleTabs.init();
sidebar.init( window );
$( vector.init );
initSearchLoader( document );
}
main( window );