jenkins-bot has submitted this change and it was merged.

Change subject: CapsuleWidgets: Edit on click and remove on Ctrl+Backspace
......................................................................


CapsuleWidgets: Edit on click and remove on Ctrl+Backspace

It will also add the item using the label on blur when possible.

This will sort of break the CategorySelector in core as those capsules
have clickable links inside them.

Bug: T119046
Change-Id: Iefb41fd8ee22be2160079b7ada79186e2b2cbc4d
---
M src/widgets/CapsuleItemWidget.js
M src/widgets/CapsuleMultiSelectWidget.js
2 files changed, 39 insertions(+), 13 deletions(-)

Approvals:
  Bartosz Dziewoński: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/src/widgets/CapsuleItemWidget.js b/src/widgets/CapsuleItemWidget.js
index d64592b..f7e809b 100644
--- a/src/widgets/CapsuleItemWidget.js
+++ b/src/widgets/CapsuleItemWidget.js
@@ -35,6 +35,7 @@
 
        // Initialization
        this.$element
+               .on( 'click', this.onClick.bind( this ) )
                .addClass( 'oo-ui-capsuleItemWidget' )
                .append( this.$label, this.closeButton.$element );
 };
@@ -59,3 +60,14 @@
                element.focus();
        }
 };
+
+/**
+ * Handle click event for the entire capsule
+ */
+OO.ui.CapsuleItemWidget.prototype.onClick = function () {
+       var element = this.getElementGroup();
+
+       if ( !this.isDisabled() && element && $.isFunction( element.editItem ) 
) {
+               element.editItem( this );
+       }
+};
diff --git a/src/widgets/CapsuleMultiSelectWidget.js 
b/src/widgets/CapsuleMultiSelectWidget.js
index a1f09e0..93d0a7a 100644
--- a/src/widgets/CapsuleMultiSelectWidget.js
+++ b/src/widgets/CapsuleMultiSelectWidget.js
@@ -288,6 +288,23 @@
 };
 
 /**
+ * Add items to the capsule by providing a label
+ * @param {string} label
+ * @return {boolean} Whether the item was added or not
+ */
+OO.ui.CapsuleMultiSelectWidget.prototype.addItemFromLabel = function ( label ) 
{
+       var item = this.menu.getItemFromLabel( label, true );
+       if ( item ) {
+               this.addItemsFromData( [ item.data ] );
+               return true;
+       } else if ( this.allowArbitrary && this.$input.val().trim() !== '' ) {
+               this.addItemsFromData( [ label ] );
+               return true;
+       }
+       return false;
+};
+
+/**
  * Remove items by data
  * @chainable
  * @param {Mixed[]} datas
@@ -412,9 +429,7 @@
  * @param {jQuery.Event} event
  */
 OO.ui.CapsuleMultiSelectWidget.prototype.onInputBlur = function () {
-       if ( this.allowArbitrary && this.$input.val().trim() !== '' ) {
-               this.addItemsFromData( [ this.$input.val() ] );
-       }
+       this.addItemFromLabel( this.$input.val() );
        this.clearInput();
 };
 
@@ -477,8 +492,6 @@
  * @param {jQuery.Event} e Key press event
  */
 OO.ui.CapsuleMultiSelectWidget.prototype.onKeyPress = function ( e ) {
-       var item;
-
        if ( !this.isDisabled() ) {
                if ( e.which === OO.ui.Keys.ESCAPE ) {
                        this.clearInput();
@@ -488,12 +501,7 @@
                if ( !this.popup ) {
                        this.menu.toggle( true );
                        if ( e.which === OO.ui.Keys.ENTER ) {
-                               item = this.menu.getItemFromLabel( 
this.$input.val(), true );
-                               if ( item ) {
-                                       this.addItemsFromData( [ item.data ] );
-                                       this.clearInput();
-                               } else if ( this.allowArbitrary && 
this.$input.val().trim() !== '' ) {
-                                       this.addItemsFromData( [ 
this.$input.val() ] );
+                               if ( this.addItemFromLabel( this.$input.val() ) 
) {
                                        this.clearInput();
                                }
                                return false;
@@ -514,8 +522,14 @@
 OO.ui.CapsuleMultiSelectWidget.prototype.onKeyDown = function ( e ) {
        if ( !this.isDisabled() ) {
                // 'keypress' event is not triggered for Backspace
-               if ( e.keyCode === OO.ui.Keys.BACKSPACE && this.$input.val() 
=== '' ) {
-                       if ( this.items.length ) {
+               if (
+                       e.keyCode === OO.ui.Keys.BACKSPACE &&
+                       this.$input.val() === '' &&
+                       this.items.length
+               ) {
+                       if ( e.metaKey || e.ctrlKey ) {
+                               this.removeItems( this.items.slice( -1 ) );
+                       } else {
                                this.editItem( this.items[ this.items.length - 
1 ] );
                        }
                        return false;

-- 
To view, visit https://gerrit.wikimedia.org/r/268076
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: Iefb41fd8ee22be2160079b7ada79186e2b2cbc4d
Gerrit-PatchSet: 5
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: Prtksxna <[email protected]>
Gerrit-Reviewer: jenkins-bot <>

_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to