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

   1 ( function ( mw ) {
   2         /**
   3          * A widget representing a menu section for filter groups
   4          *
   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         mw.rcfilters.ui.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                 mw.rcfilters.ui.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: 'onModelUpdate' } );
  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         };
  96
  97         /* Initialize */
  98
  99         OO.inheritClass( mw.rcfilters.ui.FilterMenuSectionOptionWidget, OO.ui.MenuSectionOptionWidget );
 100
 101         /* Methods */
 102
 103         /**
 104          * Respond to model update event
 105          */
 106         mw.rcfilters.ui.FilterMenuSectionOptionWidget.prototype.onModelUpdate = function () {
 107                 this.$element.toggleClass(
 108                         'mw-rcfilters-ui-filterMenuSectionOptionWidget-active',
 109                         this.model.isActive()
 110                 );
 111         };
 112
 113         /**
 114          * Get the group name
 115          *
 116          * @return {string} Group name
 117          */
 118         mw.rcfilters.ui.FilterMenuSectionOptionWidget.prototype.getName = function () {
 119                 return this.model.getName();
 120         };
 121
 122 }( mediaWiki ) );