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} 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.TagItemWidget = function MwRcfiltersUiTagItemWidget( controller, model, config ) {
16 // Configuration initialization
17 config = config || {};
19 this.controller = controller;
21 this.selected = false;
23 mw.rcfilters.ui.TagItemWidget.parent.call( this, $.extend( {
24 data: this.model.getName(),
25 label: $( '<div>' ).html( this.model.getPrefixedLabel() ).contents()
28 this.$overlay = config.$overlay || this.$element;
29 this.popupLabel = new OO.ui.LabelWidget();
32 OO.ui.mixin.PopupElement.call( this, $.extend( {
37 $content: $( '<div>' )
38 .addClass( 'mw-rcfilters-ui-tagItemWidget-popup-content' )
39 .append( this.popupLabel.$element ),
40 $floatableContainer: this.$element,
41 classes: [ 'mw-rcfilters-ui-tagItemWidget-popup' ]
45 this.popupTimeoutShow = null;
46 this.popupTimeoutHide = null;
48 this.$highlight = $( '<div>' )
49 .addClass( 'mw-rcfilters-ui-tagItemWidget-highlight' );
51 // Add title attribute with the item label to 'x' button
52 this.closeButton.setTitle( mw.msg( 'rcfilters-tag-remove', this.model.getLabel() ) );
55 this.model.connect( this, { update: 'onModelUpdate' } );
58 this.$overlay.append( this.popup.$element );
60 .addClass( 'mw-rcfilters-ui-tagItemWidget' )
61 .prepend( this.$highlight )
62 .attr( 'aria-haspopup', 'true' )
63 .on( 'mouseenter', this.onMouseEnter.bind( this ) )
64 .on( 'mouseleave', this.onMouseLeave.bind( this ) );
66 this.setCurrentMuteState();
67 this.setHighlightColor();
72 OO.inheritClass( mw.rcfilters.ui.TagItemWidget, OO.ui.TagItemWidget );
73 OO.mixinClass( mw.rcfilters.ui.TagItemWidget, OO.ui.mixin.PopupElement );
78 * Respond to model update event
80 mw.rcfilters.ui.TagItemWidget.prototype.onModelUpdate = function () {
81 this.setCurrentMuteState();
83 // Update label if needed
84 this.setLabel( $( '<div>' ).html( this.model.getPrefixedLabel() ).contents() );
86 this.setHighlightColor();
89 mw.rcfilters.ui.TagItemWidget.prototype.setHighlightColor = function () {
90 var selectedColor = this.model.isHighlightEnabled() ? this.model.getHighlightColor() : null;
93 .attr( 'data-color', selectedColor )
95 'mw-rcfilters-ui-tagItemWidget-highlight-highlighted',
101 * Set the current mute state for this item
103 mw.rcfilters.ui.TagItemWidget.prototype.setCurrentMuteState = function () {};
106 * Respond to mouse enter event
108 mw.rcfilters.ui.TagItemWidget.prototype.onMouseEnter = function () {
109 var labelText = this.model.getStateMessage();
112 this.popupLabel.setLabel( labelText );
114 // Set timeout for the popup to show
115 this.popupTimeoutShow = setTimeout( function () {
116 this.popup.toggle( true );
117 }.bind( this ), 500 );
119 // Cancel the hide timeout
120 clearTimeout( this.popupTimeoutHide );
121 this.popupTimeoutHide = null;
126 * Respond to mouse leave event
128 mw.rcfilters.ui.TagItemWidget.prototype.onMouseLeave = function () {
129 this.popupTimeoutHide = setTimeout( function () {
130 this.popup.toggle( false );
131 }.bind( this ), 250 );
133 // Clear the show timeout
134 clearTimeout( this.popupTimeoutShow );
135 this.popupTimeoutShow = null;
139 * Set selected state on this widget
141 * @param {boolean} [isSelected] Widget is selected
143 mw.rcfilters.ui.TagItemWidget.prototype.toggleSelected = function ( isSelected ) {
144 isSelected = isSelected !== undefined ? isSelected : !this.selected;
146 if ( this.selected !== isSelected ) {
147 this.selected = isSelected;
149 this.$element.toggleClass( 'mw-rcfilters-ui-tagItemWidget-selected', this.selected );
154 * Get the selected state of this widget
156 * @return {boolean} Tag is selected
158 mw.rcfilters.ui.TagItemWidget.prototype.isSelected = function () {
159 return this.selected;
165 * @return {string} Filter name
167 mw.rcfilters.ui.TagItemWidget.prototype.getName = function () {
168 return this.model.getName();
174 * @return {string} Filter model
176 mw.rcfilters.ui.TagItemWidget.prototype.getModel = function () {
183 * @return {string} Filter view
185 mw.rcfilters.ui.TagItemWidget.prototype.getView = function () {
186 return this.model.getGroupModel().getView();
190 * Remove and destroy external elements of this widget
192 mw.rcfilters.ui.TagItemWidget.prototype.destroy = function () {
194 this.popup.$element.detach();
197 this.model.disconnect( this );
198 this.closeButton.disconnect( this );
200 }( mediaWiki, jQuery ) );