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

   1 /**
   2  * A widget representing a menu section for filter groups.
   3  *
   4  * @class mw.rcfilters.ui.FilterMenuSectionOptionWidget
   5  * @ignore
   6  * @extends OO.ui.MenuSectionOptionWidget
   7  *
   8  * @param {mw.rcfilters.Controller} controller RCFilters controller
   9  * @param {mw.rcfilters.dm.FilterGroup} model Filter group model
  10  * @param {Object} config Configuration object
  11  * @param {jQuery} [config.$overlay] Overlay
  12  */
  13 const FilterMenuSectionOptionWidget = function MwRcfiltersUiFilterMenuSectionOptionWidget( controller, model, config ) {
  14         const $header = $( '<div>' )
  15                         .addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-header' ),
  16                 $popupContent = $( '<div>' )
  17                         .addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup-content' );
  18
  19         config = config || {};
  20
  21         this.controller = controller;
  22         this.model = model;
  23         this.$overlay = config.$overlay || this.$element;
  24
  25         // Parent
  26         FilterMenuSectionOptionWidget.super.call( this, Object.assign( {
  27                 label: this.model.getTitle(),
  28                 $label: $( '<div>' )
  29                         .addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title' )
  30         }, config ) );
  31
  32         $header.append( this.$label );
  33
  34         if ( this.model.hasWhatsThis() ) {
  35                 const whatsThisMessages = this.model.getWhatsThis();
  36
  37                 // Create popup
  38                 if ( whatsThisMessages.header ) {
  39                         $popupContent.append(
  40                                 ( new OO.ui.LabelWidget( {
  41                                         // eslint-disable-next-line mediawiki/msg-doc
  42                                         label: mw.msg( whatsThisMessages.header ),
  43                                         classes: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup-content-header' ]
  44                                 } ) ).$element
  45                         );
  46                 }
  47                 if ( whatsThisMessages.body ) {
  48                         $popupContent.append(
  49                                 ( new OO.ui.LabelWidget( {
  50                                         // eslint-disable-next-line mediawiki/msg-doc
  51                                         label: mw.msg( whatsThisMessages.body ),
  52                                         classes: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup-content-body' ]
  53                                 } ) ).$element
  54                         );
  55                 }
  56                 if ( whatsThisMessages.linkText && whatsThisMessages.url ) {
  57                         $popupContent.append(
  58                                 ( new OO.ui.ButtonWidget( {
  59                                         framed: false,
  60                                         flags: [ 'progressive' ],
  61                                         href: whatsThisMessages.url,
  62                                         // eslint-disable-next-line mediawiki/msg-doc
  63                                         label: mw.msg( whatsThisMessages.linkText ),
  64                                         classes: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup-content-link' ]
  65                                 } ) ).$element
  66                         );
  67                 }
  68
  69                 // Add button
  70                 this.whatsThisButton = new OO.ui.PopupButtonWidget( {
  71                         framed: false,
  72                         label: mw.msg( 'rcfilters-filterlist-whatsthis' ),
  73                         $overlay: this.$overlay,
  74                         classes: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton' ],
  75                         flags: [ 'progressive' ],
  76                         popup: {
  77                                 padded: false,
  78                                 align: 'center',
  79                                 position: 'above',
  80                                 $content: $popupContent,
  81                                 classes: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup' ]
  82                         }
  83                 } );
  84
  85                 $header
  86                         .append( this.whatsThisButton.$element );
  87         }
  88
  89         // Events
  90         this.model.connect( this, { update: 'updateUiBasedOnState' } );
  91
  92         // Initialize
  93         // eslint-disable-next-line mediawiki/class-doc
  94         this.$element
  95                 .addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget' )
  96                 .addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-name-' + this.model.getName() )
  97                 .append( $header );
  98         this.updateUiBasedOnState();
  99 };
 100
 101 /* Initialize */
 102
 103 OO.inheritClass( FilterMenuSectionOptionWidget, OO.ui.MenuSectionOptionWidget );
 104
 105 /* Methods */
 106
 107 /**
 108  * Respond to model update event
 109  */
 110 FilterMenuSectionOptionWidget.prototype.updateUiBasedOnState = function () {
 111         this.$element.toggleClass(
 112                 'mw-rcfilters-ui-filterMenuSectionOptionWidget-active',
 113                 this.model.isActive()
 114         );
 115         this.toggle( this.model.isVisible() );
 116 };
 117
 118 /**
 119  * Get the group name
 120  *
 121  * @return {string} Group name
 122  */
 123 FilterMenuSectionOptionWidget.prototype.getName = function () {
 124         return this.model.getName();
 125 };
 126
 127 module.exports = FilterMenuSectionOptionWidget;