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