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                 // Invert namespaces button
  36                 this.invertNamespacesButton = new OO.ui.ToggleButtonWidget( {
  37                         icon: '',
  38                         label: mw.msg( 'invert' ),
  39                         classes: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-invertNamespacesButton' ]
  40                 } );
  41                 this.invertNamespacesButton.toggle( this.model.getCurrentView() === 'namespaces' );
  42
  43                 // Events
  44                 this.highlightButton
  45                         .connect( this, { click: 'onHighlightButtonClick' } );
  46                 this.invertNamespacesButton
  47                         .connect( this, { click: 'onInvertNamespacesButtonClick' } );
  48                 this.model.connect( this, {
  49                         highlightChange: 'onModelHighlightChange',
  50                         invertChange: 'onModelInvertChange',
  51                         update: 'onModelUpdate'
  52                 } );
  53
  54                 // Initialize
  55                 this.$element
  56                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget' )
  57                         .append(
  58                                 $( '<div>' )
  59                                         .addClass( 'mw-rcfilters-ui-table' )
  60                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header' )
  61                                         .append(
  62                                                 $( '<div>' )
  63                                                         .addClass( 'mw-rcfilters-ui-row' )
  64                                                         .append(
  65                                                                 $( '<div>' )
  66                                                                         .addClass( 'mw-rcfilters-ui-cell' )
  67                                                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-title' )
  68                                                                         .append( this.$label ),
  69                                                                 $( '<div>' )
  70                                                                         .addClass( 'mw-rcfilters-ui-cell' )
  71                                                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-invert' )
  72                                                                         .append( this.invertNamespacesButton.$element ),
  73                                                                 $( '<div>' )
  74                                                                         .addClass( 'mw-rcfilters-ui-cell' )
  75                                                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-highlight' )
  76                                                                         .append( this.highlightButton.$element )
  77                                                         )
  78                                         )
  79                         );
  80         };
  81
  82         /* Initialization */
  83
  84         OO.inheritClass( mw.rcfilters.ui.FilterMenuHeaderWidget, OO.ui.Widget );
  85         OO.mixinClass( mw.rcfilters.ui.FilterMenuHeaderWidget, OO.ui.mixin.LabelElement );
  86
  87         /* Methods */
  88
  89         /**
  90          * Respond to model update event
  91          */
  92         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onModelUpdate = function () {
  93                 this.setLabel( this.model.getCurrentViewLabel() );
  94
  95                 this.invertNamespacesButton.toggle( this.model.getCurrentView() === 'namespaces' );
  96         };
  97
  98         /**
  99          * Respond to model highlight change event
 100          *
 101          * @param {boolean} highlightEnabled Highlight is enabled
 102          */
 103         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onModelHighlightChange = function ( highlightEnabled ) {
 104                 this.highlightButton.setActive( highlightEnabled );
 105         };
 106
 107         /**
 108          * Respond to model invert change event
 109          *
 110          * @param {boolean} isInverted Namespaces selection is inverted
 111          */
 112         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onModelInvertChange = function ( isInverted ) {
 113                 this.invertNamespacesButton.setActive( isInverted );
 114         };
 115
 116         /**
 117          * Respond to highlight button click
 118          */
 119         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onHighlightButtonClick = function () {
 120                 this.controller.toggleHighlight();
 121         };
 122
 123         /**
 124          * Respond to highlight button click
 125          */
 126         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onInvertNamespacesButtonClick = function () {
 127                 this.controller.toggleInvertedNamespaces();
 128         };
 129 }( mediaWiki, jQuery ) );