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

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