[ 'name' => 'namespace', 'id' => 'namespace' ]
);
$nsLabel = Xml::label( $this->msg( 'namespace' )->text(), 'namespace' );
- $invert = Xml::checkLabel(
+ $attribs = [ 'class' => [ 'mw-input-with-label' ] ];
+ // Hide the checkboxes when the namespace filter is set to 'all'.
+ if ( $opts['namespace'] === '' ) {
+ $attribs['class'][] = 'mw-input-hidden';
+ }
+ $invert = Html::rawElement( 'span', $attribs, Xml::checkLabel(
$this->msg( 'invert' )->text(), 'invert', 'nsinvert',
$opts['invert'],
[ 'title' => $this->msg( 'tooltip-invert' )->text() ]
- );
- $associated = Xml::checkLabel(
+ ) );
+ $associated = Html::rawElement( 'span', $attribs, Xml::checkLabel(
$this->msg( 'namespace_association' )->text(), 'associated', 'nsassociated',
$opts['associated'],
[ 'title' => $this->msg( 'tooltip-namespace_association' )->text() ]
- );
+ ) );
return [ $nsLabel, "$nsSelect $invert $associated" ];
}
*/
rc = {
/**
- * Handler to disable/enable the namespace selector checkboxes when the
+ * Handler to hide/show the namespace selector checkboxes when the
* special 'all' namespace is selected/unselected respectively.
*/
updateCheckboxes: function () {
var isAllNS = $select.val() === '';
// Iterates over checkboxes and propagate the selected option
- $checkboxes.prop( 'disabled', isAllNS );
+ $checkboxes.toggleClass( 'mw-input-hidden', isAllNS );
},
init: function () {
$select = $( '#namespace' );
- $checkboxes = $( '#nsassociated, #nsinvert' );
+ $checkboxes = $( '#nsassociated, #nsinvert' ).closest( '.mw-input-with-label' );
- // Bind to change event, and trigger once to set the initial state of the checkboxes.
- rc.updateCheckboxes();
+ // Bind to change event of the checkboxes.
+ // The initial state is already set in HTML.
$select.on( 'change', rc.updateCheckboxes );
}
};
// TODO: verify checkboxes == [ 'nsassociated', 'nsinvert' ]
- QUnit.test( '"all" namespace disable checkboxes', function ( assert ) {
+ QUnit.test( '"all" namespace hides checkboxes', function ( assert ) {
var selectHtml, $env, $options,
rc = require( 'mediawiki.special.recentchanges' );
+ '<option value="4">ProjectName</option>'
+ '<option value="5">ProjectName talk</option>'
+ '</select>'
+ + '<span class="mw-input-with-label mw-input-hidden">'
+ '<input name="invert" type="checkbox" value="1" id="nsinvert" title="no title" />'
+ '<label for="nsinvert" title="no title">Invert selection</label>'
+ + '</span>'
+ + '<span class="mw-input-with-label mw-input-hidden">'
+ '<input name="associated" type="checkbox" value="1" id="nsassociated" title="no title" />'
+ '<label for="nsassociated" title="no title">Associated namespace</label>'
+ + '</span>'
+ '<input type="submit" value="Go" />'
+ '<input type="hidden" value="Special:RecentChanges" name="title" />';
// TODO abstract the double strictEquals
- // At first checkboxes are enabled
- assert.strictEqual( $( '#nsinvert' ).prop( 'disabled' ), false );
- assert.strictEqual( $( '#nsassociated' ).prop( 'disabled' ), false );
+ // At first checkboxes are hidden
+ assert.strictEqual( $( '#nsinvert' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), true );
+ assert.strictEqual( $( '#nsassociated' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), true );
// Initiate the recentchanges module
rc.init();
// By default
- assert.strictEqual( $( '#nsinvert' ).prop( 'disabled' ), true );
- assert.strictEqual( $( '#nsassociated' ).prop( 'disabled' ), true );
+ assert.strictEqual( $( '#nsinvert' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), true );
+ assert.strictEqual( $( '#nsassociated' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), true );
// select second option...
$options = $( '#namespace' ).find( 'option' );
$options.eq( 1 ).prop( 'selected', true );
$( '#namespace' ).trigger( 'change' );
- // ... and checkboxes should be enabled again
- assert.strictEqual( $( '#nsinvert' ).prop( 'disabled' ), false );
- assert.strictEqual( $( '#nsassociated' ).prop( 'disabled' ), false );
+ // ... and checkboxes should be visible again
+ assert.strictEqual( $( '#nsinvert' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), false );
+ assert.strictEqual( $( '#nsassociated' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), false );
// select first option ( 'all' namespace)...
$options.eq( 1 ).removeProp( 'selected' );
$options.eq( 0 ).prop( 'selected', true );
$( '#namespace' ).trigger( 'change' );
- // ... and checkboxes should now be disabled
- assert.strictEqual( $( '#nsinvert' ).prop( 'disabled' ), true );
- assert.strictEqual( $( '#nsassociated' ).prop( 'disabled' ), true );
+ // ... and checkboxes should now be hidden
+ assert.strictEqual( $( '#nsinvert' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), true );
+ assert.strictEqual( $( '#nsassociated' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), true );
// DOM cleanup
$env.remove();