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

   1 /*!
   2  * MediaWiki Widgets - ComplexNamespaceInputWidget class.
   3  *
   4  * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
   5  * @license The MIT License (MIT); see LICENSE.txt
   6  */
   7 ( function () {
   8
   9         /**
  10          * @classdesc Displays a dropdown box with the choice of available namespaces,
  11          * plus two checkboxes to include associated namespace or to invert selection.
  12          *
  13          * @class
  14          * @extends OO.ui.Widget
  15          *
  16          * @constructor
  17          * @description Create an instance of `mw.widgets.ComplexNamespaceInputWidget`.
  18          * @param {Object} [config] Configuration options
  19          * @param {Object} config.namespace Configuration for the NamespaceInputWidget dropdown with list
  20          *     of namespaces
  21          * @param {string} config.namespace.includeAllValue If specified, add a "all namespaces"
  22          *     option to the dropdown, and use this as the input value for it
  23          * @param {Object} config.invert Configuration for the "invert selection" CheckboxInputWidget. If
  24          *     null, the checkbox will not be generated.
  25          * @param {Object} config.associated Configuration for the "include associated namespace"
  26          *     CheckboxInputWidget. If null, the checkbox will not be generated.
  27          * @param {Object} config.invertLabel Configuration for the FieldLayout with label wrapping the
  28          *     "invert selection" checkbox
  29          * @param {string} config.invertLabel.label Label text for the label
  30          * @param {Object} config.associatedLabel Configuration for the FieldLayout with label wrapping
  31          *     the "include associated namespace" checkbox
  32          * @param {string} config.associatedLabel.label Label text for the label
  33          */
  34         mw.widgets.ComplexNamespaceInputWidget = function MwWidgetsComplexNamespaceInputWidget( config ) {
  35                 // Configuration initialization
  36                 config = Object.assign(
  37                         {
  38                                 // Config options for nested widgets
  39                                 namespace: {},
  40                                 invert: {},
  41                                 invertLabel: {},
  42                                 associated: {},
  43                                 associatedLabel: {}
  44                         },
  45                         config
  46                 );
  47
  48                 // Parent constructor
  49                 mw.widgets.ComplexNamespaceInputWidget.super.call( this, config );
  50
  51                 // Properties
  52                 this.config = config;
  53
  54                 this.namespace = new mw.widgets.NamespaceInputWidget( config.namespace );
  55                 if ( config.associated !== null ) {
  56                         this.associated = new OO.ui.CheckboxInputWidget( Object.assign(
  57                                 { value: '1' },
  58                                 config.associated
  59                         ) );
  60                         // TODO Should use a LabelWidget? But they don't work like HTML <label>s yet
  61                         this.associatedLabel = new OO.ui.FieldLayout(
  62                                 this.associated,
  63                                 Object.assign(
  64                                         { align: 'inline' },
  65                                         config.associatedLabel
  66                                 )
  67                         );
  68                 }
  69                 if ( config.invert !== null ) {
  70                         this.invert = new OO.ui.CheckboxInputWidget( Object.assign(
  71                                 { value: '1' },
  72                                 config.invert
  73                         ) );
  74                         // TODO Should use a LabelWidget? But they don't work like HTML <label>s yet
  75                         this.invertLabel = new OO.ui.FieldLayout(
  76                                 this.invert,
  77                                 Object.assign(
  78                                         { align: 'inline' },
  79                                         config.invertLabel
  80                                 )
  81                         );
  82                 }
  83
  84                 // Events
  85                 this.namespace.connect( this, { change: 'updateCheckboxesState' } );
  86
  87                 // Initialization
  88                 this.$element
  89                         .addClass( 'mw-widget-complexNamespaceInputWidget' )
  90                         .append(
  91                                 this.namespace.$element,
  92                                 this.invert ? this.invertLabel.$element : '',
  93                                 this.associated ? this.associatedLabel.$element : ''
  94                         );
  95                 this.updateCheckboxesState();
  96         };
  97
  98         /* Setup */
  99
 100         OO.inheritClass( mw.widgets.ComplexNamespaceInputWidget, OO.ui.Widget );
 101
 102         /* Methods */
 103
 104         /**
 105          * Update the disabled state of checkboxes when the value of namespace dropdown changes.
 106          *
 107          * @private
 108          */
 109         mw.widgets.ComplexNamespaceInputWidget.prototype.updateCheckboxesState = function () {
 110                 const disabled = this.namespace.getValue() === this.namespace.allValue;
 111                 if ( this.invert ) {
 112                         this.invert.setDisabled( disabled );
 113                 }
 114                 if ( this.associated ) {
 115                         this.associated.setDisabled( disabled );
 116                 }
 117         };
 118
 119         /**
 120          * @inheritdoc
 121          */
 122         mw.widgets.ComplexNamespaceInputWidget.prototype.setDisabled = function ( disabled ) {
 123                 mw.widgets.ComplexNamespaceInputWidget.super.prototype.setDisabled.call( this, disabled );
 124                 if ( this.namespace ) {
 125                         this.namespace.setDisabled( disabled );
 126                 }
 127                 if ( this.invert ) {
 128                         this.invert.setDisabled( disabled );
 129                 }
 130
 131                 if ( this.associated ) {
 132                         this.associated.setDisabled( disabled );
 133                 }
 134                 return this;
 135         };
 136
 137 }() );