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

   1 ( function () {
   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 {mw.rcfilters.ui.HighlightPopupWidget} highlightPopup Shared highlight color picker
  11          * @param {Object} [config] Configuration object
  12          */
  13         mw.rcfilters.ui.FilterItemHighlightButton = function MwRcfiltersUiFilterItemHighlightButton( controller, model, highlightPopup, config ) {
  14                 config = config || {};
  15
  16                 // Parent
  17                 mw.rcfilters.ui.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 ) { e.stopPropagation(); } );
  32
  33                 this.updateUiBasedOnModel();
  34
  35                 this.$element
  36                         .addClass( 'mw-rcfilters-ui-filterItemHighlightButton' );
  37         };
  38
  39         /* Initialization */
  40
  41         OO.inheritClass( mw.rcfilters.ui.FilterItemHighlightButton, OO.ui.PopupButtonWidget );
  42
  43         /* Static Properties */
  44
  45         /**
  46          * @static
  47          */
  48         mw.rcfilters.ui.FilterItemHighlightButton.static.cancelButtonMouseDownEvents = true;
  49
  50         /* Methods */
  51
  52         mw.rcfilters.ui.FilterItemHighlightButton.prototype.onAction = function () {
  53                 this.popup.setAssociatedButton( this );
  54                 this.popup.setFilterItem( this.model );
  55
  56                 // Parent method
  57                 mw.rcfilters.ui.FilterItemHighlightButton.parent.prototype.onAction.call( this );
  58         };
  59
  60         /**
  61          * Respond to item model update event
  62          */
  63         mw.rcfilters.ui.FilterItemHighlightButton.prototype.updateUiBasedOnModel = function () {
  64                 var currentColor = this.model.getHighlightColor(),
  65                         widget = this;
  66
  67                 this.$icon.toggleClass(
  68                         'mw-rcfilters-ui-filterItemHighlightButton-circle',
  69                         currentColor !== null
  70                 );
  71
  72                 mw.rcfilters.HighlightColors.forEach( function ( c ) {
  73                         widget.$icon
  74                                 .toggleClass(
  75                                         'mw-rcfilters-ui-filterItemHighlightButton-circle-color-' + c,
  76                                         c === currentColor
  77                                 );
  78                 } );
  79         };
  80 }() );