resources/src/mediawiki.widgets/mw.widgets.CheckMatrixWidget.js

   1 ( function () {
   2         /**
   3          * A JavaScript version of CheckMatrixWidget.
   4          *
   5          * @class
   6          * @extends OO.ui.Widget
   7          *
   8          * @constructor
   9          * @param {Object} [config] Configuration options
  10          * @cfg {Object} columns Required object mapping column labels (as HTML) to
  11          *  their tags.
  12          * @cfg {Object} rows Required object mapping row labels (as HTML) to their
  13          *  tags.
  14          * @cfg {string[]} [forcedOn] Array of column-row tags to be displayed as
  15          *  enabled but unavailable to change.
  16          * @cfg {string[]} [forcedOff] Array of column-row tags to be displayed as
  17          *  disabled but unavailable to change.
  18          * @cfg {Object} [tooltips] Optional object mapping row labels to tooltips
  19          *  (as text, will be escaped).
  20          */
  21         mw.widgets.CheckMatrixWidget = function MWWCheckMatrixWidget( config ) {
  22                 var $headRow = $( '<tr>' ),
  23                         $table = $( '<table>' ),
  24                         widget = this;
  25                 config = config || {};
  26
  27                 // Parent constructor
  28                 mw.widgets.CheckMatrixWidget.parent.call( this, config );
  29                 this.checkboxes = {};
  30                 this.name = config.name;
  31                 this.id = config.id;
  32                 this.rows = config.rows || {};
  33                 this.columns = config.columns || {};
  34                 this.tooltips = config.tooltips || [];
  35                 this.values = config.values || [];
  36                 this.forcedOn = config.forcedOn || [];
  37                 this.forcedOff = config.forcedOff || [];
  38
  39                 // Build header
  40                 $headRow.append( $( '<td>' ).text( '\u00A0' ) );
  41
  42                 // Iterate over the columns object (ignore the value)
  43                 // eslint-disable-next-line no-restricted-properties
  44                 $.each( this.columns, function ( columnLabel ) {
  45                         $headRow.append( $( '<td>' ).html( columnLabel ) );
  46                 } );
  47                 $table.append( $headRow );
  48
  49                 // Build table
  50                 // eslint-disable-next-line no-restricted-properties
  51                 $.each( this.rows, function ( rowLabel, rowTag ) {
  52                         var $row = $( '<tr>' ),
  53                                 labelField = new OO.ui.FieldLayout(
  54                                         new OO.ui.Widget(), // Empty widget, since we don't have the checkboxes here
  55                                         {
  56                                                 label: new OO.ui.HtmlSnippet( rowLabel ),
  57                                                 help: widget.tooltips[ rowLabel ],
  58                                                 align: 'inline'
  59                                         }
  60                                 );
  61
  62                         // Label
  63                         $row.append( $( '<td>' ).append( labelField.$element ) );
  64
  65                         // Columns
  66                         // eslint-disable-next-line no-restricted-properties
  67                         $.each( widget.columns, function ( columnLabel, columnTag ) {
  68                                 var thisTag = columnTag + '-' + rowTag,
  69                                         checkbox = new OO.ui.CheckboxInputWidget( {
  70                                                 value: thisTag,
  71                                                 name: widget.name ? widget.name + '[]' : undefined,
  72                                                 id: widget.id ? widget.id + '-' + thisTag : undefined,
  73                                                 selected: widget.isTagSelected( thisTag ),
  74                                                 disabled: widget.isTagDisabled( thisTag )
  75                                         } );
  76
  77                                 widget.checkboxes[ thisTag ] = checkbox;
  78                                 $row.append( $( '<td>' ).append( checkbox.$element ) );
  79                         } );
  80
  81                         $table.append( $row );
  82                 } );
  83
  84                 this.$element
  85                         .addClass( 'mw-widget-checkMatrixWidget' )
  86                         .append( $table );
  87         };
  88
  89         /* Setup */
  90
  91         OO.inheritClass( mw.widgets.CheckMatrixWidget, OO.ui.Widget );
  92
  93         /* Methods */
  94
  95         /**
  96          * Check whether the given tag is selected
  97          *
  98          * @param {string} tagName Tag name
  99          * @return {boolean} Tag is selected
 100          */
 101         mw.widgets.CheckMatrixWidget.prototype.isTagSelected = function ( tagName ) {
 102                 return (
 103                         // If tag is not forced off
 104                         this.forcedOff.indexOf( tagName ) === -1 &&
 105                         (
 106                                 // If tag is in values
 107                                 this.values.indexOf( tagName ) > -1 ||
 108                                 // If tag is forced on
 109                                 this.forcedOn.indexOf( tagName ) > -1
 110                         )
 111                 );
 112         };
 113
 114         /**
 115          * Check whether the given tag is disabled
 116          *
 117          * @param {string} tagName Tag name
 118          * @return {boolean} Tag is disabled
 119          */
 120         mw.widgets.CheckMatrixWidget.prototype.isTagDisabled = function ( tagName ) {
 121                 return (
 122                         // If the entire widget is disabled
 123                         this.isDisabled() ||
 124                         // If tag is forced off or forced on
 125                         this.forcedOff.indexOf( tagName ) > -1 ||
 126                         this.forcedOn.indexOf( tagName ) > -1
 127                 );
 128         };
 129         /**
 130          * @inheritdoc
 131          */
 132         mw.widgets.CheckMatrixWidget.prototype.setDisabled = function ( isDisabled ) {
 133                 var widget = this;
 134
 135                 // Parent method
 136                 mw.widgets.CheckMatrixWidget.parent.prototype.setDisabled.call( this, isDisabled );
 137
 138                 // setDisabled sometimes gets called before the widget is ready
 139                 if ( this.checkboxes && Object.keys( this.checkboxes ).length > 0 ) {
 140                         // Propagate to all checkboxes and update their disabled state
 141                         // eslint-disable-next-line no-restricted-properties
 142                         $.each( this.checkboxes, function ( name, checkbox ) {
 143                                 checkbox.setDisabled( widget.isTagDisabled( name ) );
 144                         } );
 145                 }
 146         };
 147 }() );