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

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