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-content' ),
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;
27 this.popupTimeoutShow
= null;
28 this.popupTimeoutHide
= null;
31 mw
.rcfilters
.ui
.CapsuleItemWidget
.parent
.call( this, $.extend( {
32 data
: this.model
.getName(),
33 label
: this.model
.getLabel()
37 OO
.ui
.mixin
.PopupElement
.call( this, $.extend( {
41 $content
: $popupContent
42 .append( descLabelWidget
.$element
),
43 $floatableContainer
: this.$element
,
44 classes
: [ 'mw-rcfilters-ui-capsuleItemWidget-popup' ]
48 // Set initial text for the popup - the description
49 descLabelWidget
.setLabel( this.model
.getDescription() );
51 this.$highlight
= $( '<div>' )
52 .addClass( 'mw-rcfilters-ui-capsuleItemWidget-highlight' );
55 this.model
.connect( this, { update
: 'onModelUpdate' } );
57 this.closeButton
.$element
.on( 'mousedown', this.onCloseButtonMouseDown
.bind( this ) );
60 this.$overlay
.append( this.popup
.$element
);
62 .prepend( this.$highlight
)
63 .attr( 'aria-haspopup', 'true' )
64 .addClass( 'mw-rcfilters-ui-capsuleItemWidget' )
65 .on( 'mouseenter', this.onMouseEnter
.bind( this ) )
66 .on( 'mouseleave', this.onMouseLeave
.bind( this ) );
68 this.setCurrentMuteState();
69 this.setHighlightColor();
72 OO
.inheritClass( mw
.rcfilters
.ui
.CapsuleItemWidget
, OO
.ui
.CapsuleItemWidget
);
73 OO
.mixinClass( mw
.rcfilters
.ui
.CapsuleItemWidget
, OO
.ui
.mixin
.PopupElement
);
76 * Respond to model update event
78 mw
.rcfilters
.ui
.CapsuleItemWidget
.prototype.onModelUpdate = function () {
79 this.setCurrentMuteState();
81 this.setHighlightColor();
85 * Override mousedown event to prevent its propagation to the parent,
86 * since the parent (the multiselect widget) focuses the popup when its
87 * mousedown event is fired.
89 * @param {jQuery.Event} e Event
91 mw
.rcfilters
.ui
.CapsuleItemWidget
.prototype.onCloseButtonMouseDown = function ( e
) {
96 * Emit a click event when the capsule is clicked so we can aggregate this
97 * in the parent (the capsule)
99 mw
.rcfilters
.ui
.CapsuleItemWidget
.prototype.onClick = function () {
100 this.emit( 'click' );
104 * Override the event listening to the item close button click
106 mw
.rcfilters
.ui
.CapsuleItemWidget
.prototype.onCloseClick = function () {
107 var element
= this.getElementGroup();
109 if ( element
&& $.isFunction( element
.removeItems
) ) {
110 element
.removeItems( [ this ] );
113 // Respond to user removing the filter
114 this.controller
.updateFilter( this.model
.getName(), false );
115 this.controller
.clearHighlightColor( this.model
.getName() );
118 mw
.rcfilters
.ui
.CapsuleItemWidget
.prototype.setHighlightColor = function () {
119 var selectedColor
= this.model
.isHighlightEnabled() ? this.model
.getHighlightColor() : null;
122 .attr( 'data-color', selectedColor
)
124 'mw-rcfilters-ui-capsuleItemWidget-highlight-highlighted',
130 * Set the current mute state for this item
132 mw
.rcfilters
.ui
.CapsuleItemWidget
.prototype.setCurrentMuteState = function () {
135 'mw-rcfilters-ui-capsuleItemWidget-muted',
136 !this.model
.isSelected() ||
137 this.model
.isIncluded() ||
138 this.model
.isConflicted() ||
139 this.model
.isFullyCovered()
144 * Respond to mouse enter event
146 mw
.rcfilters
.ui
.CapsuleItemWidget
.prototype.onMouseEnter = function () {
147 if ( this.model
.getDescription() ) {
148 if ( !this.positioned
) {
149 // Recalculate position to be center of the capsule item
150 this.popup
.$element
.css( 'margin-left', ( this.$element
.width() / 2 ) );
151 this.positioned
= true;
154 // Set timeout for the popup to show
155 this.popupTimeoutShow
= setTimeout( function () {
156 this.popup
.toggle( true );
157 }.bind( this ), 500 );
159 // Cancel the hide timeout
160 clearTimeout( this.popupTimeoutHide
);
161 this.popupTimeoutHide
= null;
166 * Respond to mouse leave event
168 mw
.rcfilters
.ui
.CapsuleItemWidget
.prototype.onMouseLeave = function () {
169 this.popupTimeoutHide
= setTimeout( function () {
170 this.popup
.toggle( false );
171 }.bind( this ), 250 );
173 // Clear the show timeout
174 clearTimeout( this.popupTimeoutShow
);
175 this.popupTimeoutShow
= null;
179 * Remove and destroy external elements of this widget
181 mw
.rcfilters
.ui
.CapsuleItemWidget
.prototype.destroy = function () {
183 this.popup
.$element
.detach();
186 this.model
.disconnect( this );
187 this.closeButton
.disconnect( this );
189 }( mediaWiki
, jQuery
) );