Merge "RC filters: update the state of the app on popstate."

[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 cf03932..f28523a 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( {
@@ -36,6 +38,7 @@
                        popup: {
                                padded: false,
                                align: 'center',
+                               position: 'above',
                                $content: $popupContent
                                        .append( descLabelWidget.$element ),
                                $floatableContainer: this.$element,
@@ -60,8 +63,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();
@@ -90,6 +93,14 @@
                e.stopPropagation();
        };
 
+       /**
+        * Emit a click event when the capsule is clicked so we can aggregate this
+        * in the parent (the capsule)
+        */
+       mw.rcfilters.ui.CapsuleItemWidget.prototype.onClick = function () {
+               this.emit( 'click' );
+       };
+
        /**
         * Override the event listening to the item close button click
         */
@@ -101,8 +112,7 @@
                }
 
                // Respond to user removing the filter
-               this.controller.updateFilter( this.model.getName(), false );
-               this.controller.clearHighlightColor( this.model.getName() );
+               this.controller.clearFilter( this.model.getName() );
        };
 
        mw.rcfilters.ui.CapsuleItemWidget.prototype.setHighlightColor = function () {
@@ -125,25 +135,61 @@
                                'mw-rcfilters-ui-capsuleItemWidget-muted',
                                !this.model.isSelected() ||
                                this.model.isIncluded() ||
-                               this.model.isConflicted() ||
                                this.model.isFullyCovered()
+                       )
+                       .toggleClass(
+                               'mw-rcfilters-ui-capsuleItemWidget-conflicted',
+                               this.model.isConflicted()
                        );
        };
 
        /**
-        * 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 ) {
-                               // Recalculate position to be center of the capsule item
-                               this.popup.$element.css( 'margin-left', ( this.$element.width() / 2 ) );
+                       if ( !this.positioned ) {
+                               // Recalculate anchor position to be center of the capsule item
+                               this.popup.$anchor.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 mouse leave event
+        */
+       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;
+       };
+
+       /**
+        * Set selected state on this widget
+        *
+        * @param {boolean} [isSelected] Widget is selected
+        */
+       mw.rcfilters.ui.CapsuleItemWidget.prototype.toggleSelected = function ( isSelected ) {
+               isSelected = isSelected !== undefined ? isSelected : !this.selected;
+
+               if ( this.selected !== isSelected ) {
+                       this.selected = isSelected;
+
+                       this.$element.toggleClass( 'mw-rcfilters-ui-capsuleItemWidget-selected', this.selected );
                }
        };