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

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