this.userSelecting = false;
this.menuInitialized = false;
- this.inputValue = '';
this.$overlay = config.$overlay || this.$element;
this.$body = $( '<div>' ).addClass( 'mw-rcfilters-ui-menuSelectWidget-body' );
this.footers = [];
// Parent
mw.rcfilters.ui.MenuSelectWidget.parent.call( this, $.extend( {
$autoCloseIgnore: this.$overlay,
- width: 650
+ width: 650,
+ // Our filtering is done through the model
+ filterFromInput: false
}, config ) );
this.setGroupElement(
$( '<div>' )
// Events
this.model.connect( this, {
- update: 'onModelUpdate',
- initialize: 'onModelInitialize'
+ initialize: 'onModelInitialize',
+ searchChange: 'onModelSearchChange'
} );
// Initialization
}.bind( this ) );
// Switch to the correct view
- this.switchView( this.model.getCurrentView() );
+ this.updateView();
};
/* Initialize */
/* Events */
- /**
- * @event itemVisibilityChange
- *
- * Item visibility has changed
- */
-
/* Methods */
-
- /**
- * Respond to model update event
- */
- mw.rcfilters.ui.MenuSelectWidget.prototype.onModelUpdate = function () {
- // Change view
- this.switchView( this.model.getCurrentView() );
+ mw.rcfilters.ui.MenuSelectWidget.prototype.onModelSearchChange = function () {
+ this.updateView();
};
/**
*/
mw.rcfilters.ui.MenuSelectWidget.prototype.lazyMenuCreation = function () {
var widget = this,
+ items = [],
viewGroupCount = {},
groups = this.model.getFilterGroups();
}
this.menuInitialized = true;
- // Reset
- this.clearItems();
// Count groups per view
$.each( groups, function ( groupName, groupModel ) {
// without rebuilding the widgets each time
widget.views[ view ] = widget.views[ view ] || [];
widget.views[ view ] = widget.views[ view ].concat( currentItems );
+ items = items.concat( currentItems );
}
} );
- this.switchView( this.model.getCurrentView() );
+ this.addItems( items );
+ this.updateView();
};
/**
};
/**
- * Switch view
- *
- * @param {string} [viewName] View name. If not given, default is used.
+ * Update view
*/
- mw.rcfilters.ui.MenuSelectWidget.prototype.switchView = function ( viewName ) {
- viewName = viewName || 'default';
+ mw.rcfilters.ui.MenuSelectWidget.prototype.updateView = function () {
+ var viewName = this.model.getCurrentView();
if ( this.views[ viewName ] && this.currentView !== viewName ) {
- this.clearItems();
- this.addItems( this.views[ viewName ] );
this.updateFooterVisibility( viewName );
this.$element
this.currentView = viewName;
this.scrollToTop();
- this.clip();
}
+
+ this.postProcessItems();
+ this.clip();
};
/**
};
/**
- * @fires itemVisibilityChange
- * @inheritdoc
+ * Post-process items after the visibility changed. Make sure
+ * that we always have an item selected, and that the no-results
+ * widget appears if the menu is empty.
*/
- mw.rcfilters.ui.MenuSelectWidget.prototype.updateItemVisibility = function () {
+ mw.rcfilters.ui.MenuSelectWidget.prototype.postProcessItems = function () {
var i,
itemWasSelected = false,
- inputVal = this.$input.val(),
items = this.getItems();
- // Since the method hides/shows items, we don't want to
- // call it unless the input actually changed
- if (
- !this.userSelecting &&
- this.inputValue !== inputVal
- ) {
- // Parent method
- mw.rcfilters.ui.MenuSelectWidget.parent.prototype.updateItemVisibility.call( this );
-
+ // If we are not already selecting an item, always make sure
+ // that the top item is selected
+ if ( !this.userSelecting ) {
// Select the first item in the list
for ( i = 0; i < items.length; i++ ) {
if (
if ( !itemWasSelected ) {
this.selectItem( null );
}
-
- // Cache value
- this.inputValue = inputVal;
-
- this.emit( 'itemVisibilityChange' );
}
this.noResults.toggle( !this.getItems().some( function ( item ) {
} )[ 0 ];
};
- /**
- * Override the item matcher to use the model's match process
- *
- * @inheritdoc
- */
- mw.rcfilters.ui.MenuSelectWidget.prototype.getItemMatcher = function ( s ) {
- var results = this.model.findMatches( s, true );
-
- return function ( item ) {
- return results.indexOf( item.getModel() ) > -1;
- };
- };
-
/**
* @inheritdoc
*/