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

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