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

   1 ( function () {
   2         /**
   3          * A widget representing a filter item highlight color picker
   4          *
   5          * @class mw.rcfilters.ui.HighlightColorPickerWidget
   6          * @extends OO.ui.Widget
   7          * @mixins OO.ui.mixin.LabelElement
   8          *
   9          * @constructor
  10          * @param {mw.rcfilters.Controller} controller RCFilters controller
  11          * @param {Object} [config] Configuration object
  12          */
  13         var HighlightColorPickerWidget = function MwRcfiltersUiHighlightColorPickerWidget( controller, config ) {
  14                 var colors = [ 'none' ].concat( mw.rcfilters.HighlightColors );
  15                 config = config || {};
  16
  17                 // Parent
  18                 HighlightColorPickerWidget.parent.call( this, config );
  19                 // Mixin constructors
  20                 OO.ui.mixin.LabelElement.call( this, $.extend( {}, config, {
  21                         label: mw.message( 'rcfilters-highlightmenu-title' ).text()
  22                 } ) );
  23
  24                 this.controller = controller;
  25
  26                 this.currentSelection = 'none';
  27                 this.buttonSelect = new OO.ui.ButtonSelectWidget( {
  28                         items: colors.map( function ( color ) {
  29                                 return new OO.ui.ButtonOptionWidget( {
  30                                         icon: color === 'none' ? 'check' : null,
  31                                         data: color,
  32                                         classes: [
  33                                                 'mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect-color',
  34                                                 'mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect-color-' + color
  35                                         ],
  36                                         framed: false
  37                                 } );
  38                         } ),
  39                         classes: 'mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect'
  40                 } );
  41
  42                 // Event
  43                 this.buttonSelect.connect( this, { choose: 'onChooseColor' } );
  44
  45                 this.$element
  46                         .addClass( 'mw-rcfilters-ui-highlightColorPickerWidget' )
  47                         .append(
  48                                 this.$label
  49                                         .addClass( 'mw-rcfilters-ui-highlightColorPickerWidget-label' ),
  50                                 this.buttonSelect.$element
  51                         );
  52         };
  53
  54         /* Initialization */
  55
  56         OO.inheritClass( HighlightColorPickerWidget, OO.ui.Widget );
  57         OO.mixinClass( HighlightColorPickerWidget, OO.ui.mixin.LabelElement );
  58
  59         /* Events */
  60
  61         /**
  62          * @event chooseColor
  63          * @param {string} The chosen color
  64          *
  65          * A color has been chosen
  66          */
  67
  68         /* Methods */
  69
  70         /**
  71          * Bind the color picker to an item
  72          * @param {mw.rcfilters.dm.FilterItem} filterItem
  73          */
  74         HighlightColorPickerWidget.prototype.setFilterItem = function ( filterItem ) {
  75                 if ( this.filterItem ) {
  76                         this.filterItem.disconnect( this );
  77                 }
  78
  79                 this.filterItem = filterItem;
  80                 this.filterItem.connect( this, { update: 'updateUiBasedOnModel' } );
  81                 this.updateUiBasedOnModel();
  82         };
  83
  84         /**
  85          * Respond to item model update event
  86          */
  87         HighlightColorPickerWidget.prototype.updateUiBasedOnModel = function () {
  88                 this.selectColor( this.filterItem.getHighlightColor() || 'none' );
  89         };
  90
  91         /**
  92          * Select the color for this widget
  93          *
  94          * @param {string} color Selected color
  95          */
  96         HighlightColorPickerWidget.prototype.selectColor = function ( color ) {
  97                 var previousItem = this.buttonSelect.findItemFromData( this.currentSelection ),
  98                         selectedItem = this.buttonSelect.findItemFromData( color );
  99
 100                 if ( this.currentSelection !== color ) {
 101                         this.currentSelection = color;
 102
 103                         this.buttonSelect.selectItem( selectedItem );
 104                         if ( previousItem ) {
 105                                 previousItem.setIcon( null );
 106                         }
 107
 108                         if ( selectedItem ) {
 109                                 selectedItem.setIcon( 'check' );
 110                         }
 111                 }
 112         };
 113
 114         HighlightColorPickerWidget.prototype.onChooseColor = function ( button ) {
 115                 var color = button.data;
 116                 if ( color === 'none' ) {
 117                         this.controller.clearHighlightColor( this.filterItem.getName() );
 118                 } else {
 119                         this.controller.setHighlightColor( this.filterItem.getName(), color );
 120                 }
 121                 this.emit( 'chooseColor', color );
 122         };
 123
 124         module.exports = HighlightColorPickerWidget;
 125 }() );