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

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