985e2c5002ebd6af0ea91417cdb72ba242d83192
2 * Extend OOUI's TagItemWidget to also display a popup on hover.
4 * @class mw.rcfilters.ui.TagItemWidget
5 * @extends OO.ui.TagItemWidget
6 * @mixins OO.ui.mixin.PopupElement
9 * @param {mw.rcfilters.Controller} controller
10 * @param {mw.rcfilters.dm.FiltersViewModel} filtersViewModel
11 * @param {mw.rcfilters.dm.FilterItem} invertModel
12 * @param {mw.rcfilters.dm.FilterItem} itemModel Item model
13 * @param {Object} config Configuration object
14 * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
16 var TagItemWidget
= function MwRcfiltersUiTagItemWidget(
17 controller
, filtersViewModel
, invertModel
, itemModel
, config
19 // Configuration initialization
20 config
= config
|| {};
22 this.controller
= controller
;
23 this.invertModel
= invertModel
;
24 this.filtersViewModel
= filtersViewModel
;
25 this.itemModel
= itemModel
;
26 this.selected
= false;
28 TagItemWidget
.parent
.call( this, $.extend( {
29 data
: this.itemModel
.getName()
32 this.$overlay
= config
.$overlay
|| this.$element
;
33 this.popupLabel
= new OO
.ui
.LabelWidget();
36 OO
.ui
.mixin
.PopupElement
.call( this, $.extend( {
41 $content
: $( '<div>' )
42 .addClass( 'mw-rcfilters-ui-tagItemWidget-popup-content' )
43 .append( this.popupLabel
.$element
),
44 $floatableContainer
: this.$element
,
45 classes
: [ 'mw-rcfilters-ui-tagItemWidget-popup' ]
49 this.popupTimeoutShow
= null;
50 this.popupTimeoutHide
= null;
52 this.$highlight
= $( '<div>' )
53 .addClass( 'mw-rcfilters-ui-tagItemWidget-highlight' );
55 // Add title attribute with the item label to 'x' button
56 this.closeButton
.setTitle( mw
.msg( 'rcfilters-tag-remove', this.itemModel
.getLabel() ) );
59 this.filtersViewModel
.connect( this, { highlightChange
: 'updateUiBasedOnState' } );
60 this.invertModel
.connect( this, { update
: 'updateUiBasedOnState' } );
61 this.itemModel
.connect( this, { update
: 'updateUiBasedOnState' } );
64 this.$overlay
.append( this.popup
.$element
);
66 .addClass( 'mw-rcfilters-ui-tagItemWidget' )
67 .prepend( this.$highlight
)
68 .attr( 'aria-haspopup', 'true' )
69 .on( 'mouseenter', this.onMouseEnter
.bind( this ) )
70 .on( 'mouseleave', this.onMouseLeave
.bind( this ) );
72 this.updateUiBasedOnState();
77 OO
.inheritClass( TagItemWidget
, OO
.ui
.TagItemWidget
);
78 OO
.mixinClass( TagItemWidget
, OO
.ui
.mixin
.PopupElement
);
83 * Respond to model update event
85 TagItemWidget
.prototype.updateUiBasedOnState = function () {
86 // Update label if needed
87 var labelMsg
= this.itemModel
.getLabelMessageKey( this.invertModel
.isSelected() );
89 this.setLabel( $( '<div>' ).append(
91 mw
.message( labelMsg
, mw
.html
.escape( this.itemModel
.getLabel() ) ).parse()
97 this.itemModel
.getLabel()
102 this.setCurrentMuteState();
103 this.setHighlightColor();
107 * Set the current highlight color for this item
109 TagItemWidget
.prototype.setHighlightColor = function () {
110 var selectedColor
= this.filtersViewModel
.isHighlightEnabled() && this.itemModel
.isHighlighted
?
111 this.itemModel
.getHighlightColor() :
115 .attr( 'data-color', selectedColor
)
117 'mw-rcfilters-ui-tagItemWidget-highlight-highlighted',
123 * Set the current mute state for this item
125 TagItemWidget
.prototype.setCurrentMuteState = function () {};
128 * Respond to mouse enter event
130 TagItemWidget
.prototype.onMouseEnter = function () {
131 var labelText
= this.itemModel
.getStateMessage();
134 this.popupLabel
.setLabel( labelText
);
136 // Set timeout for the popup to show
137 this.popupTimeoutShow
= setTimeout( function () {
138 this.popup
.toggle( true );
139 }.bind( this ), 500 );
141 // Cancel the hide timeout
142 clearTimeout( this.popupTimeoutHide
);
143 this.popupTimeoutHide
= null;
148 * Respond to mouse leave event
150 TagItemWidget
.prototype.onMouseLeave = function () {
151 this.popupTimeoutHide
= setTimeout( function () {
152 this.popup
.toggle( false );
153 }.bind( this ), 250 );
155 // Clear the show timeout
156 clearTimeout( this.popupTimeoutShow
);
157 this.popupTimeoutShow
= null;
161 * Set selected state on this widget
163 * @param {boolean} [isSelected] Widget is selected
165 TagItemWidget
.prototype.toggleSelected = function ( isSelected
) {
166 isSelected
= isSelected
!== undefined ? isSelected
: !this.selected
;
168 if ( this.selected
!== isSelected
) {
169 this.selected
= isSelected
;
171 this.$element
.toggleClass( 'mw-rcfilters-ui-tagItemWidget-selected', this.selected
);
176 * Get the selected state of this widget
178 * @return {boolean} Tag is selected
180 TagItemWidget
.prototype.isSelected = function () {
181 return this.selected
;
187 * @return {string} Filter name
189 TagItemWidget
.prototype.getName = function () {
190 return this.itemModel
.getName();
196 * @return {string} Filter model
198 TagItemWidget
.prototype.getModel = function () {
199 return this.itemModel
;
205 * @return {string} Filter view
207 TagItemWidget
.prototype.getView = function () {
208 return this.itemModel
.getGroupModel().getView();
212 * Remove and destroy external elements of this widget
214 TagItemWidget
.prototype.destroy = function () {
216 this.popup
.$element
.detach();
219 this.itemModel
.disconnect( this );
220 this.closeButton
.disconnect( this );
223 module
.exports
= TagItemWidget
;