Add separate buttons for 'add languages' and language settings menus
Bug: T323694 Change-Id: I23cb4687d841025905224a52b843572206fa9ddb
This commit is contained in:
NikG
jenkins-bot
@@ -66,47 +66,6 @@
|
||||
return $( '#p-lang-btn' ).length > 0 || mw.config.get( 'wgULSDisplaySettingsInInterlanguage' );
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {jQuery}
|
||||
*/
|
||||
function createActionsMenuTrigger() {
|
||||
var classes = [ 'mw-ui-button', 'mw-ui-quiet', 'uls-language-actions-button' ];
|
||||
return $( '<button>' ).addClass( classes );
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {jQuery} actionsMenuTrigger
|
||||
* @param {number} menuItemsCount
|
||||
*/
|
||||
function setActionsMenuTriggerIconClass( actionsMenuTrigger, menuItemsCount ) {
|
||||
var iconClass, iconClasses = {
|
||||
single: 'uls-language-actions-button--single',
|
||||
multiple: 'uls-language-actions-button--multiple'
|
||||
};
|
||||
if ( menuItemsCount > 1 ) {
|
||||
iconClass = iconClasses.multiple;
|
||||
} else {
|
||||
iconClass = iconClasses.single;
|
||||
}
|
||||
iconClasses = Object.keys( iconClasses ).map( function ( key ) {
|
||||
return iconClasses[ key ];
|
||||
} );
|
||||
// reset icon classes
|
||||
// The following classes are being removed here (if present):
|
||||
// * uls-language-actions-button--multiple
|
||||
// * uls-language-actions-button--single
|
||||
actionsMenuTrigger.removeClass( iconClasses );
|
||||
// One of the following classes are being added here:
|
||||
// * uls-language-actions-button--multiple
|
||||
// OR
|
||||
// * uls-language-actions-button--single
|
||||
actionsMenuTrigger.addClass( iconClass );
|
||||
}
|
||||
|
||||
function hideLanguageSettingsFooter( uls ) {
|
||||
uls.$menu.find( '#uls-settings-block' ).eq( 0 ).hide();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {jQuery} $element
|
||||
* @param {Function} onCloseHandler
|
||||
@@ -186,69 +145,72 @@
|
||||
}
|
||||
|
||||
/**
|
||||
* Add language actions menu
|
||||
* Helper method for creating jQuery buttons, used in "addActionsMenuTriggers" method below
|
||||
*
|
||||
* @param {string} buttonClass a class to be added to the created button class list
|
||||
* @return {jQuery}
|
||||
*/
|
||||
function createMenuButton( buttonClass ) {
|
||||
var classes = [ 'mw-ui-button', 'mw-ui-quiet', buttonClass ];
|
||||
// eslint-disable-next-line mediawiki/class-doc
|
||||
return $( '<button>' ).addClass( classes );
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the button that opens the "Add languages" menu (that contain options
|
||||
* like "Translate this page" and "Edit language links") and the button that
|
||||
* opens the "Language settings" menu.
|
||||
*
|
||||
* @param {Object} uls The ULS object
|
||||
*/
|
||||
function addActionsMenuTrigger( uls ) {
|
||||
var actionsMenuDialog;
|
||||
function addActionsMenuTriggers( uls ) {
|
||||
var $ulsSettingsBlock = uls.$menu.find( '#uls-settings-block' ).eq( 0 );
|
||||
$ulsSettingsBlock.addClass( 'uls-settings-block--vector-2022' );
|
||||
|
||||
function openActionsMenuEventHandler( event ) {
|
||||
event.stopPropagation();
|
||||
|
||||
function onMenuClose() {
|
||||
actionsMenuDialog.hide();
|
||||
uls.show();
|
||||
}
|
||||
openLanguageSettings( $( event.target ), onMenuClose, uls );
|
||||
}
|
||||
|
||||
var languageSettingsMenuItem = {
|
||||
name: 'languageSettings',
|
||||
icon: 'settings',
|
||||
text: $.i18n( 'ext-uls-actions-menu-language-settings-item-label' ),
|
||||
handler: openActionsMenuEventHandler
|
||||
};
|
||||
var $languageSettingsMenuButton = createMenuButton( 'uls-language-settings-button' );
|
||||
$languageSettingsMenuButton.one( 'click', function () {
|
||||
openLanguageSettings( $languageSettingsMenuButton, uls.show.bind( uls ), uls );
|
||||
} );
|
||||
$ulsSettingsBlock.append( $languageSettingsMenuButton );
|
||||
|
||||
var actionItemsRegistry = mw.uls.ActionsMenuItemsRegistry;
|
||||
actionItemsRegistry.register( languageSettingsMenuItem );
|
||||
actionItemsRegistry.on( 'register', onActionItemAdded );
|
||||
|
||||
var $actionsMenuTrigger = createActionsMenuTrigger();
|
||||
setActionsMenuTriggerIconClass( $actionsMenuTrigger, actionItemsRegistry.size() );
|
||||
var addLanguagesMenuDialog;
|
||||
var $addLanguagesMenuButton;
|
||||
|
||||
function registerTriggerListener() {
|
||||
$actionsMenuTrigger.off( 'click' );
|
||||
$actionsMenuTrigger.on( 'click', function () {
|
||||
var menuItemsLength = actionItemsRegistry.size();
|
||||
var prependAddLanguagesMenuButton = function () {
|
||||
$addLanguagesMenuButton = createMenuButton( 'uls-add-languages-button' ).attr( {
|
||||
'data-i18n': 'ext-uls-add-languages-button-label'
|
||||
} ).i18n();
|
||||
|
||||
if ( menuItemsLength === 1 ) {
|
||||
openLanguageSettings( $actionsMenuTrigger, uls.show.bind( uls ), uls );
|
||||
$actionsMenuTrigger.off( 'click' );
|
||||
} else if ( menuItemsLength > 1 ) {
|
||||
actionsMenuDialog = actionsMenuDialog || new ActionsMenu( {
|
||||
$ulsSettingsBlock.addClass( 'uls-settings-block--with-add-languages' );
|
||||
$ulsSettingsBlock.prepend( $addLanguagesMenuButton );
|
||||
|
||||
// Action menu items need OOUI widgets. Load them and register trigger event handler.
|
||||
mw.loader.using( [ 'oojs-ui-widgets', 'oojs-ui.styles.icons-interactions' ] ).done( function () {
|
||||
$addLanguagesMenuButton.on( 'click', function () {
|
||||
addLanguagesMenuDialog = addLanguagesMenuDialog || new ActionsMenu( {
|
||||
actions: actionItemsRegistry.getItems(),
|
||||
onPosition: uls.position.bind( uls ),
|
||||
onClose: uls.show.bind( uls )
|
||||
} );
|
||||
actionsMenuDialog.render();
|
||||
addLanguagesMenuDialog.render();
|
||||
uls.hide();
|
||||
}
|
||||
} );
|
||||
} );
|
||||
};
|
||||
|
||||
if ( actionItemsRegistry.getItems().length ) {
|
||||
prependAddLanguagesMenuButton();
|
||||
}
|
||||
function onActionItemAdded( item ) {
|
||||
var itemsLength = actionItemsRegistry.size();
|
||||
setActionsMenuTriggerIconClass( $actionsMenuTrigger, itemsLength );
|
||||
registerTriggerListener();
|
||||
if ( actionsMenuDialog ) {
|
||||
actionsMenuDialog.renderAction( item );
|
||||
function onActionItemAdded( itemName, item ) {
|
||||
if ( !$addLanguagesMenuButton ) {
|
||||
prependAddLanguagesMenuButton();
|
||||
} else if ( addLanguagesMenuDialog ) {
|
||||
addLanguagesMenuDialog.renderAction( item );
|
||||
}
|
||||
}
|
||||
actionItemsRegistry.on( 'register', onActionItemAdded );
|
||||
uls.$menu.append( $actionsMenuTrigger );
|
||||
// Action menu items need OOUI widgets. Load them and register trigger event handler.
|
||||
mw.loader.using( [ 'oojs-ui-widgets', 'oojs-ui.styles.icons-interactions' ] ).done( function () {
|
||||
registerTriggerListener();
|
||||
} );
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -683,12 +645,12 @@
|
||||
// Provide access to display and input settings if this entry point is the single
|
||||
// point of access to all language settings.
|
||||
uls = $target.data( 'uls' );
|
||||
// first hide #uls-settings-block div since it's unused, and it causes
|
||||
// an unwanted extra border to show up at the bottom of the menu
|
||||
hideLanguageSettingsFooter( uls );
|
||||
if ( languageNodes.length ) {
|
||||
addActionsMenuTrigger( uls );
|
||||
addActionsMenuTriggers( uls );
|
||||
} else {
|
||||
// first hide #uls-settings-block div since it's unused, and it causes
|
||||
// an unwanted extra border to show up at the bottom of the menu
|
||||
uls.$menu.find( '#uls-settings-block' ).eq( 0 ).hide();
|
||||
// There are no languages - The article exist only the current language wiki
|
||||
// Provide entry points to create article in other languages. T290436
|
||||
addEmptyState( uls );
|
||||
|
||||
Reference in New Issue
Block a user