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