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

   1 ( function ( mw, $ ) {
   2         /**
   3          * Menu header for the RCFilters filters menu
   4          *
   5          * @extends OO.ui.Widget
   6          *
   7          * @constructor
   8          * @param {mw.rcfilters.Controller} controller Controller
   9          * @param {mw.rcfilters.dm.FiltersViewModel} model View model
  10          * @param {Object} config Configuration object
  11          * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
  12          */
  13         mw.rcfilters.ui.FilterMenuHeaderWidget = function MwRcfiltersUiFilterMenuHeaderWidget( controller, model, config ) {
  14                 config = config || {};
  15
  16                 this.controller = controller;
  17                 this.model = model;
  18                 this.$overlay = config.$overlay || this.$element;
  19
  20                 // Parent
  21                 mw.rcfilters.ui.FilterMenuHeaderWidget.parent.call( this, config );
  22                 OO.ui.mixin.LabelElement.call( this, $.extend( {
  23                         label: mw.msg( 'rcfilters-filterlist-title' ),
  24                         $label: $( '<div>' )
  25                                 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-title' )
  26                 }, config ) );
  27
  28                 // Highlight button
  29                 this.highlightButton = new OO.ui.ToggleButtonWidget( {
  30                         icon: 'highlight',
  31                         label: mw.message( 'rcfilters-highlightbutton-title' ).text(),
  32                         classes: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-hightlightButton' ]
  33                 } );
  34
  35                 // Events
  36                 this.highlightButton
  37                         .connect( this, { click: 'onHighlightButtonClick' } );
  38                 this.model.connect( this, { highlightChange: 'onModelHighlightChange' } );
  39
  40                 // Initialize
  41                 this.$element
  42                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget' )
  43                         .append(
  44                                 $( '<div>' )
  45                                         .addClass( 'mw-rcfilters-ui-table' )
  46                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header' )
  47                                         .append(
  48                                                 $( '<div>' )
  49                                                         .addClass( 'mw-rcfilters-ui-row' )
  50                                                         .append(
  51                                                                 $( '<div>' )
  52                                                                         .addClass( 'mw-rcfilters-ui-cell' )
  53                                                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-title' )
  54                                                                         .append( this.$label ),
  55                                                                 $( '<div>' )
  56                                                                         .addClass( 'mw-rcfilters-ui-cell' )
  57                                                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-highlight' )
  58                                                                         .append( this.highlightButton.$element )
  59                                                         )
  60                                         )
  61                         );
  62         };
  63
  64         /* Initialization */
  65
  66         OO.inheritClass( mw.rcfilters.ui.FilterMenuHeaderWidget, OO.ui.Widget );
  67         OO.mixinClass( mw.rcfilters.ui.FilterMenuHeaderWidget, OO.ui.mixin.LabelElement );
  68
  69         /* Methods */
  70
  71         /**
  72          * Respond to model highlight change event
  73          *
  74          * @param {boolean} highlightEnabled Highlight is enabled
  75          */
  76         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onModelHighlightChange = function ( highlightEnabled ) {
  77                 this.highlightButton.setActive( highlightEnabled );
  78         };
  79
  80         /**
  81          * Respond to highlight button click
  82          */
  83         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onHighlightButtonClick = function () {
  84                 this.controller.toggleHighlight();
  85         };
  86 }( mediaWiki, jQuery ) );