From ed6b53179876e373a6016cfe08a10f3553a643bf Mon Sep 17 00:00:00 2001 From: Moriel Schottlender Date: Wed, 1 Mar 2017 10:35:12 -0800 Subject: [PATCH] RCFilters UI: Select filter when searching and add it on 'enter' Bug: T149435 Change-Id: Idc88cae9f5ee0a6128bd7936df02f102ff3b71fb --- .../mw.rcfilters.Controller.js | 8 +++-- .../ui/mw.rcfilters.ui.CapsuleItemWidget.js | 2 +- .../ui/mw.rcfilters.ui.FilterItemWidget.js | 2 +- .../ui/mw.rcfilters.ui.FilterWrapperWidget.js | 35 +++++++++++++++---- .../ui/mw.rcfilters.ui.FiltersListWidget.js | 27 +++++++++++--- 5 files changed, 59 insertions(+), 15 deletions(-) diff --git a/resources/src/mediawiki.rcfilters/mw.rcfilters.Controller.js b/resources/src/mediawiki.rcfilters/mw.rcfilters.Controller.js index 1df31a279a..ec14aa6a76 100644 --- a/resources/src/mediawiki.rcfilters/mw.rcfilters.Controller.js +++ b/resources/src/mediawiki.rcfilters/mw.rcfilters.Controller.js @@ -80,15 +80,17 @@ }; /** - * Update the state of a filter + * Update the selected state of a filter * * @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 ); + isSelected = isSelected === undefined ? !filterItem.isSelected() : isSelected; + if ( filterItem.isSelected() !== isSelected ) { obj[ filterName ] = isSelected; this.filtersModel.updateFilters( obj ); diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js index 800e7ea578..4a0e595e64 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js @@ -111,7 +111,7 @@ } // 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() ); }; diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemWidget.js index 6aa514e6b0..81b856d961 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemWidget.js @@ -94,7 +94,7 @@ * @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 ); }; /** diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js index 02ddb549d0..8afdc8a8dc 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js @@ -66,7 +66,8 @@ 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' } ); @@ -106,8 +107,11 @@ */ 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 ); } @@ -119,13 +123,30 @@ * @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 ) ); + + 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(); }; + /** + * 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. @@ -149,7 +170,9 @@ * 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(); + } }; /** diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js index 38679d75e3..8c730a2aa4 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js @@ -120,6 +120,15 @@ 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 * @@ -175,7 +184,7 @@ * 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 ) { @@ -183,6 +192,8 @@ } ).length; }; + this.resetSelection(); + if ( $.isEmptyObject( groupItems ) ) { // No results. Hide everything, show only 'no results' // message @@ -206,11 +217,19 @@ // 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 - 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 ) ); -- 2.20.1