Page MenuHomePhabricator

No demo for LookupElement
Closed, ResolvedPublic

Description

I'm trying to use this in a project. I thought I could inherit the LookupInputWidget class but it turned out that you are suppose to extend TextInputWidget and use it as a mixin which wasn't clear.

A visible demo would really help with understanding this, preferably on a nice website like T85466
(see https://gerrit.wikimedia.org/r/181225 for the story of my struggles)

Event Timeline

Jdlrobson raised the priority of this task from to Needs Triage.
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a project: OOUI.
Jdlrobson added a subscriber: Jdlrobson.
Jdforrester-WMF set Security to None.
Jdforrester-WMF moved this task from Backlog to Next-up on the OOUI board.

LookupInputWidget is just really messed up. Let's unbreak it, then I'll put some pretty examples somewhere.

Change 184828 had a related patch set uploaded (by Bartosz Dziewoński):
[BREAKING CHANGE] LookupInputWidget: Remove the silly 'input' parameter

https://gerrit.wikimedia.org/r/184828

Patch-For-Review

Change 184828 merged by jenkins-bot:
[BREAKING CHANGE] LookupInputWidget: Remove the silly 'input' parameter

https://gerrit.wikimedia.org/r/184828

The patch above isn't really relevant, but it fixes the greatest source of confusion with LookupInputWidget – the fact that you need to pass the input to the constructor (OO.ui.LookupInputWidget.call( this, this, config );). With this merged, that changes to regular pretty OO.ui.LookupInputWidget.call( this, config );,

So here's a demo, as simple as it gets while still being practical – the following widget, when executed on a MediaWiki wiki, will provide autocompletion of page titles (search suggestions). You can execute run it on mediawiki.org right now, but it'd have to be adjusted to the old LookupInputWidget constructor (see paragraph above). Not sure where to put it, maybe on mw:OOjs UI?

Obsolete, see last comment on this task for new demo
/**
 * @class
 * @extends OO.ui.TextInputWidget
 * @mixins OO.ui.LookupInputWidget
 */
function MWSearchTextInputWidget( config ) {
	// Parent constructor
	OO.ui.TextInputWidget.call( this, config );
	// Mixin constructors
	OO.ui.LookupInputWidget.call( this, config );
	// Events
	this.lookupMenu.connect( this, { choose: 'onLookupMenuItemChoose' } );
};
OO.inheritClass( MWSearchTextInputWidget, OO.ui.TextInputWidget );
OO.mixinClass( MWSearchTextInputWidget, OO.ui.LookupInputWidget );

/**
 * Fire an API query to get search suggestions for current input value.
 */
MWSearchTextInputWidget.prototype.getLookupRequest = function () {
	return new mw.Api().get( {
		action: 'opensearch',
		search: this.lookupQuery,
		suggest: ''
	} );
};

/**
 * Pre-process data returned by the request. The result of this function will be remembered, and any
 * later searches for the given value (this.lookupQuery) will use it rather than doing API requests.
 */
MWSearchTextInputWidget.prototype.getLookupCacheItemFromData = function ( response ) {
	return response[1] || [];
};

/**
 * Use the data (returned by #getLookupCacheItemFromData) to fill in search suggestions items.
 */
MWSearchTextInputWidget.prototype.getLookupMenuItemsFromData = function ( data ) {
	var i, title,
		items = [],
		matchingPages = data;

	// Matching pages
	for ( i = 0; i < matchingPages.length; i++ ) {
		title = matchingPages[i];
		items.push( new OO.ui.MenuOptionWidget( {
			data: title,
			label: title
		} ) );
	}

	return items;
};

/**
 * Update the text input value to the value of the clicked item.
 */
MWSearchTextInputWidget.prototype.onLookupMenuItemChoose = function ( item ) {
	if ( item ) {
		this.setValue( item.getData() );
	}
};

And to use it:

widget = new MWSearchTextInputWidget();
$( '#bodyContent' ).prepend( widget.$element );

The patch above isn't really relevant, but it fixes the greatest source of confusion with LookupInputWidget – the fact that you need to pass the input to the constructor (OO.ui.LookupInputWidget.call( this, this, config );). With this merged, that changes to regular pretty OO.ui.LookupInputWidget.call( this, config );,

Thanks, the new way is much cleaner.
(Maybe TextInputWidget and LookupInputWidget should be more integrated, to avoid duplicating onLookupMenuItemChoose for every subclass?)

Not sure where to put it, maybe on mw:OOjs UI?

The oojs/ui repository has a 'demos' directory: if you put your demo there, many developers will find it.

This is great.
One suggested improvement - you could make this example even simpler and non-mediawiki specific by just returning a jQuery.Deferred().resolve( { data: } )
Would also be great if you could use the @see jsduck tag to point to these demos from within the documentation - this would put all the information in one central place

This actually still sucks a lot, with the demo above making a few problems clear, I filed T86851 where we should work out a better solution.

I added a simplified version of the demo (not MediaWiki-dependent) to the fix for T86851.

This comment was removed by matmarex.
matmarex renamed this task from No demo for LookupInputWidget to No demo for LookupElement.Jan 15 2015, 11:41 PM

Per T86851 we (or I) replaced LookupInputWidget with LookupElement which has a slightly simpler interface, slightly more intuitive method names and slightly fewer bugs.

Its demo is now included in the OOUI demo, I put up the master version for the lazy: https://dl.dropboxusercontent.com/u/10983006/tmp/ooui/demos/index.html (scroll down to LookupElement demo; this page will go 404 in a few days) – and here's the code: https://github.com/wikimedia/oojs-ui/blob/master/demos/pages/widgets.js#L53-L114. I hope y'all like it.

Thanks!
I'm waiting for the next OOjs UI release to see it live at https://tools.wmflabs.org/oojs-ui/oojs-ui/demos/ !

I'm waiting for the next OOjs UI release to see it live at https://tools.wmflabs.org/oojs-ui/oojs-ui/demos/ !

And finally 0.6.3 is here!