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( {
popup: {
padded: false,
align: 'center',
+ position: 'above',
$content: $popupContent
.append( descLabelWidget.$element ),
$floatableContainer: this.$element,
.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();
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
*/
}
// 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 () {
'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 );
}
};