diff options
Diffstat (limited to 'MLEB/Translate/resources/js/LanguagesMultiselectWidget.js')
-rw-r--r-- | MLEB/Translate/resources/js/LanguagesMultiselectWidget.js | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/MLEB/Translate/resources/js/LanguagesMultiselectWidget.js b/MLEB/Translate/resources/js/LanguagesMultiselectWidget.js new file mode 100644 index 00000000..2ec3b0e7 --- /dev/null +++ b/MLEB/Translate/resources/js/LanguagesMultiselectWidget.js @@ -0,0 +1,123 @@ +'use strict'; +/* eslint-disable no-implicit-globals */ + +/** + * @class + * @extends OO.ui.MenuTagMultiselectWidget + * @mixins OO.ui.mixin.RequestManager + * @mixins OO.ui.mixin.PendingElement + * + * @constructor + * @param {Object} [config] Configuration options + * + * @author Niklas Laxström + * @license GPL-2.0-or-later + * @since 2020.07 + */ +var LanguagesMultiselectWidget = function ( config ) { + this.api = config.api; + this.allowedValues = Object.keys( config.languages ); + this.languages = config.languages; + + LanguagesMultiselectWidget.parent.call( this, $.extend( true, + { + allowEditTags: false, + allowArbitary: false, + menu: { + filterFromInput: false + } + }, + config + ) ); + + OO.ui.mixin.RequestManager.call( this, config ); + OO.ui.mixin.PendingElement.call( this, $.extend( true, {}, config, { + $pending: this.$handle + } ) ); + + // No need for default values for the menu + this.menu.clearItems(); +}; + +/* Setup */ + +OO.inheritClass( LanguagesMultiselectWidget, OO.ui.MenuTagMultiselectWidget ); +OO.mixinClass( LanguagesMultiselectWidget, OO.ui.mixin.RequestManager ); +OO.mixinClass( LanguagesMultiselectWidget, OO.ui.mixin.PendingElement ); + +/* Methods */ + +/** @inheritdoc OO.ui.MenuTagMultiselectWidget */ +LanguagesMultiselectWidget.prototype.onInputChange = function () { + var widget = this; + + this.getRequestData() + .then( function ( data ) { + // Reset + widget.menu.clearItems(); + widget.menu.addItems( widget.getOptionsFromData( data ) ); + } ).always( function () { + // Parent method + LanguagesMultiselectWidget.parent.prototype.onInputChange.call( widget ); + } ); +}; + +/** + * Get option widgets from the server response + * + * @param {Object} data Query result + * @return {OO.ui.MenuOptionWidget[]} Menu items + */ +LanguagesMultiselectWidget.prototype.getOptionsFromData = function ( data ) { + var languageCode, options = []; + + for ( languageCode in data ) { + if ( this.languages[ languageCode ] !== undefined ) { + options.push( new OO.ui.MenuOptionWidget( { + data: languageCode, + label: this.languages[ languageCode ] + } ) ); + } + } + + return options; +}; + +/** @inheritdoc OO.ui.MenuTagMultiselectWidget */ +LanguagesMultiselectWidget.prototype.setValue = function ( valueObject ) { + valueObject = Array.isArray( valueObject ) ? valueObject : [ valueObject ]; + + this.clearItems(); + valueObject.forEach( function ( obj ) { + var data; + + if ( typeof obj === 'string' ) { + data = obj; + } else { + data = obj.data; + } + + this.addTag( data, this.languages[ data ] ); + }.bind( this ) ); +}; + +/** @inheritdoc OO.ui.mixin.RequestManager */ +LanguagesMultiselectWidget.prototype.getRequestQuery = function () { + return this.input.getValue(); +}; + +/** @inheritdoc OO.ui.mixin.RequestManager */ +LanguagesMultiselectWidget.prototype.getRequest = function () { + return this.api.get( { + action: 'languagesearch', + formatversion: '2', + search: this.getRequestQuery() + } ); +}; + +/** @inheritdoc OO.ui.mixin.RequestManager */ +LanguagesMultiselectWidget.prototype.getRequestCacheDataFromResponse = function ( response ) { + return response.languagesearch || {}; +}; + +module.exports = LanguagesMultiselectWidget; |