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

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