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

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