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

   1 ( function ( mw, $ ) {
   2         /**
   3          * Menu header for the RCFilters filters menu
   4          *
   5          * @class
   6          * @extends OO.ui.Widget
   7          *
   8          * @constructor
   9          * @param {mw.rcfilters.Controller} controller Controller
  10          * @param {mw.rcfilters.dm.FiltersViewModel} model View model
  11          * @param {Object} config Configuration object
  12          * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
  13          */
  14         mw.rcfilters.ui.FilterMenuHeaderWidget = function MwRcfiltersUiFilterMenuHeaderWidget( controller, model, config ) {
  15                 config = config || {};
  16
  17                 this.controller = controller;
  18                 this.model = model;
  19                 this.$overlay = config.$overlay || this.$element;
  20
  21                 // Parent
  22                 mw.rcfilters.ui.FilterMenuHeaderWidget.parent.call( this, config );
  23                 OO.ui.mixin.LabelElement.call( this, $.extend( {
  24                         label: mw.msg( 'rcfilters-filterlist-title' ),
  25                         $label: $( '<div>' )
  26                                 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-title' )
  27                 }, config ) );
  28
  29                 // "Back" to default view button
  30                 this.backButton = new OO.ui.ButtonWidget( {
  31                         icon: 'previous',
  32                         framed: false,
  33                         title: mw.msg( 'rcfilters-view-return-to-default-tooltip' ),
  34                         classes: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-backButton' ]
  35                 } );
  36                 this.backButton.toggle( this.model.getCurrentView() !== 'default' );
  37
  38                 // Highlight button
  39                 this.highlightButton = new OO.ui.ToggleButtonWidget( {
  40                         icon: 'highlight',
  41                         label: mw.message( 'rcfilters-highlightbutton-title' ).text(),
  42                         classes: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-hightlightButton' ]
  43                 } );
  44
  45                 // Invert namespaces button
  46                 this.invertNamespacesButton = new OO.ui.ToggleButtonWidget( {
  47                         icon: '',
  48                         classes: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-invertNamespacesButton' ]
  49                 } );
  50                 this.invertNamespacesButton.toggle( this.model.getCurrentView() === 'namespaces' );
  51                 this.updateInvertButton( this.model.areNamespacesInverted() );
  52
  53                 // Events
  54                 this.backButton.connect( this, { click: 'onBackButtonClick' } );
  55                 this.highlightButton
  56                         .connect( this, { click: 'onHighlightButtonClick' } );
  57                 this.invertNamespacesButton
  58                         .connect( this, { click: 'onInvertNamespacesButtonClick' } );
  59                 this.model.connect( this, {
  60                         highlightChange: 'onModelHighlightChange',
  61                         invertChange: 'onModelInvertChange',
  62                         update: 'onModelUpdate'
  63                 } );
  64
  65                 // Initialize
  66                 this.$element
  67                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget' )
  68                         .append(
  69                                 $( '<div>' )
  70                                         .addClass( 'mw-rcfilters-ui-table' )
  71                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header' )
  72                                         .append(
  73                                                 $( '<div>' )
  74                                                         .addClass( 'mw-rcfilters-ui-row' )
  75                                                         .append(
  76                                                                 $( '<div>' )
  77                                                                         .addClass( 'mw-rcfilters-ui-cell' )
  78                                                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-back' )
  79                                                                         .append( this.backButton.$element ),
  80                                                                 $( '<div>' )
  81                                                                         .addClass( 'mw-rcfilters-ui-cell' )
  82                                                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-title' )
  83                                                                         .append( this.$label ),
  84                                                                 $( '<div>' )
  85                                                                         .addClass( 'mw-rcfilters-ui-cell' )
  86                                                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-invert' )
  87                                                                         .append( this.invertNamespacesButton.$element ),
  88                                                                 $( '<div>' )
  89                                                                         .addClass( 'mw-rcfilters-ui-cell' )
  90                                                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-highlight' )
  91                                                                         .append( this.highlightButton.$element )
  92                                                         )
  93                                         )
  94                         );
  95         };
  96
  97         /* Initialization */
  98
  99         OO.inheritClass( mw.rcfilters.ui.FilterMenuHeaderWidget, OO.ui.Widget );
 100         OO.mixinClass( mw.rcfilters.ui.FilterMenuHeaderWidget, OO.ui.mixin.LabelElement );
 101
 102         /* Methods */
 103
 104         /**
 105          * Respond to model update event
 106          */
 107         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onModelUpdate = function () {
 108                 var currentView = this.model.getCurrentView();
 109
 110                 this.setLabel( this.model.getViewTitle( currentView ) );
 111
 112                 this.invertNamespacesButton.toggle( currentView === 'namespaces' );
 113                 this.backButton.toggle( currentView !== 'default' );
 114         };
 115
 116         /**
 117          * Respond to model highlight change event
 118          *
 119          * @param {boolean} highlightEnabled Highlight is enabled
 120          */
 121         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onModelHighlightChange = function ( highlightEnabled ) {
 122                 this.highlightButton.setActive( highlightEnabled );
 123         };
 124
 125         /**
 126          * Respond to model invert change event
 127          *
 128          * @param {boolean} isInverted Namespaces selection is inverted
 129          */
 130         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onModelInvertChange = function ( isInverted ) {
 131                 this.updateInvertButton( isInverted );
 132         };
 133
 134         /**
 135          * Update the state of the invert button
 136          *
 137          * @param {boolean} isInverted Namespaces selection is inverted
 138          */
 139         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.updateInvertButton = function ( isInverted ) {
 140                 this.invertNamespacesButton.setActive( isInverted );
 141                 this.invertNamespacesButton.setLabel(
 142                         isInverted ?
 143                                 mw.msg( 'rcfilters-exclude-button-on' ) :
 144                                 mw.msg( 'rcfilters-exclude-button-off' )
 145                 );
 146         };
 147
 148         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onBackButtonClick = function () {
 149                 this.controller.switchView( 'default' );
 150         };
 151
 152         /**
 153          * Respond to highlight button click
 154          */
 155         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onHighlightButtonClick = function () {
 156                 this.controller.toggleHighlight();
 157         };
 158
 159         /**
 160          * Respond to highlight button click
 161          */
 162         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onInvertNamespacesButtonClick = function () {
 163                 this.controller.toggleInvertedNamespaces();
 164         };
 165 }( mediaWiki, jQuery ) );