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

   1 ( function ( mw, $ ) {
   2         /**
   3          * A group of filters
   4          *
   5          * @extends OO.ui.Widget
   6          * @mixins OO.ui.mixin.GroupWidget
   7          * @mixins OO.ui.mixin.LabelElement
   8          *
   9          * @constructor
  10          * @param {mw.rcfilters.Controller} controller Controller
  11          * @param {mw.rcfilters.dm.FilterGroup} model Filter group model
  12          * @param {Object} config Configuration object
  13          * @cfg {jQuery} [$overlay] Overlay
  14          */
  15         mw.rcfilters.ui.FilterGroupWidget = function MwRcfiltersUiFilterGroupWidget( controller, model, config ) {
  16                 var whatsThisMessages,
  17                         $header = $( '<div>' )
  18                                 .addClass( 'mw-rcfilters-ui-filterGroupWidget-header' ),
  19                         $popupContent = $( '<div>' )
  20                                 .addClass( 'mw-rcfilters-ui-filterGroupWidget-whatsThisButton-popup-content' );
  21
  22                 config = config || {};
  23
  24                 // Parent
  25                 mw.rcfilters.ui.FilterGroupWidget.parent.call( this, config );
  26
  27                 this.controller = controller;
  28                 this.model = model;
  29                 this.filters = {};
  30                 this.$overlay = config.$overlay || this.$element;
  31
  32                 // Mixin constructors
  33                 OO.ui.mixin.GroupWidget.call( this, config );
  34                 OO.ui.mixin.LabelElement.call( this, $.extend( {}, config, {
  35                         label: this.model.getTitle(),
  36                         $label: $( '<div>' )
  37                                 .addClass( 'mw-rcfilters-ui-filterGroupWidget-header-title' )
  38                 } ) );
  39
  40                 $header.append( this.$label );
  41
  42                 if ( this.model.hasWhatsThis() ) {
  43                         whatsThisMessages = this.model.getWhatsThis();
  44
  45                         // Create popup
  46                         if ( whatsThisMessages.header ) {
  47                                 $popupContent.append(
  48                                         ( new OO.ui.LabelWidget( {
  49                                                 label: mw.msg( whatsThisMessages.header ),
  50                                                 classes: [ 'mw-rcfilters-ui-filterGroupWidget-whatsThisButton-popup-content-header' ]
  51                                         } ) ).$element
  52                                 );
  53                         }
  54                         if ( whatsThisMessages.body ) {
  55                                 $popupContent.append(
  56                                         ( new OO.ui.LabelWidget( {
  57                                                 label: mw.msg( whatsThisMessages.body ),
  58                                                 classes: [ 'mw-rcfilters-ui-filterGroupWidget-whatsThisButton-popup-content-body' ]
  59                                         } ) ).$element
  60                                 );
  61                         }
  62                         if ( whatsThisMessages.linkText && whatsThisMessages.url ) {
  63                                 $popupContent.append(
  64                                         ( new OO.ui.ButtonWidget( {
  65                                                 framed: false,
  66                                                 flags: [ 'progressive' ],
  67                                                 href: whatsThisMessages.url,
  68                                                 label: mw.msg( whatsThisMessages.linkText ),
  69                                                 classes: [ 'mw-rcfilters-ui-filterGroupWidget-whatsThisButton-popup-content-link' ]
  70                                         } ) ).$element
  71                                 );
  72                         }
  73
  74                         // Add button
  75                         this.whatsThisButton = new OO.ui.PopupButtonWidget( {
  76                                 framed: false,
  77                                 label: mw.msg( 'rcfilters-filterlist-whatsthis' ),
  78                                 $overlay: this.$overlay,
  79                                 classes: [ 'mw-rcfilters-ui-filterGroupWidget-whatsThisButton' ],
  80                                 flags: [ 'progressive' ],
  81                                 popup: {
  82                                         padded: false,
  83                                         align: 'center',
  84                                         position: 'above',
  85                                         $content: $popupContent,
  86                                         classes: [ 'mw-rcfilters-ui-filterGroupWidget-whatsThisButton-popup' ]
  87                                 }
  88                         } );
  89
  90                         $header
  91                                 .append( this.whatsThisButton.$element );
  92                 }
  93
  94                 // Populate
  95                 this.populateFromModel();
  96
  97                 this.model.connect( this, { update: 'onModelUpdate' } );
  98
  99                 this.$element
 100                         .addClass( 'mw-rcfilters-ui-filterGroupWidget' )
 101                         .addClass( 'mw-rcfilters-ui-filterGroupWidget-name-' + this.model.getName() )
 102                         .append(
 103                                 $header,
 104                                 this.$group
 105                                         .addClass( 'mw-rcfilters-ui-filterGroupWidget-group' )
 106                         );
 107         };
 108
 109         /* Initialization */
 110
 111         OO.inheritClass( mw.rcfilters.ui.FilterGroupWidget, OO.ui.Widget );
 112         OO.mixinClass( mw.rcfilters.ui.FilterGroupWidget, OO.ui.mixin.GroupWidget );
 113         OO.mixinClass( mw.rcfilters.ui.FilterGroupWidget, OO.ui.mixin.LabelElement );
 114
 115         /**
 116          * Respond to model update event
 117          */
 118         mw.rcfilters.ui.FilterGroupWidget.prototype.onModelUpdate = function () {
 119                 this.$element.toggleClass(
 120                         'mw-rcfilters-ui-filterGroupWidget-active',
 121                         this.model.isActive()
 122                 );
 123         };
 124
 125         /**
 126          * Get an item widget from its filter name
 127          *
 128          * @param {string} filterName Filter name
 129          * @return {mw.rcfilters.ui.FilterItemWidget} Item widget
 130          */
 131         mw.rcfilters.ui.FilterGroupWidget.prototype.getItemWidget = function ( filterName ) {
 132                 return this.filters[ filterName ];
 133         };
 134
 135         /**
 136          * Populate data from the model
 137          */
 138         mw.rcfilters.ui.FilterGroupWidget.prototype.populateFromModel = function () {
 139                 var widget = this;
 140
 141                 this.clearItems();
 142                 this.filters = {};
 143
 144                 this.addItems(
 145                         this.model.getItems().map( function ( filterItem ) {
 146                                 var groupWidget = new mw.rcfilters.ui.FilterItemWidget(
 147                                         widget.controller,
 148                                         filterItem,
 149                                         {
 150                                                 label: filterItem.getLabel(),
 151                                                 description: filterItem.getDescription(),
 152                                                 $overlay: widget.$overlay
 153                                         }
 154                                 );
 155
 156                                 widget.filters[ filterItem.getName() ] = groupWidget;
 157
 158                                 return groupWidget;
 159                         } )
 160                 );
 161         };
 162
 163         /**
 164          * Get the group name
 165          *
 166          * @return {string} Group name
 167          */
 168         mw.rcfilters.ui.FilterGroupWidget.prototype.getName = function () {
 169                 return this.model.getName();
 170         };
 171 }( mediaWiki, jQuery ) );