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(
  69                         this.itemModel.getGroupModel().getView() === 'namespaces' &&
  70                         this.itemModel.isSelected() &&
  71                         this.invertModel.isSelected()
  72                 );
  73
  74                 layout = new OO.ui.FieldLayout( this.checkboxWidget, {
  75                         label: $label,
  76                         align: 'inline'
  77                 } );
  78
  79                 // Events
  80                 this.filtersViewModel.connect( this, { highlightChange: 'updateUiBasedOnState' } );
  81                 this.invertModel.connect( this, { update: 'updateUiBasedOnState' } );
  82                 this.itemModel.connect( this, { update: 'updateUiBasedOnState' } );
  83                 // HACK: Prevent defaults on 'click' for the label so it
  84                 // doesn't steal the focus away from the input. This means
  85                 // we can continue arrow-movement after we click the label
  86                 // and is consistent with the checkbox *itself* also preventing
  87                 // defaults on 'click' as well.
  88                 layout.$label.on( 'click', false );
  89
  90                 this.$element
  91                         .addClass( 'mw-rcfilters-ui-itemMenuOptionWidget' )
  92                         .addClass( 'mw-rcfilters-ui-itemMenuOptionWidget-view-' + this.itemModel.getGroupModel().getView() )
  93                         .append(
  94                                 $( '<div>' )
  95                                         .addClass( 'mw-rcfilters-ui-table' )
  96                                         .append(
  97                                                 $( '<div>' )
  98                                                         .addClass( 'mw-rcfilters-ui-row' )
  99                                                         .append(
 100                                                                 $( '<div>' )
 101                                                                         .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-itemMenuOptionWidget-itemCheckbox' )
 102                                                                         .append( layout.$element ),
 103                                                                 $( '<div>' )
 104                                                                         .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-itemMenuOptionWidget-excludeLabel' )
 105                                                                         .append( this.excludeLabel.$element ),
 106                                                                 $( '<div>' )
 107                                                                         .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-itemMenuOptionWidget-highlightButton' )
 108                                                                         .append( this.highlightButton.$element )
 109                                                         )
 110                                         )
 111                         );
 112
 113                 if ( this.itemModel.getIdentifiers() ) {
 114                         this.itemModel.getIdentifiers().forEach( function ( ident ) {
 115                                 classes.push( 'mw-rcfilters-ui-itemMenuOptionWidget-identifier-' + ident );
 116                         } );
 117
 118                         this.$element.addClass( classes.join( ' ' ) );
 119                 }
 120
 121                 this.updateUiBasedOnState();
 122         };
 123
 124         /* Initialization */
 125
 126         OO.inheritClass( mw.rcfilters.ui.ItemMenuOptionWidget, OO.ui.MenuOptionWidget );
 127
 128         /* Static properties */
 129
 130         // We do our own scrolling to top
 131         mw.rcfilters.ui.ItemMenuOptionWidget.static.scrollIntoViewOnSelect = false;
 132
 133         /* Methods */
 134
 135         /**
 136          * Respond to item model update event
 137          */
 138         mw.rcfilters.ui.ItemMenuOptionWidget.prototype.updateUiBasedOnState = function () {
 139                 this.checkboxWidget.setSelected( this.itemModel.isSelected() );
 140
 141                 this.highlightButton.toggle( this.filtersViewModel.isHighlightEnabled() );
 142                 this.excludeLabel.toggle(
 143                         this.itemModel.getGroupModel().getView() === 'namespaces' &&
 144                         this.itemModel.isSelected() &&
 145                         this.invertModel.isSelected()
 146                 );
 147                 this.toggle( this.itemModel.isVisible() );
 148         };
 149
 150         /**
 151          * Get the name of this filter
 152          *
 153          * @return {string} Filter name
 154          */
 155         mw.rcfilters.ui.ItemMenuOptionWidget.prototype.getName = function () {
 156                 return this.itemModel.getName();
 157         };
 158
 159         mw.rcfilters.ui.ItemMenuOptionWidget.prototype.getModel = function () {
 160                 return this.itemModel;
 161         };
 162
 163 }( mediaWiki ) );