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

   1 ( function ( mw, $ ) {
   2         /**
   3          * A widget representing a single toggle filter
   4          *
   5          * @extends OO.ui.Widget
   6          *
   7          * @constructor
   8          * @param {mw.rcfilters.Controller} controller RCFilters controller
   9          * @param {mw.rcfilters.dm.FilterItem} model Filter item model
  10          * @param {Object} config Configuration object
  11          */
  12         mw.rcfilters.ui.FilterItemWidget = function MwRcfiltersUiFilterItemWidget( controller, model, config ) {
  13                 var layout,
  14                         $label = $( '<div>' )
  15                                 .addClass( 'mw-rcfilters-ui-filterItemWidget-label' );
  16
  17                 config = config || {};
  18
  19                 // Parent
  20                 mw.rcfilters.ui.FilterItemWidget.parent.call( this, config );
  21
  22                 this.controller = controller;
  23                 this.model = model;
  24
  25                 this.checkboxWidget = new mw.rcfilters.ui.CheckboxInputWidget( {
  26                         value: this.model.getName(),
  27                         selected: this.model.isSelected()
  28                 } );
  29
  30                 $label.append(
  31                         $( '<div>' )
  32                                 .addClass( 'mw-rcfilters-ui-filterItemWidget-label-title' )
  33                                 .text( this.model.getLabel() )
  34                 );
  35                 if ( this.model.getDescription() ) {
  36                         $label.append(
  37                                 $( '<div>' )
  38                                         .addClass( 'mw-rcfilters-ui-filterItemWidget-label-desc' )
  39                                         .text( this.model.getDescription() )
  40                         );
  41                 }
  42
  43                 layout = new OO.ui.FieldLayout( this.checkboxWidget, {
  44                         label: $label,
  45                         align: 'inline'
  46                 } );
  47
  48                 // Event
  49                 this.checkboxWidget.connect( this, { userChange: 'onCheckboxChange' } );
  50                 this.model.connect( this, { update: 'onModelUpdate' } );
  51
  52                 this.$element
  53                         .addClass( 'mw-rcfilters-ui-filterItemWidget' )
  54                         .append(
  55                                 layout.$element
  56                         );
  57         };
  58
  59         /* Initialization */
  60
  61         OO.inheritClass( mw.rcfilters.ui.FilterItemWidget, OO.ui.Widget );
  62
  63         /* Methods */
  64
  65         /**
  66          * Respond to checkbox change.
  67          * NOTE: This event is emitted both for deliberate user action and for
  68          * a change that the code requests ('setSelected')
  69          *
  70          * @param {boolean} isSelected The checkbox is selected
  71          */
  72         mw.rcfilters.ui.FilterItemWidget.prototype.onCheckboxChange = function ( isSelected ) {
  73                 this.controller.updateFilter( this.model.getName(), isSelected );
  74         };
  75
  76         /**
  77          * Respond to item model update event
  78          */
  79         mw.rcfilters.ui.FilterItemWidget.prototype.onModelUpdate = function () {
  80                 this.checkboxWidget.setSelected( this.model.isSelected() );
  81
  82                 this.$element.toggleClass(
  83                         'mw-rcfilters-ui-filterItemWidget-inactive',
  84                         !this.model.isActive()
  85                 );
  86         };
  87
  88         /**
  89          * Get the name of this filter
  90          *
  91          * @return {string} Filter name
  92          */
  93         mw.rcfilters.ui.FilterItemWidget.prototype.getName = function () {
  94                 return this.model.getName();
  95         };
  96
  97 }( mediaWiki, jQuery ) );