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

   1 /**
   2  * A button to configure highlight for a filter item
   3  *
   4  * @class mw.rcfilters.ui.FilterItemHighlightButton
   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 {mw.rcfilters.ui.HighlightPopupWidget} highlightPopup Shared highlight color picker
  11  * @param {Object} [config] Configuration object
  12  */
  13 var FilterItemHighlightButton = function MwRcfiltersUiFilterItemHighlightButton( controller, model, highlightPopup, config ) {
  14         config = config || {};
  15
  16         // Parent
  17         FilterItemHighlightButton.parent.call( this, $.extend( true, {}, config, {
  18                 icon: 'highlight',
  19                 indicator: 'down'
  20         } ) );
  21
  22         this.controller = controller;
  23         this.model = model;
  24         this.popup = highlightPopup;
  25
  26         // Event
  27         this.model.connect( this, { update: 'updateUiBasedOnModel' } );
  28         // This lives inside a MenuOptionWidget, which intercepts mousedown
  29         // to select the item. We want to prevent that when we click the highlight
  30         // button
  31         this.$element.on( 'mousedown', function ( e ) {
  32                 e.stopPropagation();
  33         } );
  34
  35         this.updateUiBasedOnModel();
  36
  37         this.$element
  38                 .addClass( 'mw-rcfilters-ui-filterItemHighlightButton' );
  39 };
  40
  41 /* Initialization */
  42
  43 OO.inheritClass( FilterItemHighlightButton, OO.ui.PopupButtonWidget );
  44
  45 /* Static Properties */
  46
  47 /**
  48  * @static
  49  */
  50 FilterItemHighlightButton.static.cancelButtonMouseDownEvents = true;
  51
  52 /* Methods */
  53
  54 FilterItemHighlightButton.prototype.onAction = function () {
  55         this.popup.setAssociatedButton( this );
  56         this.popup.setFilterItem( this.model );
  57
  58         // Parent method
  59         FilterItemHighlightButton.parent.prototype.onAction.call( this );
  60 };
  61
  62 /**
  63  * Respond to item model update event
  64  */
  65 FilterItemHighlightButton.prototype.updateUiBasedOnModel = function () {
  66         var currentColor = this.model.getHighlightColor(),
  67                 widget = this;
  68
  69         this.$icon.toggleClass(
  70                 'mw-rcfilters-ui-filterItemHighlightButton-circle',
  71                 currentColor !== null
  72         );
  73
  74         mw.rcfilters.HighlightColors.forEach( function ( c ) {
  75                 widget.$icon
  76                         .toggleClass(
  77                                 'mw-rcfilters-ui-filterItemHighlightButton-circle-color-' + c,
  78                                 c === currentColor
  79                         );
  80         } );
  81 };
  82
  83 module.exports = FilterItemHighlightButton;