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

   1 ( function ( mw ) {
   2         /**
   3          * A widget representing a base toggle item
   4          *
   5          * @extends OO.ui.MenuOptionWidget
   6          *
   7          * @constructor
   8          * @param {mw.rcfilters.Controller} controller RCFilters controller
   9          * @param {mw.rcfilters.dm.ItemModel} invertModel
  10          * @param {mw.rcfilters.dm.ItemModel} model Item model
  11          * @param {Object} config Configuration object
  12          */
  13         mw.rcfilters.ui.ItemMenuOptionWidget = function MwRcfiltersUiItemMenuOptionWidget( controller, invertModel, model, config ) {
  14                 var layout,
  15                         classes = [],
  16                         $label = $( '<div>' )
  17                                 .addClass( 'mw-rcfilters-ui-itemMenuOptionWidget-label' );
  18
  19                 config = config || {};
  20
  21                 this.controller = controller;
  22                 this.invertModel = invertModel;
  23                 this.model = model;
  24
  25                 // Parent
  26                 mw.rcfilters.ui.ItemMenuOptionWidget.parent.call( this, $.extend( {
  27                         // Override the 'check' icon that OOUI defines
  28                         icon: '',
  29                         data: this.model.getName(),
  30                         label: this.model.getLabel()
  31                 }, config ) );
  32
  33                 this.checkboxWidget = new mw.rcfilters.ui.CheckboxInputWidget( {
  34                         value: this.model.getName(),
  35                         selected: this.model.isSelected()
  36                 } );
  37
  38                 $label.append(
  39                         $( '<div>' )
  40                                 .addClass( 'mw-rcfilters-ui-itemMenuOptionWidget-label-title' )
  41                                 .append( this.$label )
  42                 );
  43                 if ( this.model.getDescription() ) {
  44                         $label.append(
  45                                 $( '<div>' )
  46                                         .addClass( 'mw-rcfilters-ui-itemMenuOptionWidget-label-desc' )
  47                                         .text( this.model.getDescription() )
  48                         );
  49                 }
  50
  51                 this.highlightButton = new mw.rcfilters.ui.FilterItemHighlightButton(
  52                         this.controller,
  53                         this.model,
  54                         {
  55                                 $overlay: config.$overlay || this.$element,
  56                                 title: mw.msg( 'rcfilters-highlightmenu-help' )
  57                         }
  58                 );
  59                 this.highlightButton.toggle( this.model.isHighlightEnabled() );
  60
  61                 this.excludeLabel = new OO.ui.LabelWidget( {
  62                         label: mw.msg( 'rcfilters-filter-excluded' )
  63                 } );
  64                 this.excludeLabel.toggle( this.model.isSelected() && this.invertModel.isSelected() );
  65
  66                 layout = new OO.ui.FieldLayout( this.checkboxWidget, {
  67                         label: $label,
  68                         align: 'inline'
  69                 } );
  70
  71                 // Events
  72                 this.invertModel.connect( this, { update: 'onModelUpdate' } );
  73                 this.model.connect( this, { update: 'onModelUpdate' } );
  74                 // HACK: Prevent defaults on 'click' for the label so it
  75                 // doesn't steal the focus away from the input. This means
  76                 // we can continue arrow-movement after we click the label
  77                 // and is consistent with the checkbox *itself* also preventing
  78                 // defaults on 'click' as well.
  79                 layout.$label.on( 'click', false );
  80
  81                 this.$element
  82                         .addClass( 'mw-rcfilters-ui-itemMenuOptionWidget' )
  83                         .addClass( 'mw-rcfilters-ui-itemMenuOptionWidget-view-' + this.model.getGroupModel().getView() )
  84                         .append(
  85                                 $( '<div>' )
  86                                         .addClass( 'mw-rcfilters-ui-table' )
  87                                         .append(
  88                                                 $( '<div>' )
  89                                                         .addClass( 'mw-rcfilters-ui-row' )
  90                                                         .append(
  91                                                                 $( '<div>' )
  92                                                                         .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-itemMenuOptionWidget-itemCheckbox' )
  93                                                                         .append( layout.$element ),
  94                                                                 $( '<div>' )
  95                                                                         .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-itemMenuOptionWidget-excludeLabel' )
  96                                                                         .append( this.excludeLabel.$element ),
  97                                                                 $( '<div>' )
  98                                                                         .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-itemMenuOptionWidget-highlightButton' )
  99                                                                         .append( this.highlightButton.$element )
 100                                                         )
 101                                         )
 102                         );
 103
 104                 if ( this.model.getIdentifiers() ) {
 105                         this.model.getIdentifiers().forEach( function ( ident ) {
 106                                 classes.push( 'mw-rcfilters-ui-itemMenuOptionWidget-identifier-' + ident );
 107                         } );
 108
 109                         this.$element.addClass( classes.join( ' ' ) );
 110                 }
 111         };
 112
 113         /* Initialization */
 114
 115         OO.inheritClass( mw.rcfilters.ui.ItemMenuOptionWidget, OO.ui.MenuOptionWidget );
 116
 117         /* Static properties */
 118
 119         // We do our own scrolling to top
 120         mw.rcfilters.ui.ItemMenuOptionWidget.static.scrollIntoViewOnSelect = false;
 121
 122         /* Methods */
 123
 124         /**
 125          * Respond to item model update event
 126          */
 127         mw.rcfilters.ui.ItemMenuOptionWidget.prototype.onModelUpdate = function () {
 128                 this.checkboxWidget.setSelected( this.model.isSelected() );
 129
 130                 this.highlightButton.toggle( this.model.isHighlightEnabled() );
 131                 this.excludeLabel.toggle( this.model.isSelected() && this.invertModel.isSelected() );
 132         };
 133
 134         /**
 135          * Get the name of this filter
 136          *
 137          * @return {string} Filter name
 138          */
 139         mw.rcfilters.ui.ItemMenuOptionWidget.prototype.getName = function () {
 140                 return this.model.getName();
 141         };
 142
 143         mw.rcfilters.ui.ItemMenuOptionWidget.prototype.getModel = function () {
 144                 return this.model;
 145         };
 146
 147 }( mediaWiki ) );