3 * Extend OOUI's TagItemWidget to also display a popup on hover.
6 * @extends OO.ui.TagItemWidget
7 * @mixins OO.ui.mixin.PopupElement
10 * @param {mw.rcfilters.Controller} controller
11 * @param {mw.rcfilters.dm.FilterItem} invertModel
12 * @param {mw.rcfilters.dm.FilterItem} model Item model
13 * @param {Object} config Configuration object
14 * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
16 mw
.rcfilters
.ui
.TagItemWidget
= function MwRcfiltersUiTagItemWidget( controller
, invertModel
, model
, config
) {
17 // Configuration initialization
18 config
= config
|| {};
20 this.controller
= controller
;
21 this.invertModel
= invertModel
;
23 this.selected
= false;
25 mw
.rcfilters
.ui
.TagItemWidget
.parent
.call( this, $.extend( {
26 data
: this.model
.getName()
29 this.$overlay
= config
.$overlay
|| this.$element
;
30 this.popupLabel
= new OO
.ui
.LabelWidget();
33 OO
.ui
.mixin
.PopupElement
.call( this, $.extend( {
38 $content
: $( '<div>' )
39 .addClass( 'mw-rcfilters-ui-tagItemWidget-popup-content' )
40 .append( this.popupLabel
.$element
),
41 $floatableContainer
: this.$element
,
42 classes
: [ 'mw-rcfilters-ui-tagItemWidget-popup' ]
46 this.popupTimeoutShow
= null;
47 this.popupTimeoutHide
= null;
49 this.$highlight
= $( '<div>' )
50 .addClass( 'mw-rcfilters-ui-tagItemWidget-highlight' );
52 // Add title attribute with the item label to 'x' button
53 this.closeButton
.setTitle( mw
.msg( 'rcfilters-tag-remove', this.model
.getLabel() ) );
56 this.invertModel
.connect( this, { update
: 'updateUiBasedOnState' } );
57 this.model
.connect( this, { update
: 'updateUiBasedOnState' } );
60 this.$overlay
.append( this.popup
.$element
);
62 .addClass( 'mw-rcfilters-ui-tagItemWidget' )
63 .prepend( this.$highlight
)
64 .attr( 'aria-haspopup', 'true' )
65 .on( 'mouseenter', this.onMouseEnter
.bind( this ) )
66 .on( 'mouseleave', this.onMouseLeave
.bind( this ) );
68 this.updateUiBasedOnState();
73 OO
.inheritClass( mw
.rcfilters
.ui
.TagItemWidget
, OO
.ui
.TagItemWidget
);
74 OO
.mixinClass( mw
.rcfilters
.ui
.TagItemWidget
, OO
.ui
.mixin
.PopupElement
);
79 * Respond to model update event
81 mw
.rcfilters
.ui
.TagItemWidget
.prototype.updateUiBasedOnState = function () {
82 this.setCurrentMuteState();
84 // Update label if needed
85 this.setLabel( $( '<div>' ).html( this.model
.getPrefixedLabel( this.invertModel
.isSelected() ) ).contents() );
87 this.setHighlightColor();
90 mw
.rcfilters
.ui
.TagItemWidget
.prototype.setHighlightColor = function () {
91 var selectedColor
= this.model
.isHighlightEnabled() ? this.model
.getHighlightColor() : null;
94 .attr( 'data-color', selectedColor
)
96 'mw-rcfilters-ui-tagItemWidget-highlight-highlighted',
102 * Set the current mute state for this item
104 mw
.rcfilters
.ui
.TagItemWidget
.prototype.setCurrentMuteState = function () {};
107 * Respond to mouse enter event
109 mw
.rcfilters
.ui
.TagItemWidget
.prototype.onMouseEnter = function () {
110 var labelText
= this.model
.getStateMessage();
113 this.popupLabel
.setLabel( labelText
);
115 // Set timeout for the popup to show
116 this.popupTimeoutShow
= setTimeout( function () {
117 this.popup
.toggle( true );
118 }.bind( this ), 500 );
120 // Cancel the hide timeout
121 clearTimeout( this.popupTimeoutHide
);
122 this.popupTimeoutHide
= null;
127 * Respond to mouse leave event
129 mw
.rcfilters
.ui
.TagItemWidget
.prototype.onMouseLeave = function () {
130 this.popupTimeoutHide
= setTimeout( function () {
131 this.popup
.toggle( false );
132 }.bind( this ), 250 );
134 // Clear the show timeout
135 clearTimeout( this.popupTimeoutShow
);
136 this.popupTimeoutShow
= null;
140 * Set selected state on this widget
142 * @param {boolean} [isSelected] Widget is selected
144 mw
.rcfilters
.ui
.TagItemWidget
.prototype.toggleSelected = function ( isSelected
) {
145 isSelected
= isSelected
!== undefined ? isSelected
: !this.selected
;
147 if ( this.selected
!== isSelected
) {
148 this.selected
= isSelected
;
150 this.$element
.toggleClass( 'mw-rcfilters-ui-tagItemWidget-selected', this.selected
);
155 * Get the selected state of this widget
157 * @return {boolean} Tag is selected
159 mw
.rcfilters
.ui
.TagItemWidget
.prototype.isSelected = function () {
160 return this.selected
;
166 * @return {string} Filter name
168 mw
.rcfilters
.ui
.TagItemWidget
.prototype.getName = function () {
169 return this.model
.getName();
175 * @return {string} Filter model
177 mw
.rcfilters
.ui
.TagItemWidget
.prototype.getModel = function () {
184 * @return {string} Filter view
186 mw
.rcfilters
.ui
.TagItemWidget
.prototype.getView = function () {
187 return this.model
.getGroupModel().getView();
191 * Remove and destroy external elements of this widget
193 mw
.rcfilters
.ui
.TagItemWidget
.prototype.destroy = function () {
195 this.popup
.$element
.detach();
198 this.model
.disconnect( this );
199 this.closeButton
.disconnect( this );
201 }( mediaWiki
, jQuery
) );