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  * @extends OO.ui.MenuSectionOptionWidget
   6  *
   7  * @constructor
   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  * @cfg {jQuery} [$overlay] Overlay
  12  */
  13 var FilterMenuSectionOptionWidget = function MwRcfiltersUiFilterMenuSectionOptionWidget( controller, model, config ) {
  14         var whatsThisMessages,
  15                 $header = $( '<div>' )
  16                         .addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-header' ),
  17                 $popupContent = $( '<div>' )
  18                         .addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup-content' );
  19
  20         config = config || {};
  21
  22         this.controller = controller;
  23         this.model = model;
  24         this.$overlay = config.$overlay || this.$element;
  25
  26         // Parent
  27         FilterMenuSectionOptionWidget.parent.call( this, $.extend( {
  28                 label: this.model.getTitle(),
  29                 $label: $( '<div>' )
  30                         .addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title' )
  31         }, config ) );
  32
  33         $header.append( this.$label );
  34
  35         if ( this.model.hasWhatsThis() ) {
  36                 whatsThisMessages = this.model.getWhatsThis();
  37
  38                 // Create popup
  39                 if ( whatsThisMessages.header ) {
  40                         $popupContent.append(
  41                                 ( new OO.ui.LabelWidget( {
  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                                         label: mw.msg( whatsThisMessages.body ),
  51                                         classes: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup-content-body' ]
  52                                 } ) ).$element
  53                         );
  54                 }
  55                 if ( whatsThisMessages.linkText && whatsThisMessages.url ) {
  56                         $popupContent.append(
  57                                 ( new OO.ui.ButtonWidget( {
  58                                         framed: false,
  59                                         flags: [ 'progressive' ],
  60                                         href: whatsThisMessages.url,
  61                                         label: mw.msg( whatsThisMessages.linkText ),
  62                                         classes: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup-content-link' ]
  63                                 } ) ).$element
  64                         );
  65                 }
  66
  67                 // Add button
  68                 this.whatsThisButton = new OO.ui.PopupButtonWidget( {
  69                         framed: false,
  70                         label: mw.msg( 'rcfilters-filterlist-whatsthis' ),
  71                         $overlay: this.$overlay,
  72                         classes: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton' ],
  73                         flags: [ 'progressive' ],
  74                         popup: {
  75                                 padded: false,
  76                                 align: 'center',
  77                                 position: 'above',
  78                                 $content: $popupContent,
  79                                 classes: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup' ]
  80                         }
  81                 } );
  82
  83                 $header
  84                         .append( this.whatsThisButton.$element );
  85         }
  86
  87         // Events
  88         this.model.connect( this, { update: 'updateUiBasedOnState' } );
  89
  90         // Initialize
  91         this.$element
  92                 .addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget' )
  93                 .addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-name-' + this.model.getName() )
  94                 .append( $header );
  95         this.updateUiBasedOnState();
  96 };
  97
  98 /* Initialize */
  99
 100 OO.inheritClass( FilterMenuSectionOptionWidget, OO.ui.MenuSectionOptionWidget );
 101
 102 /* Methods */
 103
 104 /**
 105  * Respond to model update event
 106  */
 107 FilterMenuSectionOptionWidget.prototype.updateUiBasedOnState = function () {
 108         this.$element.toggleClass(
 109                 'mw-rcfilters-ui-filterMenuSectionOptionWidget-active',
 110                 this.model.isActive()
 111         );
 112         this.toggle( this.model.isVisible() );
 113 };
 114
 115 /**
 116  * Get the group name
 117  *
 118  * @return {string} Group name
 119  */
 120 FilterMenuSectionOptionWidget.prototype.getName = function () {
 121         return this.model.getName();
 122 };
 123
 124 module.exports = FilterMenuSectionOptionWidget;