jenkins-bot has submitted this change and it was merged.
Change subject: InputWidget: Add TitledElement and AccessKeyedElement mixins
......................................................................
InputWidget: Add TitledElement and AccessKeyedElement mixins
An InputWidget can (and could) hold a title attribute to provide some
more information about itself. An accesskey helps a user to access the
input faster by using the keyboard shortcuts.
Bug: T98681
Change-Id: I8d06a38390d907e7c95fbc856dafe247a7b861df
---
M demos/pages/widgets.js
M demos/widgets.php
M php/widgets/ButtonInputWidget.php
M php/widgets/InputWidget.php
M src/widgets/ButtonInputWidget.js
M src/widgets/InputWidget.js
6 files changed, 76 insertions(+), 5 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, approved
jenkins-bot: Verified
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index e551c58..bb400e0 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -897,6 +897,26 @@
}
),
new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( {
+ value: 'Title attribute',
+ title: 'Title attribute with
more information about me.'
+ } ),
+ {
+ label: 'TextInputWidget (with
title)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( {
+ value: 'Accesskey A',
+ accessKey: 'a'
+ } ),
+ {
+ label: 'TextInputWidget (with
Accesskey)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
new OO.ui.SelectFileWidget( {} ),
{
label: 'SelectFileWidget\u200E',
diff --git a/demos/widgets.php b/demos/widgets.php
index e6e2c4f..247cbf7 100644
--- a/demos/widgets.php
+++ b/demos/widgets.php
@@ -602,6 +602,26 @@
),
new OOUI\FieldLayout(
new
OOUI\TextInputWidget( array(
+ 'value' =>
'Accesskey A',
+ 'accessKey' =>
'a'
+ ) ),
+ array(
+ 'label' =>
"TextInputWidget (with Accesskey)\xE2\x80\x8E",
+ 'align' => 'top'
+ )
+ ),
+ new OOUI\FieldLayout(
+ new
OOUI\TextInputWidget( array(
+ 'value' =>
'Title attribute',
+ 'title' =>
'Title attribute with more information about me.'
+ ) ),
+ array(
+ 'label' =>
"TextInputWidget (with title)\xE2\x80\x8E",
+ 'align' => 'top'
+ )
+ ),
+ new OOUI\FieldLayout(
+ new
OOUI\TextInputWidget( array(
'multiline' =>
true,
'value' =>
"Multiline\nMultiline"
) ),
diff --git a/php/widgets/ButtonInputWidget.php
b/php/widgets/ButtonInputWidget.php
index feffbe2..00c1791 100644
--- a/php/widgets/ButtonInputWidget.php
+++ b/php/widgets/ButtonInputWidget.php
@@ -55,8 +55,6 @@
$this->mixin( $this->labelElementMixin = new LabelElement(
$this, $config ) );
$this->mixin( new TitledElement( $this,
array_merge( $config, array( 'titled' => $this->input )
) ) );
- $this->mixin( new AccessKeyedElement( $this,
- array_merge( $config, array( 'accessKeyed' =>
$this->input ) ) ) );
// Initialization
if ( !$config['useInputTag'] ) {
diff --git a/php/widgets/InputWidget.php b/php/widgets/InputWidget.php
index 99fdcb1..24f5a51 100644
--- a/php/widgets/InputWidget.php
+++ b/php/widgets/InputWidget.php
@@ -46,6 +46,10 @@
array_merge( $config, array( 'flagged' => $this ) ) ) );
$this->mixin( new TabIndexedElement( $this,
array_merge( $config, array( 'tabIndexed' =>
$this->input ) ) ) );
+ $this->mixin( new TitledElement( $this,
+ array_merge( $config, array( 'titled' => $this->input )
) ) );
+ $this->mixin( new AccessKeyedElement( $this,
+ array_merge( $config, array( 'accessKeyed' =>
$this->input ) ) ) );
// Initialization
if ( isset( $config['name'] ) ) {
diff --git a/src/widgets/ButtonInputWidget.js b/src/widgets/ButtonInputWidget.js
index 6ee9a44..06cfa3d 100644
--- a/src/widgets/ButtonInputWidget.js
+++ b/src/widgets/ButtonInputWidget.js
@@ -23,7 +23,6 @@
* @mixins OO.ui.mixin.IndicatorElement
* @mixins OO.ui.mixin.LabelElement
* @mixins OO.ui.mixin.TitledElement
- * @mixins OO.ui.mixin.AccessKeyedElement
*
* @constructor
* @param {Object} [config] Configuration options
@@ -49,7 +48,6 @@
OO.ui.mixin.IndicatorElement.call( this, config );
OO.ui.mixin.LabelElement.call( this, config );
OO.ui.mixin.TitledElement.call( this, $.extend( {}, config, { $titled:
this.$input } ) );
- OO.ui.mixin.AccessKeyedElement.call( this, $.extend( {}, config, {
$accessKeyed: this.$input } ) );
// Initialization
if ( !config.useInputTag ) {
@@ -66,7 +64,6 @@
OO.mixinClass( OO.ui.ButtonInputWidget, OO.ui.mixin.IndicatorElement );
OO.mixinClass( OO.ui.ButtonInputWidget, OO.ui.mixin.LabelElement );
OO.mixinClass( OO.ui.ButtonInputWidget, OO.ui.mixin.TitledElement );
-OO.mixinClass( OO.ui.ButtonInputWidget, OO.ui.mixin.AccessKeyedElement );
/* Static Properties */
diff --git a/src/widgets/InputWidget.js b/src/widgets/InputWidget.js
index 487b774..3fd5fa5 100644
--- a/src/widgets/InputWidget.js
+++ b/src/widgets/InputWidget.js
@@ -11,11 +11,14 @@
* @extends OO.ui.Widget
* @mixins OO.ui.mixin.FlaggedElement
* @mixins OO.ui.mixin.TabIndexedElement
+ * @mixins OO.ui.mixin.TitledElement
+ * @mixins OO.ui.mixin.AccessKeyedElement
*
* @constructor
* @param {Object} [config] Configuration options
* @cfg {string} [name=''] The value of the input’s HTML `name` attribute.
* @cfg {string} [value=''] The value of the input.
+ * @cfg {string} [accessKey=''] The access key of the input.
* @cfg {Function} [inputFilter] The name of an input filter function. Input
filters modify the value of an input
* before it is accepted.
*/
@@ -34,6 +37,8 @@
// Mixin constructors
OO.ui.mixin.FlaggedElement.call( this, config );
OO.ui.mixin.TabIndexedElement.call( this, $.extend( {}, config, {
$tabIndexed: this.$input } ) );
+ OO.ui.mixin.TitledElement.call( this, $.extend( {}, config, { $titled:
this.$input } ) );
+ OO.ui.mixin.AccessKeyedElement.call( this, $.extend( {}, config, {
$accessKeyed: this.$input } ) );
// Events
this.$input.on( 'keydown mouseup cut paste change input select',
this.onEdit.bind( this ) );
@@ -47,6 +52,7 @@
.addClass( 'oo-ui-inputWidget' )
.append( this.$input );
this.setValue( config.value );
+ this.setAccessKey( config.accessKey );
};
/* Setup */
@@ -54,6 +60,8 @@
OO.inheritClass( OO.ui.InputWidget, OO.ui.Widget );
OO.mixinClass( OO.ui.InputWidget, OO.ui.mixin.FlaggedElement );
OO.mixinClass( OO.ui.InputWidget, OO.ui.mixin.TabIndexedElement );
+OO.mixinClass( OO.ui.InputWidget, OO.ui.mixin.TitledElement );
+OO.mixinClass( OO.ui.InputWidget, OO.ui.mixin.AccessKeyedElement );
/* Static Properties */
@@ -148,6 +156,30 @@
};
/**
+ * Set the input's access key.
+ * FIXME: This is the same code as in OO.ui.mixin.ButtonElement, maybe find a
better place for it?
+ *
+ * @param {string} accessKey Input's access key, use empty string to remove
+ * @chainable
+ */
+OO.ui.InputWidget.prototype.setAccessKey = function ( accessKey ) {
+ accessKey = typeof accessKey === 'string' && accessKey.length ?
accessKey : null;
+
+ if ( this.accessKey !== accessKey ) {
+ if ( this.$input ) {
+ if ( accessKey !== null ) {
+ this.$input.attr( 'accesskey', accessKey );
+ } else {
+ this.$input.removeAttr( 'accesskey' );
+ }
+ }
+ this.accessKey = accessKey;
+ }
+
+ return this;
+};
+
+/**
* Clean up incoming value.
*
* Ensures value is a string, and converts undefined and null to empty string.
--
To view, visit https://gerrit.wikimedia.org/r/231591
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I8d06a38390d907e7c95fbc856dafe247a7b861df
Gerrit-PatchSet: 11
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Florianschmidtwelzow <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Florianschmidtwelzow <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
