X-Git-Url: https://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.rcfilters%2Fui%2Fmw.rcfilters.ui.FilterItemHighlightButton.js;h=835cec892e39e2332e2402533903e3f8c7a28d8a;hb=fe94275c8fcfc248a5eae857dde7c5772d993ab5;hp=889ba08cf40c06f2e61a2d94b1d91d92fdbe9e19;hpb=4d609f015dd64528e772bbaa088d378aa26334eb;p=lhc%2Fweb%2Fwiklou.git

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemHighlightButton.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemHighlightButton.js
index 889ba08cf4..f4a40cbbb8 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemHighlightButton.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemHighlightButton.js
@@ -1,4 +1,4 @@
-( function ( mw, $ ) {
+( function () {
 	/**
 	 * A button to configure highlight for a filter item
 	 *
@@ -7,38 +7,30 @@
 	 * @constructor
 	 * @param {mw.rcfilters.Controller} controller RCFilters controller
 	 * @param {mw.rcfilters.dm.FilterItem} model Filter item model
+	 * @param {mw.rcfilters.ui.HighlightPopupWidget} highlightPopup Shared highlight color picker
 	 * @param {Object} [config] Configuration object
 	 */
-	mw.rcfilters.ui.FilterItemHighlightButton = function MwRcfiltersUiFilterItemHighlightButton( controller, model, config ) {
+	mw.rcfilters.ui.FilterItemHighlightButton = function MwRcfiltersUiFilterItemHighlightButton( controller, model, highlightPopup, config ) {
 		config = config || {};
 
-		this.colorPickerWidget = new mw.rcfilters.ui.HighlightColorPickerWidget( controller, model );
-
 		// Parent
-		mw.rcfilters.ui.FilterItemHighlightButton.parent.call( this, $.extend( {}, config, {
+		mw.rcfilters.ui.FilterItemHighlightButton.parent.call( this, $.extend( true, {}, config, {
 			icon: 'highlight',
-			indicator: 'down',
-			popup: {
-				// TODO: There is a bug in non-anchored popups in
-				// OOUI, so we set this popup to "anchored" until
-				// the bug is fixed.
-				// See: https://phabricator.wikimedia.org/T159906
-				anchor: true,
-				padded: true,
-				align: 'backwards',
-				horizontalPosition: 'end',
-				$floatableContainer: this.$element,
-				width: 290,
-				$content: this.colorPickerWidget.$element
-			}
+			indicator: 'down'
 		} ) );
 
 		this.controller = controller;
 		this.model = model;
+		this.popup = highlightPopup;
 
 		// Event
-		this.model.connect( this, { update: 'onModelUpdate' } );
-		this.colorPickerWidget.connect( this, { chooseColor: 'onChooseColor' } );
+		this.model.connect( this, { update: 'updateUiBasedOnModel' } );
+		// This lives inside a MenuOptionWidget, which intercepts mousedown
+		// to select the item. We want to prevent that when we click the highlight
+		// button
+		this.$element.on( 'mousedown', function ( e ) { e.stopPropagation(); } );
+
+		this.updateUiBasedOnModel();
 
 		this.$element
 			.addClass( 'mw-rcfilters-ui-filterItemHighlightButton' );
@@ -48,12 +40,27 @@
 
 	OO.inheritClass( mw.rcfilters.ui.FilterItemHighlightButton, OO.ui.PopupButtonWidget );
 
+	/* Static Properties */
+
+	/**
+	 * @static
+	 */
+	mw.rcfilters.ui.FilterItemHighlightButton.static.cancelButtonMouseDownEvents = true;
+
 	/* Methods */
 
+	mw.rcfilters.ui.FilterItemHighlightButton.prototype.onAction = function () {
+		this.popup.setAssociatedButton( this );
+		this.popup.setFilterItem( this.model );
+
+		// Parent method
+		mw.rcfilters.ui.FilterItemHighlightButton.parent.prototype.onAction.call( this );
+	};
+
 	/**
 	 * Respond to item model update event
 	 */
-	mw.rcfilters.ui.FilterItemHighlightButton.prototype.onModelUpdate = function () {
+	mw.rcfilters.ui.FilterItemHighlightButton.prototype.updateUiBasedOnModel = function () {
 		var currentColor = this.model.getHighlightColor(),
 			widget = this;
 
@@ -70,8 +77,4 @@
 				);
 		} );
 	};
-
-	mw.rcfilters.ui.FilterItemHighlightButton.prototype.onChooseColor = function () {
-		this.popup.toggle( false );
-	};
-}( mediaWiki, jQuery ) );
+}() );