resources/src/mediawiki.rcfilters/ui/HighlightPopupWidget.js

   1 const HighlightColorPickerWidget = require( './HighlightColorPickerWidget.js' );
   2 /**
   3  * A popup containing a color picker, for setting highlight colors.
   4  *
   5  * @class mw.rcfilters.ui.HighlightPopupWidget
   6  * @ignore
   7  * @extends OO.ui.PopupWidget
   8  *
   9  * @param {mw.rcfilters.Controller} controller RCFilters controller
  10  * @param {Object} [config] Configuration object
  11  */
  12 const HighlightPopupWidget = function MwRcfiltersUiHighlightPopupWidget( controller, config ) {
  13         config = config || {};
  14
  15         // Parent
  16         HighlightPopupWidget.super.call( this, Object.assign( {
  17                 autoClose: true,
  18                 anchor: false,
  19                 padded: true,
  20                 align: 'backwards',
  21                 horizontalPosition: 'end',
  22                 width: 290
  23         }, config ) );
  24
  25         this.colorPicker = new HighlightColorPickerWidget( controller );
  26
  27         this.colorPicker.connect( this, { chooseColor: 'onChooseColor' } );
  28
  29         this.$body.append( this.colorPicker.$element );
  30 };
  31
  32 /* Initialization */
  33
  34 OO.inheritClass( HighlightPopupWidget, OO.ui.PopupWidget );
  35
  36 /* Methods */
  37
  38 /**
  39  * Set the button (or other widget) that this popup should hang off.
  40  *
  41  * @param {OO.ui.Widget} widget Widget the popup should orient itself to
  42  */
  43 HighlightPopupWidget.prototype.setAssociatedButton = function ( widget ) {
  44         this.setFloatableContainer( widget.$element );
  45         this.$autoCloseIgnore = widget.$element;
  46 };
  47
  48 /**
  49  * Set the filter item that this popup should control the highlight color for.
  50  *
  51  * @param {mw.rcfilters.dm.FilterItem} item
  52  */
  53 HighlightPopupWidget.prototype.setFilterItem = function ( item ) {
  54         this.colorPicker.setFilterItem( item );
  55 };
  56
  57 /**
  58  * When the user chooses a color in the color picker, close the popup.
  59  */
  60 HighlightPopupWidget.prototype.onChooseColor = function () {
  61         this.toggle( false );
  62 };
  63
  64 module.exports = HighlightPopupWidget;