jenkins-bot has submitted this change and it was merged.
Change subject: Introduce AccessKeyedElement
......................................................................
Introduce AccessKeyedElement
Not only a ButtonElement can have an accesskey. Theoretically, every tag
can hold the accesskey attribute, so OOUI should standardise how this
attribute is set (like it is in ButtonElement).
Change-Id: I1f5df66d5334fb093c9b569dc38bd9344082900a
---
M build/modules.json
M demos/pages/widgets.js
M demos/widgets.php
A php/mixins/AccessKeyedElement.php
M php/mixins/ButtonElement.php
M php/widgets/ButtonInputWidget.php
M php/widgets/ButtonWidget.php
A src/mixins/AccessKeyedElement.js
M src/mixins/ButtonElement.js
M src/widgets/ButtonInputWidget.js
M src/widgets/ButtonWidget.js
11 files changed, 214 insertions(+), 60 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, approved
jenkins-bot: Verified
diff --git a/build/modules.json b/build/modules.json
index f68d6f7..d3c45d0 100644
--- a/build/modules.json
+++ b/build/modules.json
@@ -34,6 +34,7 @@
"src/mixins/FlaggedElement.js",
"src/mixins/TitledElement.js",
"src/mixins/ClippableElement.js",
+ "src/mixins/AccessKeyedElement.js",
"src/Tool.js",
"src/Toolbar.js",
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index d861bd9..e551c58 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -484,6 +484,16 @@
label: 'ButtonWidget
(frameless, indicator)\u200E',
align: 'top'
}
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'AccessKeyed',
+ accessKey: 'k'
+ } ),
+ {
+ label: 'ButtonWidget (with
accesskey k)\u200E',
+ align: 'top'
+ }
)
]
} ),
diff --git a/demos/widgets.php b/demos/widgets.php
index 11f5def..e6e2c4f 100644
--- a/demos/widgets.php
+++ b/demos/widgets.php
@@ -406,6 +406,16 @@
'label' =>
"ButtonWidget (frameless, constructive, disabled)\xE2\x80\x8E",
'align' => 'top'
)
+ ),
+ new OOUI\FieldLayout(
+ new OOUI\ButtonWidget(
array(
+ 'label' =>
'AccessKeyed',
+ 'accessKey' =>
'k',
+ ) ),
+ array(
+ 'label' =>
"ButtonWidget (with accesskey k)\xE2\x80\x8E",
+ 'align' => 'top'
+ )
)
)
) ) );
diff --git a/php/mixins/AccessKeyedElement.php
b/php/mixins/AccessKeyedElement.php
new file mode 100644
index 0000000..eb4b79e
--- /dev/null
+++ b/php/mixins/AccessKeyedElement.php
@@ -0,0 +1,76 @@
+<?php
+
+namespace OOUI;
+
+/**
+ * Element with an accesskey.
+ *
+ * Accesskeys allow an user to go to a specific element by using
+ * a shortcut combination of a browser specific keys + the key
+ * set to the field.
+ *
+ * @abstract
+ */
+class AccessKeyedElement extends ElementMixin {
+ /**
+ * Accesskey
+ *
+ * @var string
+ */
+ protected $accessKey = null;
+
+ public static $targetPropertyName = 'accessKeyed';
+
+ /**
+ * @param Element $element Element being mixed into
+ * @param array $config Configuration options
+ * @param string $config['accessKey'] AccessKey. If not provided, no
accesskey will be added
+ */
+ public function __construct( Element $element, array $config = array()
) {
+ // Parent constructor
+ $target = isset( $config['accessKeyed'] ) ?
$config['accessKeyed'] : $element;
+ parent::__construct( $element, $target, $config );
+
+ // Initialization
+ $this->setAccessKey(
+ isset( $config['accessKey'] ) ? $config['accessKey'] :
null
+ );
+ }
+
+ /**
+ * Set access key.
+ *
+ * @param string $accessKey Tag's access key, use empty string to remove
+ * @chainable
+ */
+ public function setAccessKey( $accessKey ) {
+ $accessKey = is_string( $accessKey ) && strlen( $accessKey ) ?
$accessKey : null;
+
+ if ( $this->accessKey !== $accessKey ) {
+ if ( $accessKey !== null ) {
+ $this->target->setAttributes( array(
'accesskey' => $accessKey ) );
+ } else {
+ $this->target->removeAttributes( array(
'accesskey' ) );
+ }
+ $this->accessKey = $accessKey;
+ }
+
+ return $this;
+ }
+
+ /**
+ * Get AccessKey.
+ *
+ * @return string Accesskey string
+ */
+ public function getAccessKey() {
+ return $this->accessKey;
+ }
+
+ public function getConfig( &$config ) {
+ if ( $this->accessKey !== null ) {
+ $config['accessKey'] = $this->accessKey;
+ }
+ return parent::getConfig( $config );
+ }
+}
diff --git a/php/mixins/ButtonElement.php b/php/mixins/ButtonElement.php
index f9acf2d..b09c794 100644
--- a/php/mixins/ButtonElement.php
+++ b/php/mixins/ButtonElement.php
@@ -18,20 +18,12 @@
*/
protected $framed = false;
- /**
- * Button's access key.
- *
- * @var string
- */
- protected $accessKey = null;
-
public static $targetPropertyName = 'button';
/**
* @param Element $element Element being mixed into
* @param array $config Configuration options
* @param boolean $config['framed'] Render button with a frame
(default: true)
- * @param string $config['accessKey'] Button's access key
*/
public function __construct( Element $element, array $config = array()
) {
// Parent constructor
@@ -42,7 +34,6 @@
$this->element->addClasses( array( 'oo-ui-buttonElement' ) );
$this->target->addClasses( array( 'oo-ui-buttonElement-button'
) );
$this->toggleFramed( isset( $config['framed'] ) ?
$config['framed'] : true );
- $this->setAccessKey( isset( $config['accessKey'] ) ?
$config['accessKey'] : null );
$this->target->setAttributes( array(
'role' => 'button',
) );
@@ -69,33 +60,9 @@
return $this->framed;
}
- /**
- * Set access key.
- *
- * @param string $accessKey Button's access key, use empty string to
remove
- * @chainable
- */
- public function setAccessKey( $accessKey ) {
- $accessKey = is_string( $accessKey ) && strlen( $accessKey ) ?
$accessKey : null;
-
- if ( $this->accessKey !== $accessKey ) {
- if ( $accessKey !== null ) {
- $this->target->setAttributes( array(
'accesskey' => $accessKey ) );
- } else {
- $this->target->removeAttributes( array(
'accesskey' ) );
- }
- $this->accessKey = $accessKey;
- }
-
- return $this;
- }
-
public function getConfig( &$config ) {
if ( $this->framed !== true ) {
$config['framed'] = $this->framed;
- }
- if ( $this->accessKey !== null ) {
- $config['accessKey'] = $this->accessKey;
}
return parent::getConfig( $config );
}
diff --git a/php/widgets/ButtonInputWidget.php
b/php/widgets/ButtonInputWidget.php
index 00c1791..feffbe2 100644
--- a/php/widgets/ButtonInputWidget.php
+++ b/php/widgets/ButtonInputWidget.php
@@ -55,6 +55,8 @@
$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/ButtonWidget.php b/php/widgets/ButtonWidget.php
index f26608b..976ac6c 100644
--- a/php/widgets/ButtonWidget.php
+++ b/php/widgets/ButtonWidget.php
@@ -50,6 +50,8 @@
$this->mixin( new FlaggedElement( $this, $config ) );
$this->mixin( new TabIndexedElement( $this,
array_merge( $config, array( 'tabIndexed' =>
$this->button ) ) ) );
+ $this->mixin( new AccessKeyedElement( $this,
+ array_merge( $config, array( 'accessKeyed' =>
$this->button ) ) ) );
// Initialization
$this->button->appendContent( $this->icon, $this->label,
$this->indicator );
diff --git a/src/mixins/AccessKeyedElement.js b/src/mixins/AccessKeyedElement.js
new file mode 100644
index 0000000..d672dab
--- /dev/null
+++ b/src/mixins/AccessKeyedElement.js
@@ -0,0 +1,106 @@
+/**
+ * AccessKeyedElement is mixed into other classes to provide an `accesskey`
attribute.
+ * Accesskeys allow an user to go to a specific element by using
+ * a shortcut combination of a browser specific keys + the key
+ * set to the field.
+ *
+ * @example
+ * // AccessKeyedElement provides an 'accesskey' attribute to the
+ * // ButtonWidget class
+ * var button = new OO.ui.ButtonWidget( {
+ * label: 'Button with Accesskey',
+ * accessKey: 'k'
+ * } );
+ * $( 'body' ).append( button.$element );
+ *
+ * @abstract
+ * @class
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ * @cfg {jQuery} [$accessKeyed] The element to which the `accesskey` attribute
is applied.
+ * If this config is omitted, the accesskey functionality is applied to
$element, the
+ * element created by the class.
+ * @cfg {string|Function} [accessKey] The key or a function that returns the
key. If
+ * this config is omitted, no accesskey will be added.
+ */
+OO.ui.mixin.AccessKeyedElement = function OoUiMixinAccessKeyedElement( config
) {
+ // Configuration initialization
+ config = config || {};
+
+ // Properties
+ this.$accessKeyed = null;
+ this.accessKey = null;
+
+ // Initialization
+ this.setAccessKey( config.accessKey || null );
+ this.setAccessKeyedElement( config.$accessKeyed || this.$element );
+};
+
+/* Setup */
+
+OO.initClass( OO.ui.mixin.AccessKeyedElement );
+
+/* Static Properties */
+
+/**
+ * The access key, a function that returns a key, or `null` for no accesskey.
+ *
+ * @static
+ * @inheritable
+ * @property {string|Function|null}
+ */
+OO.ui.mixin.AccessKeyedElement.static.accessKey = null;
+
+/* Methods */
+
+/**
+ * Set the accesskeyed element.
+ *
+ * This method is used to retarget a AccessKeyedElement mixin so that its
functionality applies to the specified element.
+ * If an element is already set, the mixin's effect on that element is removed
before the new element is set up.
+ *
+ * @param {jQuery} $accessKeyed Element that should use the 'accesskeyes'
functionality
+ */
+OO.ui.mixin.AccessKeyedElement.prototype.setAccessKeyedElement = function (
$accessKeyed ) {
+ if ( this.$accessKeyed ) {
+ this.$accessKeyed.removeAttr( 'accesskey' );
+ }
+
+ this.$accessKeyed = $accessKeyed;
+ if ( this.accessKey ) {
+ this.$accessKeyed.attr( 'accesskey', this.accessKey );
+ }
+};
+
+/**
+ * Set accesskey.
+ *
+ * @param {string|Function|null} accesskey Key, a function that returns a key,
or `null` for no accesskey
+ * @chainable
+ */
+OO.ui.mixin.AccessKeyedElement.prototype.setAccessKey = function ( accessKey )
{
+ accessKey = typeof accessKey === 'string' ? OO.ui.resolveMsg( accessKey
) : null;
+
+ if ( this.accessKey !== accessKey ) {
+ if ( this.$accessKeyed ) {
+ if ( accessKey !== null ) {
+ this.$accessKeyed.attr( 'accesskey', accessKey
);
+ } else {
+ this.$accessKeyed.removeAttr( 'accesskey' );
+ }
+ }
+ this.accessKey = accessKey;
+ }
+
+ return this;
+};
+
+/**
+ * Get accesskey.
+ *
+ * @return {string} accessKey string
+ */
+OO.ui.mixin.AccessKeyedElement.prototype.getAccessKey = function () {
+ return this.accessKey;
+};
diff --git a/src/mixins/ButtonElement.js b/src/mixins/ButtonElement.js
index 1099ceb..c8ff026 100644
--- a/src/mixins/ButtonElement.js
+++ b/src/mixins/ButtonElement.js
@@ -12,7 +12,6 @@
* @cfg {jQuery} [$button] The button element created by the class.
* If this configuration is omitted, the button element will use a generated
`<a>`.
* @cfg {boolean} [framed=true] Render the button with a frame
- * @cfg {string} [accessKey] Button's access key
*/
OO.ui.mixin.ButtonElement = function OoUiMixinButtonElement( config ) {
// Configuration initialization
@@ -21,7 +20,6 @@
// Properties
this.$button = null;
this.framed = null;
- this.accessKey = null;
this.active = false;
this.onMouseUpHandler = this.onMouseUp.bind( this );
this.onMouseDownHandler = this.onMouseDown.bind( this );
@@ -33,7 +31,6 @@
// Initialization
this.$element.addClass( 'oo-ui-buttonElement' );
this.toggleFramed( config.framed === undefined || config.framed );
- this.setAccessKey( config.accessKey );
this.setButtonElement( config.$button || $( '<a>' ) );
};
@@ -91,7 +88,7 @@
this.$button = $button
.addClass( 'oo-ui-buttonElement-button' )
- .attr( { role: 'button', accesskey: this.accessKey } )
+ .attr( { role: 'button' } )
.on( {
mousedown: this.onMouseDownHandler,
keydown: this.onKeyDownHandler,
@@ -219,29 +216,6 @@
.toggleClass( 'oo-ui-buttonElement-frameless', !framed )
.toggleClass( 'oo-ui-buttonElement-framed', framed );
this.updateThemeClasses();
- }
-
- return this;
-};
-
-/**
- * Set the button's access key.
- *
- * @param {string} accessKey Button's access key, use empty string to remove
- * @chainable
- */
-OO.ui.mixin.ButtonElement.prototype.setAccessKey = function ( accessKey ) {
- accessKey = typeof accessKey === 'string' && accessKey.length ?
accessKey : null;
-
- if ( this.accessKey !== accessKey ) {
- if ( this.$button ) {
- if ( accessKey !== null ) {
- this.$button.attr( 'accesskey', accessKey );
- } else {
- this.$button.removeAttr( 'accesskey' );
- }
- }
- this.accessKey = accessKey;
}
return this;
diff --git a/src/widgets/ButtonInputWidget.js b/src/widgets/ButtonInputWidget.js
index 06cfa3d..6ee9a44 100644
--- a/src/widgets/ButtonInputWidget.js
+++ b/src/widgets/ButtonInputWidget.js
@@ -23,6 +23,7 @@
* @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
@@ -48,6 +49,7 @@
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 ) {
@@ -64,6 +66,7 @@
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/ButtonWidget.js b/src/widgets/ButtonWidget.js
index d3d96b3..ed96585 100644
--- a/src/widgets/ButtonWidget.js
+++ b/src/widgets/ButtonWidget.js
@@ -26,6 +26,7 @@
* @mixins OO.ui.mixin.TitledElement
* @mixins OO.ui.mixin.FlaggedElement
* @mixins OO.ui.mixin.TabIndexedElement
+ * @mixins OO.ui.mixin.AccessKeyedElement
*
* @constructor
* @param {Object} [config] Configuration options
@@ -48,6 +49,7 @@
OO.ui.mixin.TitledElement.call( this, $.extend( {}, config, { $titled:
this.$button } ) );
OO.ui.mixin.FlaggedElement.call( this, config );
OO.ui.mixin.TabIndexedElement.call( this, $.extend( {}, config, {
$tabIndexed: this.$button } ) );
+ OO.ui.mixin.AccessKeyedElement.call( this, $.extend( {}, config, {
$accessKeyed: this.$button } ) );
// Properties
this.href = null;
@@ -77,6 +79,7 @@
OO.mixinClass( OO.ui.ButtonWidget, OO.ui.mixin.TitledElement );
OO.mixinClass( OO.ui.ButtonWidget, OO.ui.mixin.FlaggedElement );
OO.mixinClass( OO.ui.ButtonWidget, OO.ui.mixin.TabIndexedElement );
+OO.mixinClass( OO.ui.ButtonWidget, OO.ui.mixin.AccessKeyedElement );
/* Methods */
--
To view, visit https://gerrit.wikimedia.org/r/231590
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I1f5df66d5334fb093c9b569dc38bd9344082900a
Gerrit-PatchSet: 9
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
