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

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