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

   1 /**
   2  * Menu header for the RCFilters filters menu.
   3  *
   4  * @class mw.rcfilters.ui.FilterMenuHeaderWidget
   5  * @ignore
   6  * @extends OO.ui.Widget
   7  *
   8  * @param {mw.rcfilters.Controller} controller Controller
   9  * @param {mw.rcfilters.dm.FiltersViewModel} model View model
  10  * @param {Object} config Configuration object
  11  * @param {jQuery} [config.$overlay] A jQuery object serving as overlay for popups
  12  */
  13 const 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         FilterMenuHeaderWidget.super.call( this, config );
  22         OO.ui.mixin.LabelElement.call( this, Object.assign( {
  23                 label: mw.msg( 'rcfilters-filterlist-title' ),
  24                 $label: $( '<div>' )
  25                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-title' )
  26         }, config ) );
  27
  28         // "Back" to default view button
  29         this.backButton = new OO.ui.ButtonWidget( {
  30                 icon: 'previous',
  31                 framed: false,
  32                 title: mw.msg( 'rcfilters-view-return-to-default-tooltip' ),
  33                 classes: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-backButton' ]
  34         } );
  35         this.backButton.toggle( this.model.getCurrentView() !== 'default' );
  36
  37         // Help icon for Tagged edits
  38         this.helpIcon = new OO.ui.ButtonWidget( {
  39                 icon: 'helpNotice',
  40                 framed: false,
  41                 title: mw.msg( 'rcfilters-view-tags-help-icon-tooltip' ),
  42                 classes: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-helpIcon' ],
  43                 href: mw.util.getUrl( 'Special:Tags' ),
  44                 target: '_blank'
  45         } );
  46         this.helpIcon.toggle( this.model.getCurrentView() === 'tags' );
  47
  48         // Highlight button
  49         this.highlightButton = new OO.ui.ToggleButtonWidget( {
  50                 icon: 'highlight',
  51                 label: mw.msg( 'rcfilters-highlightbutton-title' ),
  52                 classes: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-hightlightButton' ]
  53         } );
  54
  55         // Invert buttons
  56         this.invertTagsButton = new OO.ui.ToggleButtonWidget( {
  57                 icon: '',
  58                 classes: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-invertTagsButton' ]
  59         } );
  60         this.invertTagsButton.toggle( this.model.getCurrentView() === 'tags' );
  61         this.invertNamespacesButton = new OO.ui.ToggleButtonWidget( {
  62                 icon: '',
  63                 classes: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-invertNamespacesButton' ]
  64         } );
  65         this.invertNamespacesButton.toggle( this.model.getCurrentView() === 'namespaces' );
  66
  67         // Events
  68         this.backButton.connect( this, { click: 'onBackButtonClick' } );
  69         this.highlightButton
  70                 .connect( this, { click: 'onHighlightButtonClick' } );
  71         this.invertTagsButton
  72                 .connect( this, { click: 'onInvertTagsButtonClick' } );
  73         this.invertNamespacesButton
  74                 .connect( this, { click: 'onInvertNamespacesButtonClick' } );
  75         this.model.connect( this, {
  76                 highlightChange: 'onModelHighlightChange',
  77                 searchChange: 'onModelSearchChange',
  78                 initialize: 'onModelInitialize'
  79         } );
  80         this.view = this.model.getCurrentView();
  81
  82         // Initialize
  83         this.$element
  84                 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget' )
  85                 .append(
  86                         $( '<div>' )
  87                                 .addClass( 'mw-rcfilters-ui-table' )
  88                                 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header' )
  89                                 .append(
  90                                         $( '<div>' )
  91                                                 .addClass( 'mw-rcfilters-ui-row' )
  92                                                 .append(
  93                                                         $( '<div>' )
  94                                                                 .addClass( 'mw-rcfilters-ui-cell' )
  95                                                                 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-back' )
  96                                                                 .append( this.backButton.$element ),
  97                                                         $( '<div>' )
  98                                                                 .addClass( 'mw-rcfilters-ui-cell' )
  99                                                                 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-title' )
 100                                                                 .append( this.$label, this.helpIcon.$element ),
 101                                                         $( '<div>' )
 102                                                                 .addClass( 'mw-rcfilters-ui-cell' )
 103                                                                 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-invert' )
 104                                                                 .append( this.invertTagsButton.$element ),
 105                                                         $( '<div>' )
 106                                                                 .addClass( 'mw-rcfilters-ui-cell' )
 107                                                                 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-invert' )
 108                                                                 .append( this.invertNamespacesButton.$element ),
 109                                                         $( '<div>' )
 110                                                                 .addClass( 'mw-rcfilters-ui-cell' )
 111                                                                 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-highlight' )
 112                                                                 .append( this.highlightButton.$element )
 113                                                 )
 114                                 )
 115                 );
 116 };
 117
 118 /* Initialization */
 119
 120 OO.inheritClass( FilterMenuHeaderWidget, OO.ui.Widget );
 121 OO.mixinClass( FilterMenuHeaderWidget, OO.ui.mixin.LabelElement );
 122
 123 /* Methods */
 124
 125 /**
 126  * Respond to model initialization event
 127  *
 128  * Note: need to wait for initialization before getting the invertModel
 129  * and registering its update event. Creating all the models before the UI
 130  * would help with that.
 131  */
 132 FilterMenuHeaderWidget.prototype.onModelInitialize = function () {
 133         this.invertNamespacesModel = this.model.getNamespacesInvertModel();
 134         this.updateInvertNamespacesButton();
 135         this.invertNamespacesModel.connect( this, { update: 'updateInvertNamespacesButton' } );
 136
 137         this.invertTagsModel = this.model.getTagsInvertModel();
 138         this.updateInvertTagsButton();
 139         this.invertTagsModel.connect( this, { update: 'updateInvertTagsButton' } );
 140 };
 141
 142 /**
 143  * Respond to model update event
 144  */
 145 FilterMenuHeaderWidget.prototype.onModelSearchChange = function () {
 146         const currentView = this.model.getCurrentView();
 147
 148         if ( this.view !== currentView ) {
 149                 this.setLabel( this.model.getViewTitle( currentView ) );
 150
 151                 this.invertTagsButton.toggle( currentView === 'tags' );
 152                 this.invertNamespacesButton.toggle( currentView === 'namespaces' );
 153                 this.backButton.toggle( currentView !== 'default' );
 154                 this.helpIcon.toggle( currentView === 'tags' );
 155                 this.view = currentView;
 156         }
 157 };
 158
 159 /**
 160  * Respond to model highlight change event
 161  *
 162  * @param {boolean} highlightEnabled Highlight is enabled
 163  */
 164 FilterMenuHeaderWidget.prototype.onModelHighlightChange = function ( highlightEnabled ) {
 165         this.highlightButton.setActive( highlightEnabled );
 166 };
 167
 168 /**
 169  * Update the state of the tags invert button
 170  */
 171 FilterMenuHeaderWidget.prototype.updateInvertTagsButton = function () {
 172         this.invertTagsButton.setActive( this.invertTagsModel.isSelected() );
 173         this.invertTagsButton.setLabel(
 174                 this.invertTagsModel.isSelected() ?
 175                         mw.msg( 'rcfilters-exclude-button-on' ) :
 176                         mw.msg( 'rcfilters-exclude-button-off' )
 177         );
 178 };
 179
 180 /**
 181  * Update the state of the namespaces invert button
 182  */
 183 FilterMenuHeaderWidget.prototype.updateInvertNamespacesButton = function () {
 184         this.invertNamespacesButton.setActive( this.invertNamespacesModel.isSelected() );
 185         this.invertNamespacesButton.setLabel(
 186                 this.invertNamespacesModel.isSelected() ?
 187                         mw.msg( 'rcfilters-exclude-button-on' ) :
 188                         mw.msg( 'rcfilters-exclude-button-off' )
 189         );
 190 };
 191
 192 FilterMenuHeaderWidget.prototype.onBackButtonClick = function () {
 193         this.controller.switchView( 'default' );
 194 };
 195
 196 /**
 197  * Respond to highlight button click
 198  */
 199 FilterMenuHeaderWidget.prototype.onHighlightButtonClick = function () {
 200         this.controller.toggleHighlight();
 201 };
 202
 203 /**
 204  * Respond to invert tags button click
 205  */
 206 FilterMenuHeaderWidget.prototype.onInvertTagsButtonClick = function () {
 207         this.controller.toggleInvertedTags();
 208 };
 209
 210 /**
 211  * Respond to invert namespaces button click
 212  */
 213 FilterMenuHeaderWidget.prototype.onInvertNamespacesButtonClick = function () {
 214         this.controller.toggleInvertedNamespaces();
 215 };
 216
 217 module.exports = FilterMenuHeaderWidget;