Bug: T149435
Change-Id: Idc88cae9f5ee0a6128bd7936df02f102ff3b71fb
- * Update the state of a filter
+ * Update the selected state of a filter
*
* @param {string} filterName Filter name
*
* @param {string} filterName Filter name
- * @param {boolean} isSelected Filter selected state
+ * @param {boolean} [isSelected] Filter selected state
- mw.rcfilters.Controller.prototype.updateFilter = function ( filterName, isSelected ) {
+ mw.rcfilters.Controller.prototype.toggleFilterSelect = function ( filterName, isSelected ) {
var obj = {},
filterItem = this.filtersModel.getItemByName( filterName );
var obj = {},
filterItem = this.filtersModel.getItemByName( filterName );
+ isSelected = isSelected === undefined ? !filterItem.isSelected() : isSelected;
+
if ( filterItem.isSelected() !== isSelected ) {
obj[ filterName ] = isSelected;
this.filtersModel.updateFilters( obj );
if ( filterItem.isSelected() !== isSelected ) {
obj[ filterName ] = isSelected;
this.filtersModel.updateFilters( obj );
}
// Respond to user removing the filter
}
// Respond to user removing the filter
- this.controller.updateFilter( this.model.getName(), false );
+ this.controller.toggleFilterSelect( this.model.getName(), false );
this.controller.clearHighlightColor( this.model.getName() );
};
this.controller.clearHighlightColor( this.model.getName() );
};
* @param {boolean} isSelected The checkbox is selected
*/
mw.rcfilters.ui.FilterItemWidget.prototype.onCheckboxChange = function ( isSelected ) {
* @param {boolean} isSelected The checkbox is selected
*/
mw.rcfilters.ui.FilterItemWidget.prototype.onCheckboxChange = function ( isSelected ) {
- this.controller.updateFilter( this.model.getName(), isSelected );
+ this.controller.toggleFilterSelect( this.model.getName(), isSelected );
itemUpdate: 'onModelItemUpdate'
} );
this.textInput.connect( this, {
itemUpdate: 'onModelItemUpdate'
} );
this.textInput.connect( this, {
- change: 'onTextInputChange'
+ change: 'onTextInputChange',
+ enter: 'onTextInputEnter'
} );
this.capsule.connect( this, { capsuleItemClick: 'onCapsuleItemClick' } );
this.capsule.popup.connect( this, { toggle: 'onCapsulePopupToggle' } );
} );
this.capsule.connect( this, { capsuleItemClick: 'onCapsuleItemClick' } );
this.capsule.popup.connect( this, { toggle: 'onCapsulePopupToggle' } );
*/
mw.rcfilters.ui.FilterWrapperWidget.prototype.onCapsulePopupToggle = function ( isVisible ) {
if ( !isVisible ) {
*/
mw.rcfilters.ui.FilterWrapperWidget.prototype.onCapsulePopupToggle = function ( isVisible ) {
if ( !isVisible ) {
- this.filterPopup.resetSelection();
- this.capsule.resetSelection();
+ if ( !this.textInput.getValue() ) {
+ // Only reset selection if we are not filtering
+ this.filterPopup.resetSelection();
+ this.capsule.resetSelection();
+ }
} else {
this.scrollToTop( this.capsule.$element, 10 );
}
} else {
this.scrollToTop( this.capsule.$element, 10 );
}
* @param {string} newValue Current value
*/
mw.rcfilters.ui.FilterWrapperWidget.prototype.onTextInputChange = function ( newValue ) {
* @param {string} newValue Current value
*/
mw.rcfilters.ui.FilterWrapperWidget.prototype.onTextInputChange = function ( newValue ) {
- this.filterPopup.resetSelection();
-
// Filter the results
this.filterPopup.filter( this.model.findMatches( newValue ) );
// Filter the results
this.filterPopup.filter( this.model.findMatches( newValue ) );
+
+ if ( !newValue ) {
+ // If the value is empty, we didn't actually
+ // filter anything. the filter method will run
+ // and show all, but then will select the
+ // top item - but in this case, no selection
+ // should be made.
+ this.filterPopup.resetSelection();
+ }
this.capsule.popup.clip();
};
this.capsule.popup.clip();
};
+ /**
+ * Respond to text input enter event
+ */
+ mw.rcfilters.ui.FilterWrapperWidget.prototype.onTextInputEnter = function () {
+ var filter = this.filterPopup.getSelectedFilter();
+
+ // Toggle the filter
+ this.controller.toggleFilterSelect( filter );
+ };
+
/**
* Respond to model update event and set up the available filters to choose
* from.
/**
* Respond to model update event and set up the available filters to choose
* from.
* any actual interaction with the system resets the selection state of any item.
*/
mw.rcfilters.ui.FilterWrapperWidget.prototype.onModelItemUpdate = function () {
* any actual interaction with the system resets the selection state of any item.
*/
mw.rcfilters.ui.FilterWrapperWidget.prototype.onModelItemUpdate = function () {
- this.filterPopup.resetSelection();
+ if ( !this.textInput.getValue() ) {
+ this.filterPopup.resetSelection();
+ }
return groupWidget.getItemWidget( itemName );
};
return groupWidget.getItemWidget( itemName );
};
+ /**
+ * Get the current selection
+ *
+ * @return {string|null} Selected filter. Null if none is selected.
+ */
+ mw.rcfilters.ui.FiltersListWidget.prototype.getSelectedFilter = function () {
+ return this.selected;
+ };
+
/**
* Mark an item widget as selected
*
/**
* Mark an item widget as selected
*
* arranged by their group names
*/
mw.rcfilters.ui.FiltersListWidget.prototype.filter = function ( groupItems ) {
* arranged by their group names
*/
mw.rcfilters.ui.FiltersListWidget.prototype.filter = function ( groupItems ) {
- var i, j, groupName, itemWidgets,
+ var i, j, groupName, itemWidgets, topItem, isVisible,
groupWidgets = this.getItems(),
hasItemWithName = function ( itemArr, name ) {
return !!itemArr.filter( function ( item ) {
groupWidgets = this.getItems(),
hasItemWithName = function ( itemArr, name ) {
return !!itemArr.filter( function ( item ) {
+ this.resetSelection();
+
if ( $.isEmptyObject( groupItems ) ) {
// No results. Hide everything, show only 'no results'
// message
if ( $.isEmptyObject( groupItems ) ) {
// No results. Hide everything, show only 'no results'
// message
// We have items to show
itemWidgets = groupWidgets[ i ].getItems();
for ( j = 0; j < itemWidgets.length; j++ ) {
// We have items to show
itemWidgets = groupWidgets[ i ].getItems();
for ( j = 0; j < itemWidgets.length; j++ ) {
+ isVisible = hasItemWithName( groupItems[ groupName ], itemWidgets[ j ].getName() );
// Only show items that are in the filtered list
// Only show items that are in the filtered list
- itemWidgets[ j ].toggle(
- hasItemWithName( groupItems[ groupName ], itemWidgets[ j ].getName() )
- );
+ itemWidgets[ j ].toggle( isVisible );
+
+ if ( !topItem && isVisible ) {
+ topItem = itemWidgets[ j ];
+ }
+
+ // Select the first item
+ if ( topItem ) {
+ this.select( topItem.getName() );
+ }
};
}( mediaWiki, jQuery ) );
};
}( mediaWiki, jQuery ) );