this.$results.on( 'scroll', this.onResultsScroll.bind( this ) );
this.$query.append( this.noItemsMessage.$element );
this.results.connect( this, {
- add: 'onResultsAdd',
+ change: 'onResultsChange',
remove: 'onResultsRemove'
} );
var queryValue = this.query.getValue().trim();
if ( queryValue.match( this.externalLinkUrlProtocolsRegExp ) ) {
- queryValue = queryValue.match( /.+\/([^\/]+)/ )[ 1 ];
+ queryValue = queryValue.match( /.+\/([^/]+)/ )[ 1 ];
}
return queryValue;
};
};
/**
- * Respond to add results event in the results widget.
+ * Respond to change results event in the results widget.
* Override the way SelectWidget and GroupElement append the items
* into the group so we can append them in groups of rows.
*
* @param {mw.widgets.MediaResultWidget[]} items An array of item elements
*/
- mw.widgets.MediaSearchWidget.prototype.onResultsAdd = function ( items ) {
+ mw.widgets.MediaSearchWidget.prototype.onResultsChange = function ( items ) {
var search = this;
+ if ( !items.length ) {
+ return;
+ }
+
// Add method to a queue; this queue will only run when the widget
// is visible
this.layoutQueue.push( function () {
// Go over the added items
row = search.getAvailableRow();
for ( i = 0, ilen = items.length; i < ilen; i++ ) {
+
+ // Check item has just been added
+ if ( items[ i ].row !== null ) {
+ continue;
+ }
+
itemWidth = items[ i ].$element.outerWidth( true );
// Add items to row until it is full
// Append the item
search.rows[ row ].$element.append( items[ i ].$element );
+
}
// If we have less than 4 rows, call for more images