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                         }
  50                 );
  51                 this.highlightButton.toggle( this.model.isHighlightEnabled() );
  52
  53                 layout = new OO.ui.FieldLayout( this.checkboxWidget, {
  54                         label: $label,
  55                         align: 'inline'
  56                 } );
  57
  58                 // Event
  59                 this.checkboxWidget.connect( this, { userChange: 'onCheckboxChange' } );
  60                 this.model.connect( this, { update: 'onModelUpdate' } );
  61                 this.model.getGroupModel().connect( this, { update: 'onGroupModelUpdate' } );
  62
  63                 this.$element
  64                         .addClass( 'mw-rcfilters-ui-filterItemWidget' )
  65                         .append(
  66                                 $( '<div>' )
  67                                         .addClass( 'mw-rcfilters-ui-table' )
  68                                         .append(
  69                                                 $( '<div>' )
  70                                                         .addClass( 'mw-rcfilters-ui-row' )
  71                                                         .append(
  72                                                                 $( '<div>' )
  73                                                                         .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-filterItemWidget-filterCheckbox' )
  74                                                                         .append( layout.$element ),
  75                                                                 $( '<div>' )
  76                                                                         .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-filterItemWidget-highlightButton' )
  77                                                                         .append( this.highlightButton.$element )
  78                                                         )
  79                                         )
  80                         );
  81         };
  82
  83         /* Initialization */
  84
  85         OO.inheritClass( mw.rcfilters.ui.FilterItemWidget, OO.ui.Widget );
  86
  87         /* Methods */
  88
  89         /**
  90          * Respond to checkbox change.
  91          * NOTE: This event is emitted both for deliberate user action and for
  92          * a change that the code requests ('setSelected')
  93          *
  94          * @param {boolean} isSelected The checkbox is selected
  95          */
  96         mw.rcfilters.ui.FilterItemWidget.prototype.onCheckboxChange = function ( isSelected ) {
  97                 this.controller.toggleFilterSelect( this.model.getName(), isSelected );
  98         };
  99
 100         /**
 101          * Respond to item model update event
 102          */
 103         mw.rcfilters.ui.FilterItemWidget.prototype.onModelUpdate = function () {
 104                 this.checkboxWidget.setSelected( this.model.isSelected() );
 105
 106                 this.setCurrentMuteState();
 107         };
 108
 109         /**
 110          * Respond to item group model update event
 111          */
 112         mw.rcfilters.ui.FilterItemWidget.prototype.onGroupModelUpdate = function () {
 113                 this.setCurrentMuteState();
 114         };
 115
 116         /**
 117          * Set selected state on this widget
 118          *
 119          * @param {boolean} [isSelected] Widget is selected
 120          */
 121         mw.rcfilters.ui.FilterItemWidget.prototype.toggleSelected = function ( isSelected ) {
 122                 isSelected = isSelected !== undefined ? isSelected : !this.selected;
 123
 124                 if ( this.selected !== isSelected ) {
 125                         this.selected = isSelected;
 126
 127                         this.$element.toggleClass( 'mw-rcfilters-ui-filterItemWidget-selected', this.selected );
 128                 }
 129         };
 130
 131         /**
 132          * Set the current mute state for this item
 133          */
 134         mw.rcfilters.ui.FilterItemWidget.prototype.setCurrentMuteState = function () {
 135                 this.$element.toggleClass(
 136                         'mw-rcfilters-ui-filterItemWidget-muted',
 137                         this.model.isConflicted() ||
 138                         this.model.isIncluded() ||
 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                         )
 145                 );
 146
 147                 this.highlightButton.toggle( this.model.isHighlightEnabled() );
 148         };
 149
 150         /**
 151          * Get the name of this filter
 152          *
 153          * @return {string} Filter name
 154          */
 155         mw.rcfilters.ui.FilterItemWidget.prototype.getName = function () {
 156                 return this.model.getName();
 157         };
 158 }( mediaWiki, jQuery ) );