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