Mooeypoo has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/327419 )
Change subject: [wip] Create active/inactive behavior for complementary filters
......................................................................
[wip] Create active/inactive behavior for complementary filters
Filters that are complementary or that contain one another should
indicate that they are inactive (or ineffective/disabled/excluded)
from the search.
Bug: T149452
Change-Id: Ie58493ef940698dddb04362473664c404f392b2b
---
M resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FilterItem.js
M resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FiltersViewModel.js
M
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
M
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterGroupWidget.less
M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemWidget.less
M resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterGroupWidget.js
M resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemWidget.js
M resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
8 files changed, 131 insertions(+), 9 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/19/327419/1
diff --git a/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FilterItem.js
b/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FilterItem.js
index 97ff4e2..e62b866 100644
--- a/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FilterItem.js
+++ b/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FilterItem.js
@@ -11,6 +11,7 @@
* @cfg {string} [label] The label for the filter
* @cfg {string} [description] The description of the filter
* @cfg {boolean} [selected] Filter is selected
+ * @cfg {boolean} [active=true] The filter is active and affecting the
result
*/
mw.rcfilters.dm.FilterItem = function MwRcfiltersDmFilterItem( name,
config ) {
config = config || {};
@@ -24,6 +25,7 @@
this.description = config.description;
this.selected = !!config.selected;
+ this.active = config.active === undefined ? true :
!!config.active;
};
/* Initialization */
@@ -35,7 +37,6 @@
/**
* @event update
- * @param {boolean} isSelected Filter is selected
*
* The state of this filter has changed
*/
@@ -88,6 +89,30 @@
};
/**
+ * Check if this filter is active
+ *
+ * @return {boolean} Filter is active
+ */
+ mw.rcfilters.dm.FilterItem.prototype.isActive = function () {
+ return this.active;
+ };
+
+ /**
+ * Toggle the selected state of the item
+ *
+ * @param {boolean} [isSelected] Filter is selected
+ * @fires update
+ */
+ mw.rcfilters.dm.FilterItem.prototype.toggleActive = function ( isActive
) {
+ isActive = isActive === undefined ? !this.active : isActive;
+
+ if ( this.active !== isActive ) {
+ this.active = isActive;
+ this.emit( 'update' );
+ }
+ };
+
+ /**
* Toggle the selected state of the item
*
* @param {boolean} [isSelected] Filter is selected
@@ -98,7 +123,8 @@
if ( this.selected !== isSelected ) {
this.selected = isSelected;
- this.emit( 'update', this.selected );
+ this.emit( 'update' );
}
};
+
}( mediaWiki ) );
diff --git
a/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FiltersViewModel.js
b/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FiltersViewModel.js
index 60826a2..cf7aff7 100644
--- a/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FiltersViewModel.js
+++ b/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FiltersViewModel.js
@@ -45,6 +45,7 @@
* @event itemUpdate
* @param {mw.rcfilters.dm.FilterItem} item Filter item updated
* @param {boolean} isSelected Filter is selected
+ * @param {boolean} isActive Filter is active
*
* Filter item has changed
*/
@@ -58,10 +59,47 @@
* @param {boolean} isSelected Filter item is selected
* @fires filterUpdate
*/
- mw.rcfilters.dm.FiltersViewModel.prototype.onFilterItemUpdate =
function ( item, isSelected ) {
+ mw.rcfilters.dm.FiltersViewModel.prototype.onFilterItemUpdate =
function ( item ) {
// Update parameter state
this.updateParameters( this.getFiltersToParameters() );
- this.emit( 'itemUpdate', item, isSelected );
+
+ this.calculateActiveFilters( item );
+
+ this.emit( 'itemUpdate', item, item.isSelected(),
item.isActive() );
+ };
+
+ /**
+ * Calculate the active state of the filters, based on selected filters
in the group.
+ *
+ * @param {[type]} item Changed item
+ * @return {[type]} [description]
+ */
+ mw.rcfilters.dm.FiltersViewModel.prototype.calculateActiveFilters =
function ( item ) {
+ var group = item.getGroup(),
+ model = this,
+ selectedItemCounter = 0;
+
+ if ( !this.groups[ group ].exclusion_type ) {
+ // Default behavior
+ // - If there are unselected items in the group, they
are inactive
+ // - If the entire group is selected, all are inactive
+
+ // Check what's selected in the group
+ selectedItemCounter = 0;
+ this.groups[ group ].filters.forEach( function (
filterItem ) {
+ selectedItemCounter += Number(
filterItem.isSelected() );
+ } );
+debugger;
+ this.groups[ group ].filters.forEach( function (
filterItem ) {
+ if ( selectedItemCounter === model.groups[
group ].filters.length ) {
+ // All items are selected; they're all
inactive
+ filterItem.toggleActive( false );
+ } else {
+ // Some items are selected.. the
unselected ones are inactive
+ filterItem.toggleActive(
filterItem.isSelected() );
+ }
+ } );
+ }
};
/**
@@ -255,6 +293,27 @@
};
/**
+ * Checks whether the filter group is active. This means at least one
+ * filter is selected, but not all filters are selected.
+ *
+ * @param {string} groupName Group name
+ * @return {boolean} Filter group is active
+ */
+ mw.rcfilters.dm.FiltersViewModel.prototype.isFilterGroupActive =
function ( groupName ) {
+ var count = 0,
+ filters = this.groups[ groupName ].filters;
+
+ filters.forEach( function ( filterItem ) {
+ count += Number( filterItem.isSelected() );
+ } );
+
+ return (
+ count > 0 &&
+ count < filters.length
+ );
+ };
+
+ /**
* Update the representation of the parameters. These are the back-end
* parameters representing the filters, but they represent the given
* current state regardless of validity.
diff --git
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
index 2d34383..2d26bce 100644
---
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
+++
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
@@ -4,6 +4,10 @@
color: #54595D;
}
+ &-item-inactive {
+ opacity: 0.5;
+ }
+
.oo-ui-capsuleItemWidget {
color: #222222;
background-color: #ffffff;
diff --git
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterGroupWidget.less
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterGroupWidget.less
index 21bdf32..60e1c1f 100644
---
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterGroupWidget.less
+++
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterGroupWidget.less
@@ -7,6 +7,12 @@
color: #555A5F;
}
+ &-active {
+ .mw-rcfilters-ui-filterGroupWidget-title {
+ font-weight: bold;
+ }
+ }
+
&-invalid-notice {
padding: 0.5em;
font-style: italic;
diff --git
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemWidget.less
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemWidget.less
index f2137c9..f100038 100644
---
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemWidget.less
+++
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemWidget.less
@@ -15,4 +15,8 @@
.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline {
margin-bottom: 0 !important;
}
+
+ &-inactive {
+ opacity: 0.5;
+ }
}
diff --git
a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterGroupWidget.js
b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterGroupWidget.js
index baea8c5..fd582ad 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterGroupWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterGroupWidget.js
@@ -61,4 +61,13 @@
this.$element.toggleClass(
'mw-rcfilters-ui-filterGroupWidget-invalid', !isValid );
};
+ /**
+ * Toggle the active state of this group
+ *
+ * @param {boolean} isActive The group is active
+ */
+ mw.rcfilters.ui.FilterGroupWidget.prototype.toggleActiveState =
function ( isActive ) {
+ this.$element.toggleClass(
'mw-rcfilters-ui-filterGroupWidget-active', isActive );
+ };
+
}( mediaWiki, jQuery ) );
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 3561f64..ba93044 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemWidget.js
@@ -78,8 +78,10 @@
*
* @param {boolean} isSelected Filter is selected
*/
- mw.rcfilters.ui.FilterItemWidget.prototype.onModelUpdate = function (
isSelected ) {
- this.checkboxWidget.setSelected( isSelected );
+ mw.rcfilters.ui.FilterItemWidget.prototype.onModelUpdate = function () {
+ this.checkboxWidget.setSelected( this.model.isSelected() );
+debugger;
+ this.$element.toggleClass(
'mw-rcfilters-ui-filterItemWidget-inactive', !this.model.isActive() );
};
/**
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 d901ebd..62e0b93 100644
---
a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
+++
b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
@@ -165,15 +165,27 @@
* Respond to model item update
*
* @param {mw.rcfilters.dm.FilterItem} item Filter item that was updated
- * @param {boolean} isSelected State of the filter
*/
- mw.rcfilters.ui.FilterWrapperWidget.prototype.onModelItemUpdate =
function ( item, isSelected ) {
- if ( isSelected ) {
+ mw.rcfilters.ui.FilterWrapperWidget.prototype.onModelItemUpdate =
function ( item ) {
+ var widget = this;
+
+ if ( item.isSelected() ) {
this.capsule.addItemsFromData( [ item.getName() ] );
+
+ // Deal with active/inactive capsule filter items
+ this.capsule.getItemFromData( item.getName() ).$element
+ .toggleClass(
'mw-rcfilters-ui-filterCapsuleMultiselectWidget-item-inactive',
!item.isActive() );
} else {
this.capsule.removeItemsFromData( [ item.getName() ] );
}
+ // Toggle the active state of the group
+ this.filterPopup.getItems().forEach( function ( groupWidget ) {
+ if ( groupWidget.getName() === item.getGroup() ) {
+ groupWidget.toggleActiveState(
widget.model.isFilterGroupActive( groupWidget.getName() ) );
+ }
+ } );
+
if ( !this.model.isLoading() ) {
if ( this.model.areAllParameterGroupsValid() ) {
this.capsule.removeItemsFromData( [ 'invalid' ]
);
--
To view, visit https://gerrit.wikimedia.org/r/327419
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ie58493ef940698dddb04362473664c404f392b2b
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <mor...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
