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                 // "Back" to default view button
  29                 this.backButton = new OO.ui.ButtonWidget( {
  30                         icon: 'previous',
  31                         framed: false,
  32                         title: mw.msg( 'rcfilters-filterlist-title' ),
  33                         classes: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-backButton' ]
  34                 } );
  35                 this.backButton.toggle( this.model.getCurrentView() !== 'default' );
  36
  37                 // Highlight button
  38                 this.highlightButton = new OO.ui.ToggleButtonWidget( {
  39                         icon: 'highlight',
  40                         label: mw.message( 'rcfilters-highlightbutton-title' ).text(),
  41                         classes: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-hightlightButton' ]
  42                 } );
  43
  44                 // Invert namespaces button
  45                 this.invertNamespacesButton = new OO.ui.ToggleButtonWidget( {
  46                         icon: '',
  47                         label: mw.msg( 'invert' ),
  48                         classes: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-invertNamespacesButton' ]
  49                 } );
  50                 this.invertNamespacesButton.toggle( this.model.getCurrentView() === 'namespaces' );
  51
  52                 // Events
  53                 this.backButton.connect( this, { click: 'onBackButtonClick' } );
  54                 this.highlightButton
  55                         .connect( this, { click: 'onHighlightButtonClick' } );
  56                 this.invertNamespacesButton
  57                         .connect( this, { click: 'onInvertNamespacesButtonClick' } );
  58                 this.model.connect( this, {
  59                         highlightChange: 'onModelHighlightChange',
  60                         invertChange: 'onModelInvertChange',
  61                         update: 'onModelUpdate'
  62                 } );
  63
  64                 // Initialize
  65                 this.$element
  66                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget' )
  67                         .append(
  68                                 $( '<div>' )
  69                                         .addClass( 'mw-rcfilters-ui-table' )
  70                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header' )
  71                                         .append(
  72                                                 $( '<div>' )
  73                                                         .addClass( 'mw-rcfilters-ui-row' )
  74                                                         .append(
  75                                                                 $( '<div>' )
  76                                                                         .addClass( 'mw-rcfilters-ui-cell' )
  77                                                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-back' )
  78                                                                         .append( this.backButton.$element ),
  79                                                                 $( '<div>' )
  80                                                                         .addClass( 'mw-rcfilters-ui-cell' )
  81                                                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-title' )
  82                                                                         .append( this.$label ),
  83                                                                 $( '<div>' )
  84                                                                         .addClass( 'mw-rcfilters-ui-cell' )
  85                                                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-invert' )
  86                                                                         .append( this.invertNamespacesButton.$element ),
  87                                                                 $( '<div>' )
  88                                                                         .addClass( 'mw-rcfilters-ui-cell' )
  89                                                                         .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-highlight' )
  90                                                                         .append( this.highlightButton.$element )
  91                                                         )
  92                                         )
  93                         );
  94         };
  95
  96         /* Initialization */
  97
  98         OO.inheritClass( mw.rcfilters.ui.FilterMenuHeaderWidget, OO.ui.Widget );
  99         OO.mixinClass( mw.rcfilters.ui.FilterMenuHeaderWidget, OO.ui.mixin.LabelElement );
 100
 101         /* Methods */
 102
 103         /**
 104          * Respond to model update event
 105          */
 106         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onModelUpdate = function () {
 107                 var currentView = this.model.getCurrentView();
 108
 109                 this.setLabel( this.model.getViewTitle( currentView ) );
 110
 111                 this.invertNamespacesButton.toggle( currentView === 'namespaces' );
 112                 this.backButton.toggle( currentView !== 'default' );
 113         };
 114
 115         /**
 116          * Respond to model highlight change event
 117          *
 118          * @param {boolean} highlightEnabled Highlight is enabled
 119          */
 120         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onModelHighlightChange = function ( highlightEnabled ) {
 121                 this.highlightButton.setActive( highlightEnabled );
 122         };
 123
 124         /**
 125          * Respond to model invert change event
 126          *
 127          * @param {boolean} isInverted Namespaces selection is inverted
 128          */
 129         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onModelInvertChange = function ( isInverted ) {
 130                 this.invertNamespacesButton.setActive( isInverted );
 131         };
 132
 133         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onBackButtonClick = function () {
 134                 this.controller.switchView( 'default' );
 135         };
 136
 137         /**
 138          * Respond to highlight button click
 139          */
 140         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onHighlightButtonClick = function () {
 141                 this.controller.toggleHighlight();
 142         };
 143
 144         /**
 145          * Respond to highlight button click
 146          */
 147         mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onInvertNamespacesButtonClick = function () {
 148                 this.controller.toggleInvertedNamespaces();
 149         };
 150 }( mediaWiki, jQuery ) );