Implement the show/hide based on the group checkbox with CSS instead of
JavaScript.
Hide the expiry input field initially with CSS instead of JavaScript.
Change-Id: I33a4b0a13dab92156aeea96529573ad49fa2d616
}
$ret .= "\t<td style='vertical-align:top;'>\n";
foreach ( $column as $group => $checkbox ) {
}
$ret .= "\t<td style='vertical-align:top;'>\n";
foreach ( $column as $group => $checkbox ) {
- $attr = $checkbox['disabled'] ? [ 'disabled' => 'disabled' ] : [];
+ $attr = [ 'class' => 'mw-userrights-groupcheckbox' ];
+ if ( $checkbox['disabled'] ) {
+ $attr['disabled'] = 'disabled';
+ }
$member = UserGroupMembership::getGroupMemberName( $group, $user->getName() );
if ( $checkbox['irreversible'] ) {
$member = UserGroupMembership::getGroupMemberName( $group, $user->getName() );
if ( $checkbox['irreversible'] ) {
}
$checkboxHtml = Xml::checkLabel( $text, "wpGroup-" . $group,
"wpGroup-" . $group, $checkbox['set'], $attr );
}
$checkboxHtml = Xml::checkLabel( $text, "wpGroup-" . $group,
"wpGroup-" . $group, $checkbox['set'], $attr );
- $ret .= "\t\t" . ( ( $checkbox['disabled'] && $checkbox['disabled-expiry'] )
- ? Xml::tags( 'div', [ 'class' => 'mw-userrights-disabled' ], $checkboxHtml )
- : Xml::tags( 'div', [], $checkboxHtml )
- ) . "\n";
if ( $this->canProcessExpiries() ) {
$uiUser = $this->getUser();
if ( $this->canProcessExpiries() ) {
$uiUser = $this->getUser();
$expiryHtml .= $expiryFormOptions->getHTML() . '<br />';
// Add custom expiry field
$expiryHtml .= $expiryFormOptions->getHTML() . '<br />';
// Add custom expiry field
- $attribs = [ 'id' => "mw-input-wpExpiry-$group-other" ];
+ $attribs = [
+ 'id' => "mw-input-wpExpiry-$group-other",
+ 'class' => 'mw-userrights-expiryfield',
+ ];
if ( $checkbox['disabled-expiry'] ) {
$attribs['disabled'] = 'disabled';
}
if ( $checkbox['disabled-expiry'] ) {
$attribs['disabled'] = 'disabled';
}
'id' => "mw-userrights-nested-wpGroup-$group",
'class' => 'mw-userrights-nested',
];
'id' => "mw-userrights-nested-wpGroup-$group",
'class' => 'mw-userrights-nested',
];
- $ret .= "\t\t\t" . Xml::tags( 'div', $divAttribs, $expiryHtml ) . "\n";
+ $checkboxHtml .= "\t\t\t" . Xml::tags( 'div', $divAttribs, $expiryHtml ) . "\n";
+ $ret .= "\t\t" . ( ( $checkbox['disabled'] && $checkbox['disabled-expiry'] )
+ ? Xml::tags( 'div', [ 'class' => 'mw-userrights-disabled' ], $checkboxHtml )
+ : Xml::tags( 'div', [], $checkboxHtml )
+ ) . "\n";
.mw-userrights-groups * th {
text-align: left;
}
.mw-userrights-groups * th {
text-align: left;
}
+
+/* Dynamically show/hide the expiry selection underneath each checkbox */
+input.mw-userrights-groupcheckbox:not( :checked ) ~ .mw-userrights-nested {
+ display: none;
+}
+
+/* Initial hide the expiry fields to prevent a FOUC on loading */
+/* The input fields gets unhidden by JavaScript when needed */
+.client-js .mw-userrights-expiryfield {
+ display: none;
+}
// Replace successbox with notifications
convertmessagebox();
// Replace successbox with notifications
convertmessagebox();
- // Dynamically show/hide the expiry selection underneath each checkbox
- $( '#mw-userrights-form2 input[type=checkbox]' ).on( 'change', function ( e ) {
- $( '#mw-userrights-nested-' + e.target.id ).toggle( e.target.checked );
- } ).trigger( 'change' );
-
- // Also dynamically show/hide the "other time" input under each dropdown
+ // Dynamically show/hide the "other time" input under each dropdown
$( '.mw-userrights-nested select' ).on( 'change', function ( e ) {
$( e.target.parentNode ).find( 'input' ).toggle( $( e.target ).val() === 'other' );
$( '.mw-userrights-nested select' ).on( 'change', function ( e ) {
$( e.target.parentNode ).find( 'input' ).toggle( $( e.target ).val() === 'other' );
- } ).trigger( 'change' );