7e324b69461a607a188ff8879aaf6f292fb17c94
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.FiltersViewModel} filtersViewModel
12 * @param {mw.rcfilters.dm.FilterItem} invertModel
13 * @param {mw.rcfilters.dm.FilterItem} itemModel Item model
14 * @param {Object} config Configuration object
15 * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
17 mw
.rcfilters
.ui
.TagItemWidget
= function MwRcfiltersUiTagItemWidget(
18 controller
, filtersViewModel
, invertModel
, itemModel
, config
20 // Configuration initialization
21 config
= config
|| {};
23 this.controller
= controller
;
24 this.invertModel
= invertModel
;
25 this.filtersViewModel
= filtersViewModel
;
26 this.itemModel
= itemModel
;
27 this.selected
= false;
29 mw
.rcfilters
.ui
.TagItemWidget
.parent
.call( this, $.extend( {
30 data
: this.itemModel
.getName()
33 this.$overlay
= config
.$overlay
|| this.$element
;
34 this.popupLabel
= new OO
.ui
.LabelWidget();
37 OO
.ui
.mixin
.PopupElement
.call( this, $.extend( {
42 $content
: $( '<div>' )
43 .addClass( 'mw-rcfilters-ui-tagItemWidget-popup-content' )
44 .append( this.popupLabel
.$element
),
45 $floatableContainer
: this.$element
,
46 classes
: [ 'mw-rcfilters-ui-tagItemWidget-popup' ]
50 this.popupTimeoutShow
= null;
51 this.popupTimeoutHide
= null;
53 this.$highlight
= $( '<div>' )
54 .addClass( 'mw-rcfilters-ui-tagItemWidget-highlight' );
56 // Add title attribute with the item label to 'x' button
57 this.closeButton
.setTitle( mw
.msg( 'rcfilters-tag-remove', this.itemModel
.getLabel() ) );
60 this.filtersViewModel
.connect( this, { highlightChange
: 'updateUiBasedOnState' } );
61 this.invertModel
.connect( this, { update
: 'updateUiBasedOnState' } );
62 this.itemModel
.connect( this, { update
: 'updateUiBasedOnState' } );
65 this.$overlay
.append( this.popup
.$element
);
67 .addClass( 'mw-rcfilters-ui-tagItemWidget' )
68 .prepend( this.$highlight
)
69 .attr( 'aria-haspopup', 'true' )
70 .on( 'mouseenter', this.onMouseEnter
.bind( this ) )
71 .on( 'mouseleave', this.onMouseLeave
.bind( this ) );
73 this.updateUiBasedOnState();
78 OO
.inheritClass( mw
.rcfilters
.ui
.TagItemWidget
, OO
.ui
.TagItemWidget
);
79 OO
.mixinClass( mw
.rcfilters
.ui
.TagItemWidget
, OO
.ui
.mixin
.PopupElement
);
84 * Respond to model update event
86 mw
.rcfilters
.ui
.TagItemWidget
.prototype.updateUiBasedOnState = function () {
87 this.setCurrentMuteState();
89 // Update label if needed
90 this.setLabel( $( '<div>' ).html( this.itemModel
.getPrefixedLabel( this.invertModel
.isSelected() ) ).contents() );
92 this.setHighlightColor();
96 * Set the current highlight color for this item
98 mw
.rcfilters
.ui
.TagItemWidget
.prototype.setHighlightColor = function () {
99 var selectedColor
= this.filtersViewModel
.isHighlightEnabled() && this.itemModel
.isHighlighted
?
100 this.itemModel
.getHighlightColor() :
104 .attr( 'data-color', selectedColor
)
106 'mw-rcfilters-ui-tagItemWidget-highlight-highlighted',
112 * Set the current mute state for this item
114 mw
.rcfilters
.ui
.TagItemWidget
.prototype.setCurrentMuteState = function () {};
117 * Respond to mouse enter event
119 mw
.rcfilters
.ui
.TagItemWidget
.prototype.onMouseEnter = function () {
120 var labelText
= this.itemModel
.getStateMessage();
123 this.popupLabel
.setLabel( labelText
);
125 // Set timeout for the popup to show
126 this.popupTimeoutShow
= setTimeout( function () {
127 this.popup
.toggle( true );
128 }.bind( this ), 500 );
130 // Cancel the hide timeout
131 clearTimeout( this.popupTimeoutHide
);
132 this.popupTimeoutHide
= null;
137 * Respond to mouse leave event
139 mw
.rcfilters
.ui
.TagItemWidget
.prototype.onMouseLeave = function () {
140 this.popupTimeoutHide
= setTimeout( function () {
141 this.popup
.toggle( false );
142 }.bind( this ), 250 );
144 // Clear the show timeout
145 clearTimeout( this.popupTimeoutShow
);
146 this.popupTimeoutShow
= null;
150 * Set selected state on this widget
152 * @param {boolean} [isSelected] Widget is selected
154 mw
.rcfilters
.ui
.TagItemWidget
.prototype.toggleSelected = function ( isSelected
) {
155 isSelected
= isSelected
!== undefined ? isSelected
: !this.selected
;
157 if ( this.selected
!== isSelected
) {
158 this.selected
= isSelected
;
160 this.$element
.toggleClass( 'mw-rcfilters-ui-tagItemWidget-selected', this.selected
);
165 * Get the selected state of this widget
167 * @return {boolean} Tag is selected
169 mw
.rcfilters
.ui
.TagItemWidget
.prototype.isSelected = function () {
170 return this.selected
;
176 * @return {string} Filter name
178 mw
.rcfilters
.ui
.TagItemWidget
.prototype.getName = function () {
179 return this.itemModel
.getName();
185 * @return {string} Filter model
187 mw
.rcfilters
.ui
.TagItemWidget
.prototype.getModel = function () {
188 return this.itemModel
;
194 * @return {string} Filter view
196 mw
.rcfilters
.ui
.TagItemWidget
.prototype.getView = function () {
197 return this.itemModel
.getGroupModel().getView();
201 * Remove and destroy external elements of this widget
203 mw
.rcfilters
.ui
.TagItemWidget
.prototype.destroy = function () {
205 this.popup
.$element
.detach();
208 this.itemModel
.disconnect( this );
209 this.closeButton
.disconnect( this );
211 }( mediaWiki
, jQuery
) );