this.groups = {};
this.defaultParams = {};
this.defaultFiltersEmpty = null;
+ this.highlightEnabled = false;
// Events
this.aggregate( { update: 'filterItemUpdate' } );
* Filter item has changed
*/
+ /**
+ * @event highlightChange
+ * @param {boolean} Highlight feature is enabled
+ *
+ * Highlight feature has been toggled enabled or disabled
+ */
+
/* Methods */
/**
// For example, see two groups with conflicts:
// userExpLevel: [
// {
- // name: 'experienced',
- // conflicts: [ 'unregistered' ]
+ // name: 'experienced',
+ // conflicts: [ 'unregistered' ]
// }
// ],
// registration: [
// {
- // name: 'registered',
+ // name: 'registered',
// },
// {
- // name: 'unregistered',
+ // name: 'unregistered',
// }
// ]
// If we select 'experienced', then 'unregistered' is in conflict (and vice versa),
* Set filters and preserve a group relationship based on
* the definition given by an object
*
- * @param {Object} filters Filter group definition
+ * @param {Array} filters Filter group definition
*/
mw.rcfilters.dm.FiltersViewModel.prototype.initializeFilters = function ( filters ) {
var i, filterItem, selectedFilterNames,
this.clearItems();
this.groups = {};
- $.each( filters, function ( group, data ) {
+ filters.forEach( function ( data ) {
+ var group = data.name;
+
if ( !model.groups[ group ] ) {
model.groups[ group ] = new mw.rcfilters.dm.FilterGroup( group, {
type: data.type,
- title: data.title,
+ title: mw.msg( data.title ),
separator: data.separator,
fullCoverage: !!data.fullCoverage
} );
selectedFilterNames = [];
for ( i = 0; i < data.filters.length; i++ ) {
+ data.filters[ i ].subset = data.filters[ i ].subset || [];
+ data.filters[ i ].subset = data.filters[ i ].subset.map( function ( el ) {
+ return el.filter;
+ } );
+
filterItem = new mw.rcfilters.dm.FilterItem( data.filters[ i ].name, model.groups[ group ], {
group: group,
- label: data.filters[ i ].label,
- description: data.filters[ i ].description,
- subset: data.filters[ i ].subset
+ label: mw.msg( data.filters[ i ].label ),
+ description: mw.msg( data.filters[ i ].description ),
+ subset: data.filters[ i ].subset,
+ cssClass: data.filters[ i ].cssClass
} );
// For convenience, we should store each filter's "supersets" -- these are
mw.rcfilters.dm.FiltersViewModel.prototype.setFiltersToDefaults = function () {
var defaultFilterStates = this.getFiltersFromParameters( this.getDefaultParams() );
- this.updateFilters( defaultFilterStates );
+ this.toggleFiltersSelected( defaultFilterStates );
};
/**
}
}
- if ( values.length === 0 || values.length === filterItems.length ) {
+ if ( values.length === filterItems.length ) {
result[ group ] = 'all';
} else {
result[ group ] = values.join( model.getSeparator() );
return result;
};
+ /**
+ * Get the highlight parameters based on current filter configuration
+ *
+ * @return {object} Object where keys are "<filter name>_color" and values
+ * are the selected highlight colors.
+ */
+ mw.rcfilters.dm.FiltersViewModel.prototype.getHighlightParameters = function () {
+ var result = { highlight: Number( this.isHighlightEnabled() ) };
+
+ this.getItems().forEach( function ( filterItem ) {
+ result[ filterItem.getName() + '_color' ] = filterItem.getHighlightColor();
+ } );
+ return result;
+ };
+
/**
* Sanitize value group of a string_option groups type
* Remove duplicates and make sure to only use valid
* @return {boolean} Current filters are all empty
*/
mw.rcfilters.dm.FiltersViewModel.prototype.areCurrentFiltersEmpty = function () {
- var currFilters = this.getSelectedState();
-
- return Object.keys( currFilters ).every( function ( filterName ) {
- return !currFilters[ filterName ];
+ // Check if there are either any selected items or any items
+ // that have highlight enabled
+ return !this.getItems().some( function ( filterItem ) {
+ return filterItem.isSelected() || filterItem.isHighlighted();
} );
};
* This is equivalent to display all.
*/
mw.rcfilters.dm.FiltersViewModel.prototype.emptyAllFilters = function () {
- var filters = {};
-
this.getItems().forEach( function ( filterItem ) {
- filters[ filterItem.getName() ] = false;
- } );
+ this.toggleFilterSelected( filterItem.getName(), false );
+ }.bind( this ) );
+ };
- // Update filters
- this.updateFilters( filters );
+ /**
+ * Toggle selected state of one item
+ *
+ * @param {string} name Name of the filter item
+ * @param {boolean} [isSelected] Filter selected state
+ */
+ mw.rcfilters.dm.FiltersViewModel.prototype.toggleFilterSelected = function ( name, isSelected ) {
+ this.getItemByName( name ).toggleSelected( isSelected );
};
/**
*
* @param {Object} filterDef Filter definitions
*/
- mw.rcfilters.dm.FiltersViewModel.prototype.updateFilters = function ( filterDef ) {
- var name, filterItem;
-
- for ( name in filterDef ) {
- filterItem = this.getItemByName( name );
- filterItem.toggleSelected( filterDef[ name ] );
- }
+ mw.rcfilters.dm.FiltersViewModel.prototype.toggleFiltersSelected = function ( filterDef ) {
+ Object.keys( filterDef ).forEach( function ( name ) {
+ this.toggleFilterSelected( name, filterDef[ name ] );
+ }.bind( this ) );
};
/**
return result;
};
+ /**
+ * Get items that are highlighted
+ *
+ * @return {mw.rcfilters.dm.FilterItem[]} Highlighted items
+ */
+ mw.rcfilters.dm.FiltersViewModel.prototype.getHighlightedItems = function () {
+ return this.getItems().filter( function ( filterItem ) {
+ return filterItem.isHighlightSupported() &&
+ filterItem.getHighlightColor();
+ } );
+ };
+
+ /**
+ * Toggle the highlight feature on and off.
+ * Propagate the change to filter items.
+ *
+ * @param {boolean} enable Highlight should be enabled
+ * @fires highlightChange
+ */
+ mw.rcfilters.dm.FiltersViewModel.prototype.toggleHighlight = function ( enable ) {
+ enable = enable === undefined ? !this.highlightEnabled : enable;
+
+ if ( this.highlightEnabled !== enable ) {
+ this.highlightEnabled = enable;
+
+ this.getItems().forEach( function ( filterItem ) {
+ filterItem.toggleHighlight( this.highlightEnabled );
+ }.bind( this ) );
+
+ this.emit( 'highlightChange', this.highlightEnabled );
+ }
+ };
+
+ /**
+ * Check if the highlight feature is enabled
+ * @return {boolean}
+ */
+ mw.rcfilters.dm.FiltersViewModel.prototype.isHighlightEnabled = function () {
+ return !!this.highlightEnabled;
+ };
+
+ /**
+ * Set highlight color for a specific filter item
+ *
+ * @param {string} filterName Name of the filter item
+ * @param {string} color Selected color
+ */
+ mw.rcfilters.dm.FiltersViewModel.prototype.setHighlightColor = function ( filterName, color ) {
+ this.getItemByName( filterName ).setHighlightColor( color );
+ };
+
+ /**
+ * Clear highlight for a specific filter item
+ *
+ * @param {string} filterName Name of the filter item
+ */
+ mw.rcfilters.dm.FiltersViewModel.prototype.clearHighlightColor = function ( filterName ) {
+ this.getItemByName( filterName ).clearHighlightColor();
+ };
+
+ /**
+ * Clear highlight for all filter items
+ */
+ mw.rcfilters.dm.FiltersViewModel.prototype.clearAllHighlightColors = function () {
+ this.getItems().forEach( function ( filterItem ) {
+ filterItem.clearHighlightColor();
+ } );
+ };
}( mediaWiki, jQuery ) );