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

   1 ( function ( mw ) {
   2         /**
   3          * A widget representing a single toggle filter
   4          *
   5          * @extends OO.ui.MenuOptionWidget
   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.FilterMenuOptionWidget = function MwRcfiltersUiFilterMenuOptionWidget( controller, model, config ) {
  13                 var layout,
  14                         $label = $( '<div>' )
  15                                 .addClass( 'mw-rcfilters-ui-filterMenuOptionWidget-label' );
  16
  17                 config = config || {};
  18
  19                 this.controller = controller;
  20                 this.model = model;
  21
  22                 // Parent
  23                 mw.rcfilters.ui.FilterMenuOptionWidget.parent.call( this, $.extend( {
  24                         // Override the 'check' icon that OOUI defines
  25                         icon: '',
  26                         data: this.model.getName(),
  27                         label: this.model.getLabel()
  28                 }, config ) );
  29
  30                 this.checkboxWidget = new mw.rcfilters.ui.CheckboxInputWidget( {
  31                         value: this.model.getName(),
  32                         selected: this.model.isSelected()
  33                 } );
  34
  35                 $label.append(
  36                         $( '<div>' )
  37                                 .addClass( 'mw-rcfilters-ui-filterMenuOptionWidget-label-title' )
  38                                 .append( this.$label )
  39                 );
  40                 if ( this.model.getDescription() ) {
  41                         $label.append(
  42                                 $( '<div>' )
  43                                         .addClass( 'mw-rcfilters-ui-filterMenuOptionWidget-label-desc' )
  44                                         .text( this.model.getDescription() )
  45                         );
  46                 }
  47
  48                 this.highlightButton = new mw.rcfilters.ui.FilterItemHighlightButton(
  49                         this.controller,
  50                         this.model,
  51                         {
  52                                 $overlay: config.$overlay || this.$element,
  53                                 title: mw.msg( 'rcfilters-highlightmenu-help' )
  54                         }
  55                 );
  56                 this.highlightButton.toggle( this.model.isHighlightEnabled() );
  57
  58                 layout = new OO.ui.FieldLayout( this.checkboxWidget, {
  59                         label: $label,
  60                         align: 'inline'
  61                 } );
  62
  63                 // Event
  64                 this.model.connect( this, { update: 'onModelUpdate' } );
  65                 this.model.getGroupModel().connect( this, { update: 'onGroupModelUpdate' } );
  66
  67                 this.$element
  68                         .addClass( 'mw-rcfilters-ui-filterMenuOptionWidget' )
  69                         .append(
  70                                 $( '<div>' )
  71                                         .addClass( 'mw-rcfilters-ui-table' )
  72                                         .append(
  73                                                 $( '<div>' )
  74                                                         .addClass( 'mw-rcfilters-ui-row' )
  75                                                         .append(
  76                                                                 $( '<div>' )
  77                                                                         .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-filterMenuOptionWidget-filterCheckbox' )
  78                                                                         .append( layout.$element ),
  79                                                                 $( '<div>' )
  80                                                                         .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-filterMenuOptionWidget-highlightButton' )
  81                                                                         .append( this.highlightButton.$element )
  82                                                         )
  83                                         )
  84                         );
  85         };
  86
  87         /* Initialization */
  88
  89         OO.inheritClass( mw.rcfilters.ui.FilterMenuOptionWidget, OO.ui.MenuOptionWidget );
  90
  91         /* Static properties */
  92
  93         // We do our own scrolling to top
  94         mw.rcfilters.ui.FilterMenuOptionWidget.static.scrollIntoViewOnSelect = false;
  95
  96         /* Methods */
  97
  98         /**
  99          * Respond to item model update event
 100          */
 101         mw.rcfilters.ui.FilterMenuOptionWidget.prototype.onModelUpdate = function () {
 102                 this.checkboxWidget.setSelected( this.model.isSelected() );
 103
 104                 this.setCurrentMuteState();
 105         };
 106
 107         /**
 108          * Respond to item group model update event
 109          */
 110         mw.rcfilters.ui.FilterMenuOptionWidget.prototype.onGroupModelUpdate = function () {
 111                 this.setCurrentMuteState();
 112         };
 113
 114         /**
 115          * Set the current mute state for this item
 116          */
 117         mw.rcfilters.ui.FilterMenuOptionWidget.prototype.setCurrentMuteState = function () {
 118                 this.$element.toggleClass(
 119                         'mw-rcfilters-ui-filterMenuOptionWidget-muted',
 120                         this.model.isConflicted() ||
 121                         (
 122                                 // Item is also muted when any of the items in its group is active
 123                                 this.model.getGroupModel().isActive() &&
 124                                 // But it isn't selected
 125                                 !this.model.isSelected() &&
 126                                 // And also not included
 127                                 !this.model.isIncluded()
 128                         )
 129                 );
 130
 131                 this.highlightButton.toggle( this.model.isHighlightEnabled() );
 132         };
 133
 134         /**
 135          * Get the name of this filter
 136          *
 137          * @return {string} Filter name
 138          */
 139         mw.rcfilters.ui.FilterMenuOptionWidget.prototype.getName = function () {
 140                 return this.model.getName();
 141         };
 142
 143         mw.rcfilters.ui.FilterMenuOptionWidget.prototype.getModel = function () {
 144                 return this.model;
 145         };
 146
 147 }( mediaWiki ) );