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

   1 var GroupWidget = require( './GroupWidget.js' ),
   2         ViewSwitchWidget;
   3
   4 /**
   5  * A widget for the footer for the default view, allowing to switch views
   6  *
   7  * @class mw.rcfilters.ui.ViewSwitchWidget
   8  * @extends OO.ui.Widget
   9  *
  10  * @constructor
  11  * @param {mw.rcfilters.Controller} controller Controller
  12  * @param {mw.rcfilters.dm.FiltersViewModel} model View model
  13  * @param {Object} [config] Configuration object
  14  */
  15 ViewSwitchWidget = function MwRcfiltersUiViewSwitchWidget( controller, model, config ) {
  16         config = config || {};
  17
  18         // Parent
  19         ViewSwitchWidget.parent.call( this, config );
  20
  21         this.controller = controller;
  22         this.model = model;
  23
  24         this.buttons = new GroupWidget( {
  25                 events: {
  26                         click: 'buttonClick'
  27                 },
  28                 items: [
  29                         new OO.ui.ButtonWidget( {
  30                                 data: 'namespaces',
  31                                 icon: 'article',
  32                                 label: mw.msg( 'namespaces' )
  33                         } ),
  34                         new OO.ui.ButtonWidget( {
  35                                 data: 'tags',
  36                                 icon: 'tag',
  37                                 label: mw.msg( 'rcfilters-view-tags' )
  38                         } )
  39                 ]
  40         } );
  41
  42         // Events
  43         this.model.connect( this, { update: 'onModelUpdate' } );
  44         this.buttons.connect( this, { buttonClick: 'onButtonClick' } );
  45
  46         this.$element
  47                 .addClass( 'mw-rcfilters-ui-viewSwitchWidget' )
  48                 .append(
  49                         new OO.ui.LabelWidget( {
  50                                 label: mw.msg( 'rcfilters-advancedfilters' )
  51                         } ).$element,
  52                         $( '<div>' )
  53                                 .addClass( 'mw-rcfilters-ui-viewSwitchWidget-buttons' )
  54                                 .append( this.buttons.$element )
  55                 );
  56 };
  57
  58 /* Initialize */
  59
  60 OO.inheritClass( ViewSwitchWidget, OO.ui.Widget );
  61
  62 /**
  63  * Respond to model update event
  64  */
  65 ViewSwitchWidget.prototype.onModelUpdate = function () {
  66         var currentView = this.model.getCurrentView();
  67
  68         this.buttons.getItems().forEach( function ( buttonWidget ) {
  69                 buttonWidget.setActive( buttonWidget.getData() === currentView );
  70         } );
  71 };
  72
  73 /**
  74  * Respond to button switch click
  75  *
  76  * @param {OO.ui.ButtonWidget} buttonWidget Clicked button
  77  */
  78 ViewSwitchWidget.prototype.onButtonClick = function ( buttonWidget ) {
  79         this.controller.switchView( buttonWidget.getData() );
  80 };
  81
  82 module.exports = ViewSwitchWidget;