@import "mw.rcfilters.mixins";
.mw-rcfilters-ui-capsuleItemWidget {
+ background-color: #fff;
+ border-color: #979797;
+ color: #222;
+
+ &-muted {
+ // Muted state
+ background-color: #eaecf0;
+ border-color: #c8ccd1;
+ .oo-ui-labelElement-label {
+ color: #72777d;
+ }
+
+ .oo-ui-buttonWidget {
+ opacity: @muted-opacity;
+ }
+ }
+
+ &-selected {
+ background-color: #eaf3ff;
+ border-color: #36c;
+ }
+
&-popup-content {
padding: 0.5em;
color: #54595d;
cursor: pointer;
}
- &-muted {
- // Muted state
- // We want everything muted except the circle
- background-color: rgba( 255, 255, 255, @muted-opacity );
-
- .oo-ui-labelElement-label,
- .oo-ui-buttonWidget {
- opacity: @muted-opacity;
- }
- }
-
&-highlight {
display: none;
padding-right: 0.5em;
text-align: right;
padding-left: 0.5em;
}
-
- .oo-ui-capsuleItemWidget {
- color: #222;
- background-color: #fff;
- }
}
this.popupTimeoutShow = null;
};
+ /**
+ * Set selected state on this widget
+ *
+ * @param {boolean} [isSelected] Widget is selected
+ */
+ mw.rcfilters.ui.CapsuleItemWidget.prototype.toggleSelected = function ( isSelected ) {
+ isSelected = isSelected !== undefined ? isSelected : !this.selected;
+
+ if ( this.selected !== isSelected ) {
+ this.selected = isSelected;
+
+ this.$element.toggleClass( 'mw-rcfilters-ui-capsuleItemWidget-selected', this.selected );
+ }
+ };
+
/**
* Remove and destroy external elements of this widget
*/
this.model = model;
this.filterInput = filterInput;
this.isSelecting = false;
+ this.selected = null;
this.resetButton = new OO.ui.ButtonWidget( {
icon: 'trash',
this.emptyFilterMessage.toggle( currFiltersAreEmpty );
};
+ /**
+ * Mark an item widget as selected
+ *
+ * @param {mw.rcfilters.ui.CapsuleItemWidget} item Capsule widget
+ */
+ mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.select = function ( item ) {
+ if ( this.selected !== item ) {
+ // Unselect previous
+ if ( this.selected ) {
+ this.selected.toggleSelected( false );
+ }
+
+ // Select new one
+ this.selected = item;
+ if ( this.selected ) {
+ item.toggleSelected( true );
+ }
+ }
+ };
+
+ /**
+ * Reset selection and remove selected states from all items
+ */
+ mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.resetSelection = function () {
+ if ( this.selected !== null ) {
+ this.selected = null;
+ this.getItems().forEach( function ( capsuleWidget ) {
+ capsuleWidget.toggleSelected( false );
+ } );
+ }
+ };
+
/**
* @inheritdoc
*/
// Highlight item
this.filterPopup.select( filterName );
+ this.capsule.select( item );
this.scrollToTop( filterWidget.$element );
};
mw.rcfilters.ui.FilterWrapperWidget.prototype.onCapsulePopupToggle = function ( isVisible ) {
if ( !isVisible ) {
this.filterPopup.resetSelection();
+ this.capsule.resetSelection();
} else {
this.scrollToTop( this.capsule.$element, 10 );
}