mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-29 01:45:00 +00:00
c3e57e0ecd
With T178356 ES6 is the default, so these can now be managed in the same module. Keeping them in the same module will hopefully allow us to make more optimizations on the long term. Change-Id: I3fe9e50143b85b4cdc3d9171a60c3720a7c26b4b
65 lines
1.5 KiB
JavaScript
65 lines
1.5 KiB
JavaScript
/**
|
|
* Adds and show a popup to the user to point them to the new location of the element
|
|
*
|
|
* @param {Element} container
|
|
* @param {string} message
|
|
* @param {string[]} [classes]
|
|
* @param {number} [timeout]
|
|
* @param {boolean} [autoClose]
|
|
*/
|
|
function add( container, message, classes = [], timeout = 4000, autoClose = true ) {
|
|
/**
|
|
* @type {any}
|
|
*/
|
|
let popupWidget;
|
|
// load oojs-ui if it's not already loaded
|
|
mw.loader.using( 'oojs-ui-core' ).then( () => {
|
|
// @ts-ignore-next-line
|
|
popupWidget = new OO.ui.PopupWidget( {
|
|
$content: $( '<p>' ).text( message ),
|
|
autoClose,
|
|
padded: true,
|
|
anchor: true,
|
|
align: 'center',
|
|
position: 'below',
|
|
classes: [ 'vector-popup-notification' ].concat( classes ),
|
|
container
|
|
} );
|
|
popupWidget.$element.appendTo( container );
|
|
show( popupWidget, timeout );
|
|
} );
|
|
}
|
|
|
|
/**
|
|
* Toggle the popup widget
|
|
*
|
|
* @param {any} popupWidget popupWidget from oojs-ui
|
|
* cannot use type because it's not loaded yet
|
|
* @param {number} [timeout]
|
|
*/
|
|
function show( popupWidget, timeout = 4000 ) {
|
|
popupWidget.toggle( true );
|
|
popupWidget.toggleClipping( true );
|
|
// hide the popup after timeout ms
|
|
setTimeout( () => {
|
|
popupWidget.toggle( false );
|
|
popupWidget.$element.remove();
|
|
}, timeout );
|
|
}
|
|
|
|
/**
|
|
* Remove all popups
|
|
*
|
|
* @param {string} [selector]
|
|
*/
|
|
function removeAll( selector = '.vector-popup-notification' ) {
|
|
document.querySelectorAll( selector ).forEach( ( element ) => {
|
|
element.remove();
|
|
} );
|
|
}
|
|
|
|
module.exports = {
|
|
add,
|
|
removeAll
|
|
};
|