OOUI/Elements/Lookup/fr

mixin

// 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 );