* @cfg {string} [whatsThis.body] The body of the whatsThis popup message
* @cfg {string} [whatsThis.url] The url for the link in the whatsThis popup message
* @cfg {string} [whatsThis.linkMessage] The text for the link in the whatsThis popup message
+ * @cfg {boolean} [visible=true] The visibility of the group
*/
mw.rcfilters.dm.FilterGroup = function MwRcfiltersDmFilterGroup( name, config ) {
config = config || {};
this.numericRange = config.range;
this.separator = config.separator || '|';
this.labelPrefixKey = config.labelPrefixKey;
+ this.visible = config.visible === undefined ? true : !!config.visible;
this.currSelected = null;
this.active = !!config.active;
return value;
};
+
+ /**
+ * Toggle the visibility of this group
+ *
+ * @param {boolean} [isVisible] Item is visible
+ */
+ mw.rcfilters.dm.FilterGroup.prototype.toggleVisible = function ( isVisible ) {
+ isVisible = isVisible === undefined ? !this.visible : isVisible;
+
+ if ( this.visible !== isVisible ) {
+ this.visible = isVisible;
+ this.emit( 'update' );
+ }
+ };
+
+ /**
+ * Check whether the group is visible
+ *
+ * @return {boolean} Group is visible
+ */
+ mw.rcfilters.dm.FilterGroup.prototype.isVisible = function () {
+ return this.visible;
+ };
+
+ /**
+ * Set the visibility of the items under this group by the given items array
+ *
+ * @param {mw.rcfilters.dm.ItemModel[]} visibleItems An array of visible items
+ */
+ mw.rcfilters.dm.FilterGroup.prototype.setVisibleItems = function ( visibleItems ) {
+ this.getItems().forEach( function ( itemModel ) {
+ itemModel.toggleVisible( visibleItems.indexOf( itemModel ) !== -1 );
+ } );
+ };
}( mediaWiki ) );
* selected, makes inactive.
* @cfg {string[]} [subset] Defining the names of filters that are a subset of this filter
* @cfg {Object} [conflicts] Defines the conflicts for this filter
+ * @cfg {boolean} [visible=true] The visibility of the group
*/
mw.rcfilters.dm.FilterItem = function MwRcfiltersDmFilterItem( param, groupModel, config ) {
config = config || {};
this.subset = config.subset || [];
this.conflicts = config.conflicts || {};
this.superset = [];
+ this.visible = config.visible === undefined ? true : !!config.visible;
// Interaction states
this.included = false;
this.emit( 'update' );
}
};
+
+ /**
+ * Toggle the visibility of this item
+ *
+ * @param {boolean} [isVisible] Item is visible
+ */
+ mw.rcfilters.dm.FilterItem.prototype.toggleVisible = function ( isVisible ) {
+ isVisible = isVisible === undefined ? !this.visible : !!isVisible;
+
+ if ( this.visible !== isVisible ) {
+ this.visible = isVisible;
+ this.emit( 'update' );
+ }
+ };
+
+ /**
+ * Check whether the item is visible
+ *
+ * @return {boolean} Item is visible
+ */
+ mw.rcfilters.dm.FilterItem.prototype.isVisible = function () {
+ return this.visible;
+ };
+
}( mediaWiki ) );
this.views = {};
this.currentView = 'default';
+ this.searchQuery = null;
// Events
this.aggregate( { update: 'filterItemUpdate' } );
}
} );
- this.currentView = 'default';
+ this.setSearch( '' );
this.updateHighlightedState();
return allSelected;
};
- /**
- * Switch the current view
- *
- * @param {string} view View name
- * @fires update
- */
- mw.rcfilters.dm.FiltersViewModel.prototype.switchView = function ( view ) {
- if ( this.views[ view ] && this.currentView !== view ) {
- this.currentView = view;
- this.emit( 'update' );
- }
- };
-
/**
* Get the current view
*
return result;
};
+ /**
+ * Return a version of the given string that is without any
+ * view triggers.
+ *
+ * @param {string} str Given string
+ * @return {string} Result
+ */
+ mw.rcfilters.dm.FiltersViewModel.prototype.removeViewTriggers = function ( str ) {
+ if ( this.getViewFromString( str ) !== 'default' ) {
+ str = str.substr( 1 );
+ }
+
+ return str;
+ };
+
+ /**
+ * Get the view from the given string by a trigger, if it exists
+ *
+ * @param {string} str Given string
+ * @return {string} View name
+ */
+ mw.rcfilters.dm.FiltersViewModel.prototype.getViewFromString = function ( str ) {
+ return this.getViewByTrigger( str.substr( 0, 1 ) );
+ };
+
+ /**
+ * Set the current search for the system.
+ * This also dictates what items and groups are visible according
+ * to the search in #findMatches
+ *
+ * @param {string} searchQuery Search query, including triggers
+ * @fires searchChange
+ */
+ mw.rcfilters.dm.FiltersViewModel.prototype.setSearch = function ( searchQuery ) {
+ var visibleGroups, visibleGroupNames;
+
+ if ( this.searchQuery !== searchQuery ) {
+ // Check if the view changed
+ this.switchView( this.getViewFromString( searchQuery ) );
+
+ visibleGroups = this.findMatches( searchQuery );
+ visibleGroupNames = Object.keys( visibleGroups );
+
+ // Update visibility of items and groups
+ $.each( this.getFilterGroups(), function ( groupName, groupModel ) {
+ // Check if the group is visible at all
+ groupModel.toggleVisible( visibleGroupNames.indexOf( groupName ) !== -1 );
+ groupModel.setVisibleItems( visibleGroups[ groupName ] || [] );
+ } );
+
+ this.searchQuery = searchQuery;
+ this.emit( 'searchChange', this.searchQuery );
+ }
+ };
+
+ /**
+ * Get the current search
+ *
+ * @return {string} Current search query
+ */
+ mw.rcfilters.dm.FiltersViewModel.prototype.getSearch = function () {
+ return this.searchQuery;
+ };
+
+ /**
+ * Switch the current view
+ *
+ * @private
+ * @param {string} view View name
+ */
+ mw.rcfilters.dm.FiltersViewModel.prototype.switchView = function ( view ) {
+ if ( this.views[ view ] && this.currentView !== view ) {
+ this.currentView = view;
+ }
+ };
+
/**
* Toggle the highlight feature on and off.
* Propagate the change to filter items.
this.getItemByName( filterName ).clearHighlightColor();
};
- /**
- * Return a version of the given string that is without any
- * view triggers.
- *
- * @param {string} str Given string
- * @return {string} Result
- */
- mw.rcfilters.dm.FiltersViewModel.prototype.removeViewTriggers = function ( str ) {
- if ( this.getViewByTrigger( str.substr( 0, 1 ) ) !== 'default' ) {
- str = str.substr( 1 );
- }
-
- return str;
- };
}( mediaWiki, jQuery ) );
} );
};
- /**
- * Switch the view of the filters model
- *
- * @param {string} view Requested view
- */
- mw.rcfilters.Controller.prototype.switchView = function ( view ) {
- this.filtersModel.switchView( view );
- };
-
/**
* Reset to default filters
*/
this.updateChangesList( null, 'markSeen' );
}.bind( this ) );
};
+
+ /**
+ * Set the current search for the system.
+ *
+ * @param {string} searchQuery Search query, including triggers
+ */
+ mw.rcfilters.Controller.prototype.setSearch = function ( searchQuery ) {
+ this.filtersModel.setSearch( searchQuery );
+ };
+
+ /**
+ * Switch the view by changing the search query trigger
+ * without changing the search term
+ *
+ * @param {string} view View to change to
+ */
+ mw.rcfilters.Controller.prototype.switchView = function ( view ) {
+ this.setSearch(
+ this.filtersModel.getViewTrigger( view ) +
+ this.filtersModel.removeViewTriggers( this.filtersModel.getSearch() )
+ );
+ };
+
+ /**
+ * Reset the search for a specific view. This means we null the search query
+ * and replace it with the relevant trigger for the requested view
+ *
+ * @param {string} [view='default'] View to change to
+ */
+ mw.rcfilters.Controller.prototype.resetSearchForView = function ( view ) {
+ view = view || 'default';
+
+ this.setSearch(
+ this.filtersModel.getViewTrigger( view )
+ );
+ };
}( mediaWiki, jQuery ) );
}
&-noresults {
- display: none;
padding: 0.5em;
color: @colorGray5;
-
- .oo-ui-menuSelectWidget-invisible & {
- display: inline-block;
- }
}
&-body {
.connect( this, { click: 'onInvertNamespacesButtonClick' } );
this.model.connect( this, {
highlightChange: 'onModelHighlightChange',
- update: 'onModelUpdate',
+ searchChange: 'onModelSearchChange',
initialize: 'onModelInitialize'
} );
+ this.view = this.model.getCurrentView();
// Initialize
this.$element
/**
* Respond to model update event
*/
- mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onModelUpdate = function () {
+ mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onModelSearchChange = function () {
var currentView = this.model.getCurrentView();
- this.setLabel( this.model.getViewTitle( currentView ) );
+ if ( this.view !== currentView ) {
+ this.setLabel( this.model.getViewTitle( currentView ) );
- this.invertNamespacesButton.toggle( currentView === 'namespaces' );
- this.backButton.toggle( currentView !== 'default' );
- this.helpIcon.toggle( currentView === 'tags' );
+ this.invertNamespacesButton.toggle( currentView === 'namespaces' );
+ this.backButton.toggle( currentView !== 'default' );
+ this.helpIcon.toggle( currentView === 'tags' );
+ this.view = currentView;
+ }
};
/**
}
// Events
- this.model.connect( this, { update: 'onModelUpdate' } );
+ this.model.connect( this, { update: 'updateUiBasedOnState' } );
// Initialize
this.$element
.addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget' )
.addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-name-' + this.model.getName() )
.append( $header );
+ this.updateUiBasedOnState();
};
/* Initialize */
/**
* Respond to model update event
*/
- mw.rcfilters.ui.FilterMenuSectionOptionWidget.prototype.onModelUpdate = function () {
+ mw.rcfilters.ui.FilterMenuSectionOptionWidget.prototype.updateUiBasedOnState = function () {
this.$element.toggleClass(
'mw-rcfilters-ui-filterMenuSectionOptionWidget-active',
this.model.isActive()
);
+ this.toggle( this.model.isVisible() );
};
/**
allowReordering: false,
$overlay: this.$overlay,
menu: {
+ // Our filtering is done through the model
+ filterFromInput: false,
hideWhenOutOfView: false,
hideOnChoose: false,
width: 650,
this.model.connect( this, {
initialize: 'onModelInitialize',
update: 'onModelUpdate',
+ searchChange: 'onModelSearchChange',
itemUpdate: 'onModelItemUpdate',
highlightChange: 'onModelHighlightChange'
} );
this.focus();
};
+ /**
+ * Respond to model search change event
+ *
+ * @param {string} value Search value
+ */
+ mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onModelSearchChange = function ( value ) {
+ this.input.setValue( value );
+ };
+
/**
* Respond to input change event
*
* @param {string} value Value of the input
*/
mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onInputChange = function ( value ) {
- var view;
-
- value = value.trim();
-
- view = this.model.getViewByTrigger( value.substr( 0, 1 ) );
-
- this.controller.switchView( view );
+ this.controller.setSearch( value );
};
+
/**
* Respond to query button click
*/
// Clear selection
this.selectTag( null );
- // Clear input if the only thing in the input is the prefix
- if (
- this.input.getValue().trim() === this.model.getViewTrigger( this.model.getCurrentView() )
- ) {
- // Clear the input
- this.input.setValue( '' );
- }
+ // Clear the search
+ this.controller.setSearch( '' );
// Log filter grouping
this.controller.trackFilterGroupings( 'filtermenu' );
* @inheritdoc
*/
mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onTagSelect = function ( tagItem ) {
- var widget = this,
- menuOption = this.menu.getItemFromModel( tagItem.getModel() ),
- oldInputValue = this.input.getValue().trim();
+ var menuOption = this.menu.getItemFromModel( tagItem.getModel() );
this.menu.setUserSelecting( true );
-
- // Reset input
- this.input.setValue( '' );
-
- // Switch view
- this.controller.switchView( tagItem.getView() );
-
// Parent method
mw.rcfilters.ui.FilterTagMultiselectWidget.parent.prototype.onTagSelect.call( this, tagItem );
- this.menu.selectItem( menuOption );
- this.selectTag( tagItem );
+ // Switch view
+ this.controller.resetSearchForView( tagItem.getView() );
- // Scroll to the item
- if ( this.model.removeViewTriggers( oldInputValue ) ) {
- // We're binding a 'once' to the itemVisibilityChange event
- // so this happens when the menu is ready after the items
- // are visible again, in case this is done right after the
- // user filtered the results
- this.getMenu().once(
- 'itemVisibilityChange',
- function () {
- widget.scrollToTop( menuOption.$element );
- widget.menu.setUserSelecting( false );
- }
- );
- } else {
- this.scrollToTop( menuOption.$element );
- this.menu.setUserSelecting( false );
- }
+ this.selectTag( tagItem );
+ this.scrollToTop( menuOption.$element );
+ this.menu.setUserSelecting( false );
};
/**
return new mw.rcfilters.ui.MenuSelectWidget(
this.controller,
this.model,
- $.extend( {
- filterFromInput: true
- }, menuConfig )
+ menuConfig
);
};
this.$element.addClass( classes.join( ' ' ) );
}
+
+ this.updateUiBasedOnState();
};
/* Initialization */
this.itemModel.isSelected() &&
this.invertModel.isSelected()
);
+ this.toggle( this.itemModel.isVisible() );
};
/**
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
*/
dépôts / lhc / web / wiklou.git / commitdiff