* @param {OO.ui.InputWidget} filterInput A filter input that focuses the capsule widget
* @param {Object} config Configuration object
* @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
- * @cfg {number} [topScrollOffset=10] When scrolling the entire widget to the top, leave this
- * much space (in pixels) above the widget.
*/
mw.rcfilters.ui.FilterCapsuleMultiselectWidget = function MwRcfiltersUiFilterCapsuleMultiselectWidget( controller, model, filterInput, config ) {
var title = new OO.ui.LabelWidget( {
// Parent
mw.rcfilters.ui.FilterCapsuleMultiselectWidget.parent.call( this, $.extend( true, {
- popup: { $autoCloseIgnore: filterInput.$element.add( this.$overlay ) }
+ popup: {
+ $autoCloseIgnore: filterInput.$element.add( this.$overlay ),
+ $floatableContainer: filterInput.$element
+ }
}, config ) );
this.controller = controller;
this.model = model;
this.filterInput = filterInput;
-
- this.topScrollOffset = config.topScrollOffset || 10;
+ this.isSelecting = false;
+ this.selected = null;
this.resetButton = new OO.ui.ButtonWidget( {
- icon: 'trash',
framed: false,
- title: mw.msg( 'rcfilters-clear-all-filters' ),
classes: [ 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-resetButton' ]
} );
// Events
this.resetButton.connect( this, { click: 'onResetButtonClick' } );
+ this.resetButton.$element.on( 'mousedown', this.onResetButtonMouseDown.bind( this ) );
this.model.connect( this, {
itemUpdate: 'onModelItemUpdate',
highlightChange: 'onModelHighlightChange'
} );
- this.popup.connect( this, { toggle: 'onPopupToggle' } );
+ this.aggregate( { click: 'capsuleItemClick' } );
// Add the filterInput as trigger
this.filterInput.$input
};
/**
- * Respond to popup toggle event
+ * Respond to mouse down event on the reset button to prevent the popup from opening
*
- * @param {boolean} isVisible Popup is visible
- */
- mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.onPopupToggle = function ( isVisible ) {
- if ( isVisible ) {
- this.scrollToTop();
- }
- };
-
- /**
- * Scroll the capsule to the top of the screen
+ * @param {jQuery.Event} e Event
*/
- mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.scrollToTop = function () {
- var container = OO.ui.Element.static.getClosestScrollableContainer( this.$element[ 0 ], 'y' );
-
- $( container ).animate( {
- scrollTop: this.$element.offset().top - this.topScrollOffset
- } );
+ mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.onResetButtonMouseDown = function ( e ) {
+ e.stopPropagation();
};
/**
this.resetButton.setLabel(
currFiltersAreEmpty ? mw.msg( 'rcfilters-restore-default-filters' ) : ''
);
+ this.resetButton.setTitle(
+ currFiltersAreEmpty ? null : mw.msg( 'rcfilters-clear-all-filters' )
+ );
this.resetButton.toggle( !hideResetButton );
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
*/