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

   1 ( function ( mw, $ ) {
   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 {mw.rcfilters.dm.FilterItem} model Filter item model
  11          * @param {Object} [config] Configuration object
  12          */
  13         mw.rcfilters.ui.HighlightColorPickerWidget = function MwRcfiltersUiHighlightColorPickerWidget( controller, model, config ) {
  14                 var colors = [ 'none' ].concat( mw.rcfilters.HighlightColors );
  15                 config = config || {};
  16
  17                 // Parent
  18                 mw.rcfilters.ui.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                 this.model = model;
  26
  27                 this.currentSelection = '';
  28                 this.buttonSelect = new OO.ui.ButtonSelectWidget( {
  29                         items: colors.map( function ( color ) {
  30                                 return new OO.ui.ButtonOptionWidget( {
  31                                         icon: color === 'none' ? 'check' : null,
  32                                         data: color,
  33                                         classes: [
  34                                                 'mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect-color',
  35                                                 'mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect-color-' + color
  36                                         ],
  37                                         framed: false
  38                                 } );
  39                         } ),
  40                         classes: 'mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect'
  41                 } );
  42                 this.selectColor( 'none' );
  43
  44                 // Event
  45                 this.model.connect( this, { update: 'onModelUpdate' } );
  46                 this.buttonSelect.connect( this, { choose: 'onChooseColor' } );
  47
  48                 this.$element
  49                         .addClass( 'mw-rcfilters-ui-highlightColorPickerWidget' )
  50                         .append(
  51                                 this.$label
  52                                         .addClass( 'mw-rcfilters-ui-highlightColorPickerWidget-label' ),
  53                                 this.buttonSelect.$element
  54                         );
  55         };
  56
  57         /* Initialization */
  58
  59         OO.inheritClass( mw.rcfilters.ui.HighlightColorPickerWidget, OO.ui.Widget );
  60         OO.mixinClass( mw.rcfilters.ui.HighlightColorPickerWidget, OO.ui.mixin.LabelElement );
  61
  62         /* Events */
  63
  64         /**
  65          * @event chooseColor
  66          * @param {string} The chosen color
  67          *
  68          * A color has been chosen
  69          */
  70
  71         /* Methods */
  72
  73         /**
  74          * Respond to item model update event
  75          */
  76         mw.rcfilters.ui.HighlightColorPickerWidget.prototype.onModelUpdate = function () {
  77                 this.selectColor( this.model.getHighlightColor() || 'none' );
  78         };
  79
  80         /**
  81          * Select the color for this widget
  82          *
  83          * @param {string} color Selected color
  84          */
  85         mw.rcfilters.ui.HighlightColorPickerWidget.prototype.selectColor = function ( color ) {
  86                 var previousItem = this.buttonSelect.getItemFromData( this.currentSelection ),
  87                         selectedItem = this.buttonSelect.getItemFromData( color );
  88
  89                 if ( this.currentSelection !== color ) {
  90                         this.currentSelection = color;
  91
  92                         this.buttonSelect.selectItem( selectedItem );
  93                         if ( previousItem ) {
  94                                 previousItem.setIcon( null );
  95                         }
  96
  97                         if ( selectedItem ) {
  98                                 selectedItem.setIcon( 'check' );
  99                         }
 100                 }
 101         };
 102
 103         mw.rcfilters.ui.HighlightColorPickerWidget.prototype.onChooseColor = function ( button ) {
 104                 var color = button.data;
 105                 if ( color === 'none' ) {
 106                         this.controller.clearHighlightColor( this.model.getName() );
 107                 } else {
 108                         this.controller.setHighlightColor( this.model.getName(), color );
 109                 }
 110                 this.emit( 'chooseColor', color );
 111         };
 112 }( mediaWiki, jQuery ) );