resources/src/ext.translate.special.exporttranslations/index.js
/*!
* Entity selector for Special:ExportTranslations that allows users to load
* messages from typing in a group name.
* @author Eugene Wang'ombe
* @license GPL-2.0-or-later, CC-BY-SA-3.0
*/
( function () {
'use strict';
function activateEntitySelector( $group ) {
// hide the message group selector
const $groupContainer = $( '.message-group-selector' );
// Change the label, and update the for attribute, and remove the click handler
// which causes the entity selector to become un-responsive when triggered
$groupContainer
.attr( 'for', 'mw-entity-selector-input' )
.off( 'click' );
// Determine what value was set, and set it on the entity selector
const selectedGroup = $group.find( 'select option:selected' ).text();
// load the entity selector and set the value
const entitySelector = getEntitySelector( onEntitySelect );
entitySelector.setValue( selectedGroup );
$group.addClass( 'hidden' );
$group.after( entitySelector.$element );
}
function onEntitySelect( selectedItem ) {
$( 'select[name="group"]' ).val( selectedItem.data );
}
function onSubmit() {
const selectedGroupName = $( 'select[name="group"]' ).find( 'option:selected' ).text();
const currentVal = $( '.tes-entity-selector' ).find( 'input[type="text"]' ).val();
// Check if the user has selected an invalid entity.
if ( currentVal !== selectedGroupName ) {
mw.notify(
mw.msg( 'translate-mgs-invalid-group', currentVal ),
{
type: 'error',
tag: 'invalid-selection'
}
);
return false;
}
}
function getEntitySelector( onSelect ) {
const EntitySelector = require( 'ext.translate.entity.selector' );
return new EntitySelector( {
onSelect: onSelect,
entityType: [ 'groups' ],
inputId: 'mw-entity-selector-input'
} );
}
$( () => {
activateEntitySelector( $( '#group' ) );
$( '#mw-export-message-group-form' ).on( 'submit', onSubmit );
} );
}() );