a547020ce6c06504f6c126a92e24712c85d451f2
3 * Extend OOUI's CapsuleItemWidget to also display a popup on hover.
6 * @extends OO.ui.CapsuleItemWidget
7 * @mixins OO.ui.mixin.PopupElement
10 * @param {mw.rcfilters.Controller} controller
11 * @param {mw.rcfilters.dm.FilterItem} model Item model
12 * @param {Object} config Configuration object
13 * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
15 mw
.rcfilters
.ui
.CapsuleItemWidget
= function MwRcfiltersUiCapsuleItemWidget( controller
, model
, config
) {
16 var $popupContent
= $( '<div>' )
17 .addClass( 'mw-rcfilters-ui-capsuleItemWidget-popup' ),
18 descLabelWidget
= new OO
.ui
.LabelWidget();
20 // Configuration initialization
21 config
= config
|| {};
23 this.controller
= controller
;
25 this.$overlay
= config
.$overlay
|| this.$element
;
26 this.positioned
= false;
29 mw
.rcfilters
.ui
.CapsuleItemWidget
.parent
.call( this, $.extend( {
30 data
: this.model
.getName(),
31 label
: this.model
.getLabel()
35 OO
.ui
.mixin
.PopupElement
.call( this, $.extend( {
39 $content
: $popupContent
40 .append( descLabelWidget
.$element
),
41 $floatableContainer
: this.$element
45 // Set initial text for the popup - the description
46 descLabelWidget
.setLabel( this.model
.getDescription() );
48 this.$highlight
= $( '<div>' )
49 .addClass( 'mw-rcfilters-ui-capsuleItemWidget-highlight' );
52 this.model
.connect( this, { update
: 'onModelUpdate' } );
54 this.closeButton
.connect( this, { click
: 'onCapsuleRemovedByUser' } );
57 this.$overlay
.append( this.popup
.$element
);
59 .prepend( this.$highlight
)
60 .attr( 'aria-haspopup', 'true' )
61 .addClass( 'mw-rcfilters-ui-capsuleItemWidget' )
62 .on( 'mouseover', this.onHover
.bind( this, true ) )
63 .on( 'mouseout', this.onHover
.bind( this, false ) );
65 this.setCurrentMuteState();
66 this.setHighlightColor();
69 OO
.inheritClass( mw
.rcfilters
.ui
.CapsuleItemWidget
, OO
.ui
.CapsuleItemWidget
);
70 OO
.mixinClass( mw
.rcfilters
.ui
.CapsuleItemWidget
, OO
.ui
.mixin
.PopupElement
);
73 * Respond to model update event
75 mw
.rcfilters
.ui
.CapsuleItemWidget
.prototype.onModelUpdate = function () {
76 this.setCurrentMuteState();
78 this.setHighlightColor();
81 mw
.rcfilters
.ui
.CapsuleItemWidget
.prototype.setHighlightColor = function () {
82 var selectedColor
= this.model
.isHighlightEnabled() ? this.model
.getHighlightColor() : null;
85 .attr( 'data-color', selectedColor
)
87 'mw-rcfilters-ui-capsuleItemWidget-highlight-highlighted',
93 * Set the current mute state for this item
95 mw
.rcfilters
.ui
.CapsuleItemWidget
.prototype.setCurrentMuteState = function () {
98 'mw-rcfilters-ui-capsuleItemWidget-muted',
99 !this.model
.isSelected() ||
100 this.model
.isIncluded() ||
101 this.model
.isConflicted() ||
102 this.model
.isFullyCovered()
107 * Respond to hover event on the capsule item.
109 * @param {boolean} isHovering Mouse is hovering on the item
111 mw
.rcfilters
.ui
.CapsuleItemWidget
.prototype.onHover = function ( isHovering
) {
112 if ( this.model
.getDescription() ) {
113 this.popup
.toggle( isHovering
);
115 if ( isHovering
&& !this.positioned
) {
116 // Recalculate position to be center of the capsule item
117 this.popup
.$element
.css( 'margin-left', ( this.$element
.width() / 2 ) );
118 this.positioned
= true;
124 * Respond to the user removing the capsule with the close button
126 mw
.rcfilters
.ui
.CapsuleItemWidget
.prototype.onCapsuleRemovedByUser = function () {
127 this.controller
.updateFilter( this.model
.getName(), false );
128 this.controller
.clearHighlightColor( this.model
.getName() );
132 * Remove and destroy external elements of this widget
134 mw
.rcfilters
.ui
.CapsuleItemWidget
.prototype.destroy = function () {
136 this.popup
.$element
.detach();
139 this.model
.disconnect( this );
140 this.closeButton
.disconnect( this );
142 }( mediaWiki
, jQuery
) );