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

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