wikimedia/mediawiki-extensions-Translate

View on GitHub
resources/js/LanguagesMultiselectWidget.js

Summary

Maintainability
A
0 mins
Test Coverage
'use strict';
/* eslint-disable no-implicit-globals */

/**
 * @class
 * @extends OO.ui.MenuTagMultiselectWidget
 * @mixes OO.ui.mixin.RequestManager
 * @mixes 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.super.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.super.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 options = [];

    for ( var 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;