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                 this.selected = false;
  25
  26                 this.checkboxWidget = new mw.rcfilters.ui.CheckboxInputWidget( {
  27                         value: this.model.getName(),
  28                         selected: this.model.isSelected()
  29                 } );
  30
  31                 $label.append(
  32                         $( '<div>' )
  33                                 .addClass( 'mw-rcfilters-ui-filterItemWidget-label-title' )
  34                                 .text( this.model.getLabel() )
  35                 );
  36                 if ( this.model.getDescription() ) {
  37                         $label.append(
  38                                 $( '<div>' )
  39                                         .addClass( 'mw-rcfilters-ui-filterItemWidget-label-desc' )
  40                                         .text( this.model.getDescription() )
  41                         );
  42                 }
  43
  44                 this.highlightButton = new mw.rcfilters.ui.FilterItemHighlightButton(
  45                         this.controller,
  46                         this.model,
  47                         {
  48                                 $overlay: config.$overlay || this.$element,
  49                                 title: mw.msg( 'rcfilters-highlightmenu-help' )
  50                         }
  51                 );
  52                 this.highlightButton.toggle( this.model.isHighlightEnabled() );
  53
  54                 layout = new OO.ui.FieldLayout( this.checkboxWidget, {
  55                         label: $label,
  56                         align: 'inline'
  57                 } );
  58
  59                 // Event
  60                 this.checkboxWidget.connect( this, { userChange: 'onCheckboxChange' } );
  61                 this.model.connect( this, { update: 'onModelUpdate' } );
  62                 this.model.getGroupModel().connect( this, { update: 'onGroupModelUpdate' } );
  63
  64                 this.$element
  65                         .addClass( 'mw-rcfilters-ui-filterItemWidget' )
  66                         .append(
  67                                 $( '<div>' )
  68                                         .addClass( 'mw-rcfilters-ui-table' )
  69                                         .append(
  70                                                 $( '<div>' )
  71                                                         .addClass( 'mw-rcfilters-ui-row' )
  72                                                         .append(
  73                                                                 $( '<div>' )
  74                                                                         .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-filterItemWidget-filterCheckbox' )
  75                                                                         .append( layout.$element ),
  76                                                                 $( '<div>' )
  77                                                                         .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-filterItemWidget-highlightButton' )
  78                                                                         .append( this.highlightButton.$element )
  79                                                         )
  80                                         )
  81                         );
  82         };
  83
  84         /* Initialization */
  85
  86         OO.inheritClass( mw.rcfilters.ui.FilterItemWidget, OO.ui.Widget );
  87
  88         /* Methods */
  89
  90         /**
  91          * Respond to checkbox change.
  92          * NOTE: This event is emitted both for deliberate user action and for
  93          * a change that the code requests ('setSelected')
  94          *
  95          * @param {boolean} isSelected The checkbox is selected
  96          */
  97         mw.rcfilters.ui.FilterItemWidget.prototype.onCheckboxChange = function ( isSelected ) {
  98                 this.controller.toggleFilterSelect( this.model.getName(), isSelected );
  99         };
 100
 101         /**
 102          * Respond to item model update event
 103          */
 104         mw.rcfilters.ui.FilterItemWidget.prototype.onModelUpdate = function () {
 105                 this.checkboxWidget.setSelected( this.model.isSelected() );
 106
 107                 this.setCurrentMuteState();
 108         };
 109
 110         /**
 111          * Respond to item group model update event
 112          */
 113         mw.rcfilters.ui.FilterItemWidget.prototype.onGroupModelUpdate = function () {
 114                 this.setCurrentMuteState();
 115         };
 116
 117         /**
 118          * Set selected state on this widget
 119          *
 120          * @param {boolean} [isSelected] Widget is selected
 121          */
 122         mw.rcfilters.ui.FilterItemWidget.prototype.toggleSelected = function ( isSelected ) {
 123                 isSelected = isSelected !== undefined ? isSelected : !this.selected;
 124
 125                 if ( this.selected !== isSelected ) {
 126                         this.selected = isSelected;
 127
 128                         this.$element.toggleClass( 'mw-rcfilters-ui-filterItemWidget-selected', this.selected );
 129                 }
 130         };
 131
 132         /**
 133          * Set the current mute state for this item
 134          */
 135         mw.rcfilters.ui.FilterItemWidget.prototype.setCurrentMuteState = function () {
 136                 this.$element.toggleClass(
 137                         'mw-rcfilters-ui-filterItemWidget-muted',
 138                         this.model.isConflicted() ||
 139                         (
 140                                 // Item is also muted when any of the items in its group is active
 141                                 this.model.getGroupModel().isActive() &&
 142                                 // But it isn't selected
 143                                 !this.model.isSelected() &&
 144                                 // And also not included
 145                                 !this.model.isIncluded()
 146                         )
 147                 );
 148
 149                 this.highlightButton.toggle( this.model.isHighlightEnabled() );
 150         };
 151
 152         /**
 153          * Get the name of this filter
 154          *
 155          * @return {string} Filter name
 156          */
 157         mw.rcfilters.ui.FilterItemWidget.prototype.getName = function () {
 158                 return this.model.getName();
 159         };
 160 }( mediaWiki, jQuery ) );