X-Git-Url: https://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.rcfilters%2Fui%2Fmw.rcfilters.ui.FilterCapsuleMultiselectWidget.js;h=f4f460dca91f8494bf7d844f82f0e5eca2d4ae75;hb=93ba0cc7354e24dc9a9e470eb5628d8b41864024;hp=2bd2f0e194a01fb144ccf907ce7f5672370f6ddd;hpb=6c0b0f8ae3094f86580dd3c3a0dded421d7c86e7;p=lhc%2Fweb%2Fwiklou.git

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
index 2bd2f0e194..f4f460dca9 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
@@ -11,8 +11,6 @@
 	 * @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( {
@@ -26,19 +24,20 @@
 
 		// 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' ]
 		} );
 
@@ -50,11 +49,12 @@
 
 		// 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
@@ -168,25 +168,12 @@
 	};
 
 	/**
-	 * 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();
 	};
 
 	/**
@@ -204,11 +191,46 @@
 		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
 	 */