Prtksxna has uploaded a new change for review.
https://gerrit.wikimedia.org/r/268078
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, 70 insertions(+), 6 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/78/268078/1
diff --git a/src/widgets/CapsuleItemWidget.js b/src/widgets/CapsuleItemWidget.js
index 6479ff5..487d6c3 100644
--- a/src/widgets/CapsuleItemWidget.js
+++ b/src/widgets/CapsuleItemWidget.js
@@ -91,5 +91,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 13d8238..6d5a4e1 100644
--- a/src/widgets/CapsuleMultiSelectWidget.js
+++ b/src/widgets/CapsuleMultiSelectWidget.js
@@ -384,6 +384,55 @@
}
return this;
};
+/**
+ * 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 {Object} item
+ */
+
+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 {Object} item
+ */
+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.
@@ -512,19 +561,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: newchange
Gerrit-Change-Id: Iaf98b61e4e5281024eb68ed022c5a253107c5234
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
