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

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