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