' )
+ .addClass( 'mw-rcfilters-ui-cell' )
+ .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views-input' )
+ .append( this.input.$element ),
+ $( '
' )
+ .addClass( 'mw-rcfilters-ui-cell' )
+ .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views-select' )
+ .append( this.viewsSelectWidget.$element )
+ )
+ )
+ );
+
+ // Event
+ this.viewsSelectWidget.connect( this, { choose: 'onViewsSelectWidgetChoose' } );
rcFiltersRow.append(
$( '
' )
@@ -237,7 +237,11 @@
* @param {string} value Value of the input
*/
mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onInputChange = function ( value ) {
- var view = this.model.getViewByTrigger( value.substr( 0, 1 ) );
+ var view;
+
+ value = value.trim();
+
+ view = this.model.getViewByTrigger( value.substr( 0, 1 ) );
this.controller.switchView( view );
};
@@ -285,7 +289,7 @@
// Clear input if the only thing in the input is the prefix
if (
- this.input.getValue() === this.model.getViewTrigger( this.model.getCurrentView() )
+ this.input.getValue().trim() === this.model.getViewTrigger( this.model.getCurrentView() )
) {
// Clear the input
this.input.setValue( '' );
@@ -321,7 +325,7 @@
};
/**
- * @inheridoc
+ * @inheritdoc
*/
mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onChangeTags = function () {
// Parent method
@@ -349,7 +353,7 @@
*/
mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.updateElementsForView = function () {
var view = this.model.getCurrentView(),
- inputValue = this.input.getValue(),
+ inputValue = this.input.getValue().trim(),
inputView = this.model.getViewByTrigger( inputValue.substr( 0, 1 ) );
if ( inputView !== 'default' ) {
@@ -364,23 +368,30 @@
// Update input
this.input.setValue( inputValue );
+
+ if ( this.currentView !== view ) {
+ this.scrollToTop( this.$element );
+ this.currentView = view;
+ }
};
/**
* Set the visibility of the saved query button
*/
mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.setSavedQueryVisibility = function () {
- if ( this.areSavedQueriesEnabled ) {
- this.matchingQuery = this.controller.findQueryMatchingCurrentState();
+ this.matchingQuery = this.controller.findQueryMatchingCurrentState();
- this.savedQueryTitle.setLabel(
- this.matchingQuery ? this.matchingQuery.getLabel() : ''
- );
- this.savedQueryTitle.toggle( !!this.matchingQuery );
- this.saveQueryButton.toggle(
- !this.isEmpty() &&
- !this.matchingQuery
- );
+ this.savedQueryTitle.setLabel(
+ this.matchingQuery ? this.matchingQuery.getLabel() : ''
+ );
+ this.savedQueryTitle.toggle( !!this.matchingQuery );
+ this.saveQueryButton.toggle(
+ !this.isEmpty() &&
+ !this.matchingQuery
+ );
+
+ if ( this.matchingQuery ) {
+ this.emphasize();
}
};
@@ -390,6 +401,10 @@
* @param {mw.rcfilters.dm.FilterItem} item Filter item model
*/
mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onModelItemUpdate = function ( item ) {
+ if ( item.getGroupModel().isHidden() ) {
+ return;
+ }
+
if (
item.isSelected() ||
(
@@ -460,7 +475,7 @@
mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onTagSelect = function ( tagItem ) {
var widget = this,
menuOption = this.menu.getItemFromModel( tagItem.getModel() ),
- oldInputValue = this.input.getValue();
+ oldInputValue = this.input.getValue().trim();
this.menu.setUserSelecting( true );
@@ -591,6 +606,26 @@
}
};
+ mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.emphasize = function () {
+ if (
+ !this.$handle.hasClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' )
+ ) {
+ this.$handle
+ .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-emphasize' )
+ .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' );
+
+ setTimeout( function () {
+ this.$handle
+ .removeClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-emphasize' );
+
+ setTimeout( function () {
+ this.$handle
+ .removeClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' );
+ }.bind( this ), 1000 );
+ }.bind( this ), 500 );
+
+ }
+ };
/**
* Scroll the element to top within its container
*