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

   1 var FilterItemHighlightButton = require( './FilterItemHighlightButton.js' ),
   2         CheckboxInputWidget = require( './CheckboxInputWidget.js' ),
   3         ItemMenuOptionWidget;
   4
   5 /**
   6  * A widget representing a base toggle item
   7  *
   8  * @class mw.rcfilters.ui.ItemMenuOptionWidget
   9  * @extends OO.ui.MenuOptionWidget
  10  *
  11  * @constructor
  12  * @param {mw.rcfilters.Controller} controller RCFilters controller
  13  * @param {mw.rcfilters.dm.FiltersViewModel} filtersViewModel
  14  * @param {mw.rcfilters.dm.ItemModel} invertModel
  15  * @param {mw.rcfilters.dm.ItemModel} itemModel Item model
  16  * @param {mw.rcfilters.ui.HighlightPopupWidget} highlightPopup Shared highlight color picker
  17  * @param {Object} config Configuration object
  18  */
  19 ItemMenuOptionWidget = function MwRcfiltersUiItemMenuOptionWidget(
  20         controller, filtersViewModel, invertModel, itemModel, highlightPopup, config
  21 ) {
  22         var layout,
  23                 $widgetRow,
  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         $widgetRow = $( '<div>' )
  98                 .addClass( 'mw-rcfilters-ui-table' )
  99                 .append(
 100                         $( '<div>' )
 101                                 .addClass( 'mw-rcfilters-ui-row' )
 102                                 .append(
 103                                         $( '<div>' )
 104                                                 .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-itemMenuOptionWidget-itemCheckbox' )
 105                                                 .append( layout.$element )
 106                                 )
 107                 );
 108
 109         if ( !OO.ui.isMobile() ) {
 110                 $widgetRow.find( '.mw-rcfilters-ui-row' ).append(
 111                         $( '<div>' )
 112                                 .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-itemMenuOptionWidget-excludeLabel' )
 113                                 .append( this.excludeLabel.$element ),
 114                         $( '<div>' )
 115                                 .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-itemMenuOptionWidget-highlightButton' )
 116                                 .append( this.highlightButton.$element )
 117                 );
 118         }
 119
 120         this.$element
 121                 .addClass( 'mw-rcfilters-ui-itemMenuOptionWidget' )
 122                 .addClass( 'mw-rcfilters-ui-itemMenuOptionWidget-view-' + this.itemModel.getGroupModel().getView() )
 123                 .append( $widgetRow );
 124
 125         if ( this.itemModel.getIdentifiers() ) {
 126                 this.itemModel.getIdentifiers().forEach( function ( ident ) {
 127                         classes.push( 'mw-rcfilters-ui-itemMenuOptionWidget-identifier-' + ident );
 128                 } );
 129
 130                 this.$element.addClass( classes );
 131         }
 132
 133         this.updateUiBasedOnState();
 134 };
 135
 136 /* Initialization */
 137
 138 OO.inheritClass( ItemMenuOptionWidget, OO.ui.MenuOptionWidget );
 139
 140 /* Static properties */
 141
 142 // We do our own scrolling to top
 143 ItemMenuOptionWidget.static.scrollIntoViewOnSelect = false;
 144
 145 /* Methods */
 146
 147 /**
 148  * Respond to item model update event
 149  */
 150 ItemMenuOptionWidget.prototype.updateUiBasedOnState = function () {
 151         this.checkboxWidget.setSelected( this.itemModel.isSelected() );
 152
 153         this.highlightButton.toggle( this.filtersViewModel.isHighlightEnabled() );
 154         this.excludeLabel.toggle(
 155                 this.itemModel.getGroupModel().getView() === 'namespaces' &&
 156                 this.itemModel.isSelected() &&
 157                 this.invertModel.isSelected()
 158         );
 159         this.toggle( this.itemModel.isVisible() );
 160 };
 161
 162 /**
 163  * Get the name of this filter
 164  *
 165  * @return {string} Filter name
 166  */
 167 ItemMenuOptionWidget.prototype.getName = function () {
 168         return this.itemModel.getName();
 169 };
 170
 171 ItemMenuOptionWidget.prototype.getModel = function () {
 172         return this.itemModel;
 173 };
 174
 175 module.exports = ItemMenuOptionWidget;