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

   1 ( function ( mw, $ ) {
   2         /**
   3          * A widget representing a single toggle filter
   4          *
   5          * @extends OO.ui.Widget
   6          *
   7          * @constructor
   8          * @param {mw.rcfilters.Controller} controller RCFilters controller
   9          * @param {mw.rcfilters.dm.FilterItem} model Filter item model
  10          * @param {Object} config Configuration object
  11          */
  12         mw.rcfilters.ui.FilterItemWidget = function MwRcfiltersUiFilterItemWidget( controller, model, config ) {
  13                 var layout,
  14                         $label = $( '<div>' )
  15                                 .addClass( 'mw-rcfilters-ui-filterItemWidget-label' );
  16
  17                 config = config || {};
  18
  19                 // Parent
  20                 mw.rcfilters.ui.FilterItemWidget.parent.call( this, config );
  21
  22                 this.controller = controller;
  23                 this.model = model;
  24
  25                 this.checkboxWidget = new mw.rcfilters.ui.CheckboxInputWidget( {
  26                         value: this.model.getName(),
  27                         selected: this.model.isSelected()
  28                 } );
  29
  30                 $label.append(
  31                         $( '<div>' )
  32                                 .addClass( 'mw-rcfilters-ui-filterItemWidget-label-title' )
  33                                 .text( this.model.getLabel() )
  34                 );
  35                 if ( this.model.getDescription() ) {
  36                         $label.append(
  37                                 $( '<div>' )
  38                                         .addClass( 'mw-rcfilters-ui-filterItemWidget-label-desc' )
  39                                         .text( this.model.getDescription() )
  40                         );
  41                 }
  42
  43                 layout = new OO.ui.FieldLayout( this.checkboxWidget, {
  44                         label: $label,
  45                         align: 'inline'
  46                 } );
  47
  48                 // Event
  49                 this.checkboxWidget.connect( this, { userChange: 'onCheckboxChange' } );
  50                 this.model.connect( this, { update: 'onModelUpdate' } );
  51                 this.model.getGroupModel().connect( this, { update: 'onGroupModelUpdate' } );
  52
  53                 this.$element
  54                         .addClass( 'mw-rcfilters-ui-filterItemWidget' )
  55                         .append(
  56                                 layout.$element
  57                         );
  58         };
  59
  60         /* Initialization */
  61
  62         OO.inheritClass( mw.rcfilters.ui.FilterItemWidget, OO.ui.Widget );
  63
  64         /* Methods */
  65
  66         /**
  67          * Respond to checkbox change.
  68          * NOTE: This event is emitted both for deliberate user action and for
  69          * a change that the code requests ('setSelected')
  70          *
  71          * @param {boolean} isSelected The checkbox is selected
  72          */
  73         mw.rcfilters.ui.FilterItemWidget.prototype.onCheckboxChange = function ( isSelected ) {
  74                 this.controller.updateFilter( this.model.getName(), isSelected );
  75         };
  76
  77         /**
  78          * Respond to item model update event
  79          */
  80         mw.rcfilters.ui.FilterItemWidget.prototype.onModelUpdate = function () {
  81                 this.checkboxWidget.setSelected( this.model.isSelected() );
  82
  83                 this.setCurrentMuteState();
  84         };
  85
  86         /**
  87          * Respond to item group model update event
  88          */
  89         mw.rcfilters.ui.FilterItemWidget.prototype.onGroupModelUpdate = function () {
  90                 this.setCurrentMuteState();
  91         };
  92
  93         /**
  94          * Set the current mute state for this item
  95          */
  96         mw.rcfilters.ui.FilterItemWidget.prototype.setCurrentMuteState = function () {
  97                 this.$element.toggleClass(
  98                         'mw-rcfilters-ui-filterItemWidget-muted',
  99                         this.model.isConflicted() ||
 100                         this.model.isIncluded() ||
 101                         this.model.isFullyCovered() ||
 102                         (
 103                                 // Item is also muted when any of the items in its group is active
 104                                 this.model.getGroupModel().isActive() &&
 105                                 // But it isn't selected
 106                                 !this.model.isSelected()
 107                         )
 108                 );
 109         };
 110         /**
 111          * Get the name of this filter
 112          *
 113          * @return {string} Filter name
 114          */
 115         mw.rcfilters.ui.FilterItemWidget.prototype.getName = function () {
 116                 return this.model.getName();
 117         };
 118
 119 }( mediaWiki, jQuery ) );