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 = 'none';
  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
  43                 // Event
  44                 this.model.connect( this, { update: 'updateUiBasedOnModel' } );
  45                 this.buttonSelect.connect( this, { choose: 'onChooseColor' } );
  46
  47                 this.updateUiBasedOnModel();
  48
  49                 this.$element
  50                         .addClass( 'mw-rcfilters-ui-highlightColorPickerWidget' )
  51                         .append(
  52                                 this.$label
  53                                         .addClass( 'mw-rcfilters-ui-highlightColorPickerWidget-label' ),
  54                                 this.buttonSelect.$element
  55                         );
  56         };
  57
  58         /* Initialization */
  59
  60         OO.inheritClass( mw.rcfilters.ui.HighlightColorPickerWidget, OO.ui.Widget );
  61         OO.mixinClass( mw.rcfilters.ui.HighlightColorPickerWidget, OO.ui.mixin.LabelElement );
  62
  63         /* Events */
  64
  65         /**
  66          * @event chooseColor
  67          * @param {string} The chosen color
  68          *
  69          * A color has been chosen
  70          */
  71
  72         /* Methods */
  73
  74         /**
  75          * Respond to item model update event
  76          */
  77         mw.rcfilters.ui.HighlightColorPickerWidget.prototype.updateUiBasedOnModel = function () {
  78                 this.selectColor( this.model.getHighlightColor() || 'none' );
  79         };
  80
  81         /**
  82          * Select the color for this widget
  83          *
  84          * @param {string} color Selected color
  85          */
  86         mw.rcfilters.ui.HighlightColorPickerWidget.prototype.selectColor = function ( color ) {
  87                 var previousItem = this.buttonSelect.getItemFromData( this.currentSelection ),
  88                         selectedItem = this.buttonSelect.getItemFromData( color );
  89
  90                 if ( this.currentSelection !== color ) {
  91                         this.currentSelection = color;
  92
  93                         this.buttonSelect.selectItem( selectedItem );
  94                         if ( previousItem ) {
  95                                 previousItem.setIcon( null );
  96                         }
  97
  98                         if ( selectedItem ) {
  99                                 selectedItem.setIcon( 'check' );
 100                         }
 101                 }
 102         };
 103
 104         mw.rcfilters.ui.HighlightColorPickerWidget.prototype.onChooseColor = function ( button ) {
 105                 var color = button.data;
 106                 if ( color === 'none' ) {
 107                         this.controller.clearHighlightColor( this.model.getName() );
 108                 } else {
 109                         this.controller.setHighlightColor( this.model.getName(), color );
 110                 }
 111                 this.emit( 'chooseColor', color );
 112         };
 113 }( mediaWiki, jQuery ) );