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                 // Help icon for Tagged edits
  39                 this.helpIcon = new OO.ui.ButtonWidget( {
  40                         icon: 'helpNotice',
  41                         framed: false,
  42                         title: mw.msg( 'rcfilters-view-tags-help-icon-tooltip' ),
  43                         classes: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-helpIcon' ],
  44                         href: mw.util.getUrl( 'Special:Tags' ),
  45                         target: '_blank'
  46                 } );
  47                 this.helpIcon.toggle( this.model.getCurrentView() === 'tags' );
  48
  49                 // Highlight button
  50                 this.highlightButton = new OO.ui.ToggleButtonWidget( {
  51                         icon: 'highlight',
  52                         label: mw.message( 'rcfilters-highlightbutton-title' ).text(),
  53                         classes: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-hightlightButton' ]
  54                 } );
  55
  56                 // Invert namespaces button
  57                 this.invertNamespacesButton = new OO.ui.ToggleButtonWidget( {
  58                         icon: '',
  59                         classes: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-invertNamespacesButton' ]
  60                 } );
  61                 this.invertNamespacesButton.toggle( this.model.getCurrentView() === 'namespaces' );
  62
  63                 // Events
  64                 this.backButton.connect( this, { click: 'onBackButtonClick' } );
  65                 this.highlightButton
  66                         .connect( this, { click: 'onHighlightButtonClick' } );
  67                 this.invertNamespacesButton
  68                         .connect( this, { click: 'onInvertNamespacesButtonClick' } );
  69                 this.model.connect( this, {
  70                         highlightChange: 'onModelHighlightChange',
  71                         searchChange: 'onModelSearchChange',
  72                         initialize: 'onModelInitialize'
  73                 } );
  74                 this.view = this.model.getCurrentView();
  75
  76                 // Initialize
  77                 this.$element
  78                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget' )
  79                         .append(
  80                                 $( '<div>' )
  81                                         .addClass( 'mw-rcfilters-ui-table' )
  82                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header' )
  83                                         .append(
  84                                                 $( '<div>' )
  85                                                         .addClass( 'mw-rcfilters-ui-row' )
  86                                                         .append(
  87                                                                 $( '<div>' )
  88                                                                         .addClass( 'mw-rcfilters-ui-cell' )
  89                                                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-back' )
  90                                                                         .append( this.backButton.$element ),
  91                                                                 $( '<div>' )
  92                                                                         .addClass( 'mw-rcfilters-ui-cell' )
  93                                                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-title' )
  94                                                                         .append( this.$label, this.helpIcon.$element ),
  95                                                                 $( '<div>' )
  96                                                                         .addClass( 'mw-rcfilters-ui-cell' )
  97                                                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-invert' )
  98                                                                         .append( this.invertNamespacesButton.$element ),
  99                                                                 $( '<div>' )
 100                                                                         .addClass( 'mw-rcfilters-ui-cell' )
 101                                                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-highlight' )
 102                                                                         .append( this.highlightButton.$element )
 103                                                         )
 104                                         )
 105                         );
 106         };
 107
 108         /* Initialization */
 109
 110         OO.inheritClass( mw.rcfilters.ui.FilterMenuHeaderWidget, OO.ui.Widget );
 111         OO.mixinClass( mw.rcfilters.ui.FilterMenuHeaderWidget, OO.ui.mixin.LabelElement );
 112
 113         /* Methods */
 114
 115         /**
 116          * Respond to model initialization event
 117          *
 118          * Note: need to wait for initialization before getting the invertModel
 119          * and registering its update event. Creating all the models before the UI
 120          * would help with that.
 121          */
 122         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onModelInitialize = function () {
 123                 this.invertModel = this.model.getInvertModel();
 124                 this.updateInvertButton();
 125                 this.invertModel.connect( this, { update: 'updateInvertButton' } );
 126         };
 127
 128         /**
 129          * Respond to model update event
 130          */
 131         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onModelSearchChange = function () {
 132                 var currentView = this.model.getCurrentView();
 133
 134                 if ( this.view !== currentView ) {
 135                         this.setLabel( this.model.getViewTitle( currentView ) );
 136
 137                         this.invertNamespacesButton.toggle( currentView === 'namespaces' );
 138                         this.backButton.toggle( currentView !== 'default' );
 139                         this.helpIcon.toggle( currentView === 'tags' );
 140                         this.view = currentView;
 141                 }
 142         };
 143
 144         /**
 145          * Respond to model highlight change event
 146          *
 147          * @param {boolean} highlightEnabled Highlight is enabled
 148          */
 149         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onModelHighlightChange = function ( highlightEnabled ) {
 150                 this.highlightButton.setActive( highlightEnabled );
 151         };
 152
 153         /**
 154          * Update the state of the invert button
 155          */
 156         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.updateInvertButton = function () {
 157                 this.invertNamespacesButton.setActive( this.invertModel.isSelected() );
 158                 this.invertNamespacesButton.setLabel(
 159                         this.invertModel.isSelected() ?
 160                                 mw.msg( 'rcfilters-exclude-button-on' ) :
 161                                 mw.msg( 'rcfilters-exclude-button-off' )
 162                 );
 163         };
 164
 165         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onBackButtonClick = function () {
 166                 this.controller.switchView( 'default' );
 167         };
 168
 169         /**
 170          * Respond to highlight button click
 171          */
 172         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onHighlightButtonClick = function () {
 173                 this.controller.toggleHighlight();
 174         };
 175
 176         /**
 177          * Respond to highlight button click
 178          */
 179         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onInvertNamespacesButtonClick = function () {
 180                 this.controller.toggleInvertedNamespaces();
 181         };
 182 }( mediaWiki, jQuery ) );