OOUI/Elements/Lookup/fr

OO.ui.mixin.LookupElement est un mixin qui crée le menu des valeurs suggérées pour un widget où on attend le texte de l'utilisateur. Les valeurs suggérées sont basées sur les caractères entrés par l'utilisateur dans le champ de saisie textuel et, en général, le menu n'est affiché que lorsque l'utilisateur est en train d'écrire (au contraire du menu dans un OO.ui.SearchWidget, qui lui est toujours visible). Si une valeur suggérée est choisie à l'intérieur du menu de recherche, cette valeur devient la valeur du champ de saisie.

Notez qu'un nouveau menu d'éléments suggérés est affiché quand une valeur est sélectionnée dans le menu de recherche. S'il ne s'agit pas du comportement désiré, désactivez les menus de recherche en utilisant la méthode setLookupsDisabled() de LookupElement, puis initialisez la valeur et réactivez à nouveau les recherches.

Pour utiliser LookupElement, vous devez implémenter ses trois méthodes abstraites :

1. getLookupDisabled() — renvoie un objet Request utilisé pour récupérer les valeurs suggérées. Ceci doit être un objet promis, tel que renvoyé par mw.Api.get().
2. getLookupCacheDataFromResponse() — Récupérez la réponse de la requête précédente et faites tous les traitements nécessaires avant qu'elle ne soit mise dans le cache local.
3. getLookupMenuOptionsFromData(data) — Prenez les données transformées ci-dessus (qui peuvent avoir été mises en cache) et convertissez-les en tableau d'objets OO.ui.MenuOptionWidget.

Exemple

L'exemple de TextInputWidget suivant mixe dans LookupElement et génére un menu de recherche (live demo) :

Il est utilisé à l'intérieur d'une fenêtre de dialogue et personnalisé avec le paramètre $overlay ce qui permet de dépasser les limites de la fenêtre de dialogue. Si le paramètre $overlay n'est pas spécifié, le menu de recherche est accolé à la fenêtre de dialogue. Voir le recouvrement dans les concepts pour les détails.

// Exemple de widget de saisie de texte qui mixe dans l'élément de recherche
function MyLookupTextInputWidget( config ) {
 OO.ui.TextInputWidget.call( this, { validate: 'integer', placeholder: 'Enter an integer' }  );
 OO.ui.mixin.LookupElement.call( this, config );
}

OO.inheritClass( MyLookupTextInputWidget, OO.ui.TextInputWidget );
OO.mixinClass( MyLookupTextInputWidget, OO.ui.mixin.LookupElement );
/**
 * Obtenir un nouvel objet de requête de la valeur de requête de recherche actuelle.
 *
 * @protected
 * @method
 * @return {jQuery.Promise} objet AJAX jQuery, ou objet promise avec une méthode .abort()
 */
MyLookupTextInputWidget.prototype.getLookupRequest = function () {
  var
    value = this.getValue(),
    deferred = $.Deferred(),
    delay = 500 + Math.floor( Math.random() * 500 );

  this.getValidity().done( function ( valid ) {
    if ( valid ) {
      // Résoudre avec les résultats après un faux délai
      setTimeout( function () {
        deferred.resolve( [ value * 1, value * 2, value * 3, value * 4, value * 5 ] );
      }, delay );
    } else {
      // Pas de résultat quand l'entrée contient du contenu non valide
      deferred.resolve( [] );
    }
  } );

  return deferred.promise( { abort: function () {} } );
};
/**
 * Prétraitement des données renvoyées par la requête de #getLookupRequest.
 *
 * La valeur renvoyée par cette fonction sera mise en cache, et toute requête ultérieure passée pour cette valeur
 * utilisera le cache plutôt que de faire des requêtes API.
 *
 * @protected
 * @method
 * @param {Mixed} réponse Response du serveur
 * @return {Mixed} données résultantes du cache
 */
MyLookupTextInputWidget.prototype.getLookupCacheDataFromResponse = function ( response ) {
  return response || [];
};
/**
 * Obtenir une liste des widgets d'options de menu à partir des données (éventuellement mises en cache) renvoyées par
 * #getLookupCacheDataFromResponse.
 *
 * @protected
 * @method
 * @param {Mixed} données résultantes en cache, un tableau en général
 * @return {OO.ui.MenuOptionWidget[]} éléments de menu
 */
MyLookupTextInputWidget.prototype.getLookupMenuOptionsFromData = function ( data ) {
  var
    items = [],
    i, number;
  for ( i = 0; i < data.length; i++ ) {
    number = String( data[ i ] );
    items.push( new OO.ui.MenuOptionWidget( {
      data: number,
      label: number
    } ) );
  }

  return items;
};

function MyDialog( config ) {
   MyDialog.super.call( this, config );
}
OO.inheritClass( MyDialog, OO.ui.Dialog );
MyDialog.static.name = 'MyDialog';
MyDialog.static.title = 'Using the lookup element mixin';
MyDialog.prototype.initialize = function () {
  MyDialog.super.prototype.initialize.apply( this, arguments );
  var panel = new OO.ui.PanelLayout( { padded: true, expanded: false } ),
    lookup = new MyLookupTextInputWidget( { $overlay: this.$overlay } );
  panel.$element.append( lookup.$element, '<p>This dialog contains a text input widget that ' +
    'mixes in LookupElement to generate a lookup menu. By default, the menu uses relative positioning. ' +
    'In this example, the $overlay config is passed to the constructor to allow the menu to extend beyond' +
    ' the edge of the dialog.  If this config were not specified, the lookup menu would be clipped by' +
    ' the dialog window.</p>' );
  this.$body.append( panel.$element );
};

var windowManager = new OO.ui.WindowManager();
$( 'body' ).append( windowManager.$element );
var dialog = new MyDialog();
windowManager.addWindows( [ dialog ] );
windowManager.openWindow( dialog );

La liste complète des méthodes prises en charge est disponible dans la documentation du code de LookupElement.