RCFilters UI: Delay the capsule popup

[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / ui / mw.rcfilters.ui.CapsuleItemWidget.js

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
index 4ab3681..ad9ae5b 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
@@ -24,6 +24,8 @@
                this.model = model;
                this.$overlay = config.$overlay || this.$element;
                this.positioned = false;
+               this.popupTimeoutShow = null;
+               this.popupTimeoutHide = null;
 
                // Parent constructor
                mw.rcfilters.ui.CapsuleItemWidget.parent.call( this, $.extend( {
@@ -52,7 +54,7 @@
                // Events
                this.model.connect( this, { update: 'onModelUpdate' } );
 
-               this.closeButton.connect( this, { click: 'onCapsuleRemovedByUser' } );
+               this.closeButton.$element.on( 'mousedown', this.onCloseButtonMouseDown.bind( this ) );
 
                // Initialization
                this.$overlay.append( this.popup.$element );
@@ -60,8 +62,8 @@
                        .prepend( this.$highlight )
                        .attr( 'aria-haspopup', 'true' )
                        .addClass( 'mw-rcfilters-ui-capsuleItemWidget' )
-                       .on( 'mouseover', this.onHover.bind( this, true ) )
-                       .on( 'mouseout', this.onHover.bind( this, false ) );
+                       .on( 'mouseenter', this.onMouseEnter.bind( this ) )
+                       .on( 'mouseleave', this.onMouseLeave.bind( this ) );
 
                this.setCurrentMuteState();
                this.setHighlightColor();
@@ -79,6 +81,32 @@
                this.setHighlightColor();
        };
 
+       /**
+        * Override mousedown event to prevent its propagation to the parent,
+        * since the parent (the multiselect widget) focuses the popup when its
+        * mousedown event is fired.
+        *
+        * @param {jQuery.Event} e Event
+        */
+       mw.rcfilters.ui.CapsuleItemWidget.prototype.onCloseButtonMouseDown = function ( e ) {
+               e.stopPropagation();
+       };
+
+       /**
+        * Override the event listening to the item close button click
+        */
+       mw.rcfilters.ui.CapsuleItemWidget.prototype.onCloseClick = function () {
+               var element = this.getElementGroup();
+
+               if ( element && $.isFunction( element.removeItems ) ) {
+                       element.removeItems( [ this ] );
+               }
+
+               // Respond to user removing the filter
+               this.controller.updateFilter( this.model.getName(), false );
+               this.controller.clearHighlightColor( this.model.getName() );
+       };
+
        mw.rcfilters.ui.CapsuleItemWidget.prototype.setHighlightColor = function () {
                var selectedColor = this.model.isHighlightEnabled() ? this.model.getHighlightColor() : null;
 
@@ -105,28 +133,38 @@
        };
 
        /**
-        * Respond to hover event on the capsule item.
-        *
-        * @param {boolean} isHovering Mouse is hovering on the item
+        * Respond to mouse enter event
         */
-       mw.rcfilters.ui.CapsuleItemWidget.prototype.onHover = function ( isHovering ) {
+       mw.rcfilters.ui.CapsuleItemWidget.prototype.onMouseEnter = function () {
                if ( this.model.getDescription() ) {
-                       this.popup.toggle( isHovering );
-
-                       if ( isHovering && !this.positioned ) {
+                       if ( !this.positioned ) {
                                // Recalculate position to be center of the capsule item
                                this.popup.$element.css( 'margin-left', ( this.$element.width() / 2 ) );
                                this.positioned = true;
                        }
+
+                       // Set timeout for the popup to show
+                       this.popupTimeoutShow = setTimeout( function () {
+                               this.popup.toggle( true );
+                       }.bind( this ), 500 );
+
+                       // Cancel the hide timeout
+                       clearTimeout( this.popupTimeoutHide );
+                       this.popupTimeoutHide = null;
                }
        };
 
        /**
-        * Respond to the user removing the capsule with the close button
+        * Respond to mouse leave event
         */
-       mw.rcfilters.ui.CapsuleItemWidget.prototype.onCapsuleRemovedByUser = function () {
-               this.controller.updateFilter( this.model.getName(), false );
-               this.controller.clearHighlightColor( this.model.getName() );
+       mw.rcfilters.ui.CapsuleItemWidget.prototype.onMouseLeave = function () {
+               this.popupTimeoutHide = setTimeout( function () {
+                       this.popup.toggle( false );
+               }.bind( this ), 250 );
+
+               // Clear the show timeout
+               clearTimeout( this.popupTimeoutShow );
+               this.popupTimeoutShow = null;
        };
 
        /**