Bartosz Dziewoński has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/332398 )
Change subject: FieldLayout: Move <label> from $body to $label
......................................................................
FieldLayout: Move <label> from $body to $label
When the <label> element (currently, $body is one) wraps anything else
than the actual label and the actual input it pertains to, weird
things happen. In particular, for ActionFieldLayout, hovering/clicking
the button causes hover/click effects on the main input.
We put <label> on the $body, because we were relying on the nesting for
the <label> to work. But since I3424ecfd741b5e268513a5dd778e5082de8f7674
added the 'for' attribute, we no longer need this.
Additionally, let's always use <label> rather than <div> for consistency.
We did this to avoid wrapping <label> around complicated widgets, but
now we no longer wrap it around anything.
Change-Id: Ic4651a7d0868c505dee85ace8d7ac3b6017cfac1
---
M php/layouts/FieldLayout.php
M src/layouts/FieldLayout.js
2 files changed, 13 insertions(+), 13 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/98/332398/1
diff --git a/php/layouts/FieldLayout.php b/php/layouts/FieldLayout.php
index e7b638b..d17d846 100644
--- a/php/layouts/FieldLayout.php
+++ b/php/layouts/FieldLayout.php
@@ -77,8 +77,6 @@
throw new Exception( 'Widget not found' );
}
- $hasInputWidget = $fieldWidget::$supportsSimpleLabel;
-
// Config initialization
$config = array_merge( [ 'align' => 'left' ], $config );
@@ -92,7 +90,7 @@
$this->field = new Tag( 'div' );
$this->messages = new Tag( 'ul' );
$this->header = new Tag( 'div' );
- $this->body = new Tag( $hasInputWidget ? 'label' : 'div' );
+ $this->body = new Tag( 'div' );
if ( isset( $config['help'] ) ) {
$this->help = new ButtonWidget( [
'classes' => [ 'oo-ui-fieldLayout-help' ],
@@ -105,13 +103,15 @@
}
// Traits
- $this->initializeLabelElement( $config );
+ $this->initializeLabelElement( array_merge( $config, [
+ 'labelElement' => new Tag( 'label' )
+ ] ) );
$this->initializeTitledElement(
array_merge( $config, [ 'titled' => $this->label ] ) );
// Initialization
- if ( $hasInputWidget ) {
- $this->body->setAttributes( [ 'for' =>
$this->fieldWidget->getInputId() ] );
+ if ( $fieldWidget::$supportsSimpleLabel ) {
+ $this->label->setAttributes( [ 'for' =>
$this->fieldWidget->getInputId() ] );
}
$this
->addClasses( [ 'oo-ui-fieldLayout' ] )
diff --git a/src/layouts/FieldLayout.js b/src/layouts/FieldLayout.js
index 806c17e..ebbeee4 100644
--- a/src/layouts/FieldLayout.js
+++ b/src/layouts/FieldLayout.js
@@ -39,7 +39,7 @@
* @throws {Error} An error is thrown if no widget is specified
*/
OO.ui.FieldLayout = function OoUiFieldLayout( fieldWidget, config ) {
- var hasInputWidget, $div;
+ var $div;
// Allow passing positional parameters inside the config object
if ( OO.isPlainObject( fieldWidget ) && config === undefined ) {
@@ -52,8 +52,6 @@
throw new Error( 'Widget not found' );
}
- hasInputWidget = fieldWidget.constructor.static.supportsSimpleLabel;
-
// Configuration initialization
config = $.extend( { align: 'left' }, config );
@@ -61,7 +59,9 @@
OO.ui.FieldLayout.parent.call( this, config );
// Mixin constructors
- OO.ui.mixin.LabelElement.call( this, config );
+ OO.ui.mixin.LabelElement.call( this, $.extend( {}, config, {
+ $label: $( '<label>' )
+ } ) );
OO.ui.mixin.TitledElement.call( this, $.extend( {}, config, { $titled:
this.$label } ) );
// Properties
@@ -71,7 +71,7 @@
this.$field = $( '<div>' );
this.$messages = $( '<ul>' );
this.$header = $( '<div>' );
- this.$body = $( '<' + ( hasInputWidget ? 'label' : 'div' ) + '>' );
+ this.$body = $( '<div>' );
this.align = null;
if ( config.help ) {
this.popupButtonWidget = new OO.ui.PopupButtonWidget( {
@@ -98,8 +98,8 @@
this.fieldWidget.connect( this, { disable: 'onFieldDisable' } );
// Initialization
- if ( hasInputWidget ) {
- this.$body.attr( 'for', this.fieldWidget.getInputId() );
+ if ( fieldWidget.constructor.static.supportsSimpleLabel ) {
+ this.$label.attr( 'for', this.fieldWidget.getInputId() );
}
this.$element
.addClass( 'oo-ui-fieldLayout' )
--
To view, visit https://gerrit.wikimedia.org/r/332398
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ic4651a7d0868c505dee85ace8d7ac3b6017cfac1
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <matma....@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
