jenkins-bot has submitted this change and it was merged.
Change subject: CapsuleWidgets: Toggle through capsules and the input with
arrow keys
......................................................................
CapsuleWidgets: Toggle through capsules and the input with arrow keys
Bug: T119045
Change-Id: Iaf98b61e4e5281024eb68ed022c5a253107c5234
---
M src/widgets/CapsuleItemWidget.js
M src/widgets/CapsuleMultiSelectWidget.js
2 files changed, 71 insertions(+), 6 deletions(-)
Approvals:
Jforrester: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/widgets/CapsuleItemWidget.js b/src/widgets/CapsuleItemWidget.js
index 0d66865..fa62cdb 100644
--- a/src/widgets/CapsuleItemWidget.js
+++ b/src/widgets/CapsuleItemWidget.js
@@ -92,5 +92,16 @@
} else if ( e.keyCode === OO.ui.Keys.ENTER ) {
element.editItem( this );
return false;
+ } else if ( e.keyCode === OO.ui.Keys.LEFT ) {
+ element.getPreviousItem( this ).focus();
+ } else if ( e.keyCode === OO.ui.Keys.RIGHT ) {
+ element.getNextItem( this ).focus();
}
};
+
+/**
+ * Focuses the capsule
+ */
+OO.ui.CapsuleItemWidget.prototype.focus = function () {
+ this.$element.focus();
+};
diff --git a/src/widgets/CapsuleMultiSelectWidget.js
b/src/widgets/CapsuleMultiSelectWidget.js
index 5b94611..4c87b9c 100644
--- a/src/widgets/CapsuleMultiSelectWidget.js
+++ b/src/widgets/CapsuleMultiSelectWidget.js
@@ -403,6 +403,56 @@
};
/**
+ * Given an item, returns the item after it. If its the last item,
+ * returns `this.$input`. If no item is passed, returns the very first
+ * item.
+ *
+ * @param {OO.ui.CapsuleItemWidget} [item]
+ * @return {OO.ui.CapsuleItemWidget|jQuery|boolean}
+ */
+OO.ui.CapsuleMultiSelectWidget.prototype.getNextItem = function ( item ) {
+ var itemIndex;
+
+ if ( item === undefined ) {
+ return this.items[ 0 ];
+ }
+
+ itemIndex = this.items.indexOf( item );
+ if ( itemIndex < 0 ) { // Item not in list
+ return false;
+ } else if ( itemIndex === this.items.length - 1 ) { // Last item
+ return this.$input;
+ } else {
+ return this.items[ itemIndex + 1 ];
+ }
+};
+
+/**
+ * Given an item, returns the item before it. If its the first item,
+ * returns `this.$input`. If no item is passed, returns the very last
+ * item.
+ *
+ * @param {OO.ui.CapsuleItemWidget} [item]
+ * @return {OO.ui.CapsuleItemWidget|jQuery|boolean}
+ */
+OO.ui.CapsuleMultiSelectWidget.prototype.getPreviousItem = function ( item ) {
+ var itemIndex;
+
+ if ( item === undefined ) {
+ return this.items[ this.items.length - 1 ];
+ }
+
+ itemIndex = this.items.indexOf( item );
+ if ( itemIndex < 0 ) { // Item not in list
+ return false;
+ } else if ( itemIndex === 0 ) { // First item
+ return this.$input;
+ } else {
+ return this.items[ itemIndex - 1 ];
+ }
+};
+
+/**
* Get the capsule widget's menu.
* @return {OO.ui.MenuSelectWidget} Menu widget
*/
@@ -520,19 +570,23 @@
* @param {jQuery.Event} e Key down event
*/
OO.ui.CapsuleMultiSelectWidget.prototype.onKeyDown = function ( e ) {
- if ( !this.isDisabled() ) {
+ if (
+ !this.isDisabled() &&
+ this.$input.val() === '' &&
+ this.items.length
+ ) {
// 'keypress' event is not triggered for Backspace
- if (
- e.keyCode === OO.ui.Keys.BACKSPACE &&
- this.$input.val() === '' &&
- this.items.length
- ) {
+ if ( e.keyCode === OO.ui.Keys.BACKSPACE ) {
if ( e.metaKey || e.ctrlKey ) {
this.removeItems( this.items.slice( -1 ) );
} else {
this.editItem( this.items[ this.items.length -
1 ] );
}
return false;
+ } else if ( e.keyCode === OO.ui.Keys.LEFT ) {
+ this.getPreviousItem().focus();
+ } else if ( e.keyCode === OO.ui.Keys.RIGHT ) {
+ this.getNextItem().focus();
}
}
};
--
To view, visit https://gerrit.wikimedia.org/r/268078
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Iaf98b61e4e5281024eb68ed022c5a253107c5234
Gerrit-PatchSet: 11
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <[email protected]>
Gerrit-Reviewer: Anomie <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
