resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemHighlightButton.js

   1 ( function ( mw, $ ) {
   2         /**
   3          * A button to configure highlight for a filter item
   4          *
   5          * @extends OO.ui.PopupButtonWidget
   6          *
   7          * @constructor
   8          * @param {mw.rcfilters.Controller} controller RCFilters controller
   9          * @param {mw.rcfilters.dm.FilterItem} model Filter item model
  10          * @param {Object} [config] Configuration object
  11          */
  12         mw.rcfilters.ui.FilterItemHighlightButton = function MwRcfiltersUiFilterItemHighlightButton( controller, model, config ) {
  13                 config = config || {};
  14
  15                 this.colorPickerWidget = new mw.rcfilters.ui.HighlightColorPickerWidget( controller, model );
  16
  17                 // Parent
  18                 mw.rcfilters.ui.FilterItemHighlightButton.parent.call( this, $.extend( true, {}, config, {
  19                         icon: 'highlight',
  20                         indicator: 'down',
  21                         popup: {
  22                                 // TODO: There is a bug in non-anchored popups in
  23                                 // OOUI, so we set this popup to "anchored" until
  24                                 // the bug is fixed.
  25                                 // See: https://phabricator.wikimedia.org/T159906
  26                                 anchor: true,
  27                                 padded: true,
  28                                 align: 'backwards',
  29                                 horizontalPosition: 'end',
  30                                 $floatableContainer: this.$element,
  31                                 width: 290,
  32                                 $content: this.colorPickerWidget.$element
  33                         }
  34                 } ) );
  35
  36                 this.controller = controller;
  37                 this.model = model;
  38
  39                 // Event
  40                 this.model.connect( this, { update: 'onModelUpdate' } );
  41                 this.colorPickerWidget.connect( this, { chooseColor: 'onChooseColor' } );
  42                 // This lives inside a MenuOptionWidget, which intercepts mousedown
  43                 // to select the item. We want to prevent that when we click the highlight
  44                 // button
  45                 this.$element.on( 'mousedown', function ( e ) { e.stopPropagation(); } );
  46
  47                 this.$element
  48                         .addClass( 'mw-rcfilters-ui-filterItemHighlightButton' );
  49         };
  50
  51         /* Initialization */
  52
  53         OO.inheritClass( mw.rcfilters.ui.FilterItemHighlightButton, OO.ui.PopupButtonWidget );
  54
  55         /* Static Properties */
  56
  57         /**
  58          * @static
  59          * @inheritdoc
  60          */
  61         mw.rcfilters.ui.FilterItemHighlightButton.static.cancelButtonMouseDownEvents = true;
  62
  63         /* Methods */
  64
  65         /**
  66          * Respond to item model update event
  67          */
  68         mw.rcfilters.ui.FilterItemHighlightButton.prototype.onModelUpdate = function () {
  69                 var currentColor = this.model.getHighlightColor(),
  70                         widget = this;
  71
  72                 this.$icon.toggleClass(
  73                         'mw-rcfilters-ui-filterItemHighlightButton-circle',
  74                         currentColor !== null
  75                 );
  76
  77                 mw.rcfilters.HighlightColors.forEach( function ( c ) {
  78                         widget.$icon
  79                                 .toggleClass(
  80                                         'mw-rcfilters-ui-filterItemHighlightButton-circle-color-' + c,
  81                                         c === currentColor
  82                                 );
  83                 } );
  84         };
  85
  86         mw.rcfilters.ui.FilterItemHighlightButton.prototype.onChooseColor = function () {
  87                 this.popup.toggle( false );
  88         };
  89 }( mediaWiki, jQuery ) );