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                 this.highlightButton = new mw.rcfilters.ui.FilterItemHighlightButton(
  44                         this.controller,
  45                         this.model,
  46                         {
  47                                 $overlay: config.$overlay || this.$element
  48                         }
  49                 );
  50                 this.highlightButton.toggle( this.model.isHighlightEnabled() );
  51
  52                 layout = new OO.ui.FieldLayout( this.checkboxWidget, {
  53                         label: $label,
  54                         align: 'inline'
  55                 } );
  56
  57                 // Event
  58                 this.checkboxWidget.connect( this, { userChange: 'onCheckboxChange' } );
  59                 this.model.connect( this, { update: 'onModelUpdate' } );
  60                 this.model.getGroupModel().connect( this, { update: 'onGroupModelUpdate' } );
  61
  62                 this.$element
  63                         .addClass( 'mw-rcfilters-ui-filterItemWidget' )
  64                         .append(
  65                                 $( '<div>' )
  66                                         .addClass( 'mw-rcfilters-ui-table' )
  67                                         .append(
  68                                                 $( '<div>' )
  69                                                         .addClass( 'mw-rcfilters-ui-row' )
  70                                                         .append(
  71                                                                 $( '<div>' )
  72                                                                         .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-filterItemWidget-filterCheckbox' )
  73                                                                         .append( layout.$element ),
  74                                                                 $( '<div>' )
  75                                                                         .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-filterItemWidget-highlightButton' )
  76                                                                         .append( this.highlightButton.$element )
  77                                                         )
  78                                         )
  79                         );
  80         };
  81
  82         /* Initialization */
  83
  84         OO.inheritClass( mw.rcfilters.ui.FilterItemWidget, OO.ui.Widget );
  85
  86         /* Methods */
  87
  88         /**
  89          * Respond to checkbox change.
  90          * NOTE: This event is emitted both for deliberate user action and for
  91          * a change that the code requests ('setSelected')
  92          *
  93          * @param {boolean} isSelected The checkbox is selected
  94          */
  95         mw.rcfilters.ui.FilterItemWidget.prototype.onCheckboxChange = function ( isSelected ) {
  96                 this.controller.updateFilter( this.model.getName(), isSelected );
  97         };
  98
  99         /**
 100          * Respond to item model update event
 101          */
 102         mw.rcfilters.ui.FilterItemWidget.prototype.onModelUpdate = function () {
 103                 this.checkboxWidget.setSelected( this.model.isSelected() );
 104
 105                 this.setCurrentMuteState();
 106         };
 107
 108         /**
 109          * Respond to item group model update event
 110          */
 111         mw.rcfilters.ui.FilterItemWidget.prototype.onGroupModelUpdate = function () {
 112                 this.setCurrentMuteState();
 113         };
 114
 115         /**
 116          * Set the current mute state for this item
 117          */
 118         mw.rcfilters.ui.FilterItemWidget.prototype.setCurrentMuteState = function () {
 119                 this.$element.toggleClass(
 120                         'mw-rcfilters-ui-filterItemWidget-muted',
 121                         this.model.isConflicted() ||
 122                         this.model.isIncluded() ||
 123                         this.model.isFullyCovered() ||
 124                         (
 125                                 // Item is also muted when any of the items in its group is active
 126                                 this.model.getGroupModel().isActive() &&
 127                                 // But it isn't selected
 128                                 !this.model.isSelected()
 129                         )
 130                 );
 131
 132                 this.highlightButton.toggle( this.model.isHighlightEnabled() );
 133         };
 134
 135         /**
 136          * Get the name of this filter
 137          *
 138          * @return {string} Filter name
 139          */
 140         mw.rcfilters.ui.FilterItemWidget.prototype.getName = function () {
 141                 return this.model.getName();
 142         };
 143 }( mediaWiki, jQuery ) );