Page MenuHomeWickedGov Phorge
Files F4110875

TagItemWidget.js
No OneTemporary
Actions

Size
5 KB
Referenced Files
None
Subscribers
None

TagItemWidget.js
View Options

/**
* Extend OOUI's TagItemWidget to also display a popup on hover.
*
* @class mw.rcfilters.ui.TagItemWidget
* @ignore
* @extends OO.ui.TagItemWidget
* @mixes OO.ui.mixin.PopupElement
*
* @param {mw.rcfilters.Controller} controller
* @param {mw.rcfilters.dm.FiltersViewModel} filtersViewModel
* @param {mw.rcfilters.dm.FilterItem|null} invertModel
* @param {mw.rcfilters.dm.FilterItem} itemModel Item model
* @param {Object} config Configuration object
* @param {jQuery} [config.$overlay] A jQuery object serving as overlay for popups
*/
const TagItemWidget = function MwRcfiltersUiTagItemWidget(
controller, filtersViewModel, invertModel, itemModel, config
) {
// Configuration initialization
config = config || {};
this.controller = controller;
this.invertModel = invertModel;
this.filtersViewModel = filtersViewModel;
this.itemModel = itemModel;
this.selected = false;
TagItemWidget.super.call( this, Object.assign( {
data: this.itemModel.getName()
}, config ) );
this.$overlay = config.$overlay || this.$element;
this.popupLabel = new OO.ui.LabelWidget();
// Mixin constructors
OO.ui.mixin.PopupElement.call( this, Object.assign( {
popup: {
padded: false,
align: 'center',
position: 'above',
$content: $( '<div>' )
.addClass( 'mw-rcfilters-ui-tagItemWidget-popup-content' )
.append( this.popupLabel.$element ),
$floatableContainer: this.$element,
classes: [ 'mw-rcfilters-ui-tagItemWidget-popup' ]
}
}, config ) );
this.popupTimeoutShow = null;
this.popupTimeoutHide = null;
this.$highlight = $( '<div>' )
.addClass( 'mw-rcfilters-ui-tagItemWidget-highlight' );
// Add title attribute with the item label to 'x' button
this.closeButton.setTitle( mw.msg( 'rcfilters-tag-remove', this.itemModel.getLabel() ) );
// Events
this.filtersViewModel.connect( this, { highlightChange: 'updateUiBasedOnState' } );
if ( this.invertModel ) {
this.invertModel.connect( this, { update: 'updateUiBasedOnState' } );
}
this.itemModel.connect( this, { update: 'updateUiBasedOnState' } );
// Initialization
this.$overlay.append( this.popup.$element );
this.$element
.addClass( 'mw-rcfilters-ui-tagItemWidget' )
.prepend( this.$highlight )
.attr( 'aria-haspopup', 'true' )
.on( 'mouseenter', this.onMouseEnter.bind( this ) )
.on( 'mouseleave', this.onMouseLeave.bind( this ) );
this.updateUiBasedOnState();
};
/* Initialization */
OO.inheritClass( TagItemWidget, OO.ui.TagItemWidget );
OO.mixinClass( TagItemWidget, OO.ui.mixin.PopupElement );
/* Methods */
/**
* Respond to model update event
*/
TagItemWidget.prototype.updateUiBasedOnState = function () {
// Update label if needed
const labelMsg = this.itemModel.getLabelMessageKey( this.invertModel && this.invertModel.isSelected() );
if ( labelMsg ) {
this.setLabel(
$( '<bdi>' ).append(
// eslint-disable-next-line mediawiki/msg-doc
mw.message( labelMsg, mw.html.escape( this.itemModel.getLabel() ) ).parseDom()
)
);
} else {
this.setLabel(
$( '<bdi>' ).text(
this.itemModel.getLabel()
)
);
}
this.setCurrentMuteState();
this.setHighlightColor();
};
/**
* Set the current highlight color for this item
*/
TagItemWidget.prototype.setHighlightColor = function () {
const selectedColor = this.filtersViewModel.isHighlightEnabled() && this.itemModel.isHighlighted ?
this.itemModel.getHighlightColor() :
null;
this.$highlight
.attr( 'data-color', selectedColor )
.toggleClass(
'mw-rcfilters-ui-tagItemWidget-highlight-highlighted',
!!selectedColor
);
};
/**
* Set the current mute state for this item
*/
TagItemWidget.prototype.setCurrentMuteState = function () {};
/**
* Respond to mouse enter event
*/
TagItemWidget.prototype.onMouseEnter = function () {
const labelText = this.itemModel.getStateMessage();
if ( labelText ) {
this.popupLabel.setLabel( labelText );
// Set timeout for the popup to show
this.popupTimeoutShow = setTimeout( () => {
this.popup.toggle( true );
}, 500 );
// Cancel the hide timeout
clearTimeout( this.popupTimeoutHide );
this.popupTimeoutHide = null;
}
};
/**
* Respond to mouse leave event
*/
TagItemWidget.prototype.onMouseLeave = function () {
this.popupTimeoutHide = setTimeout( () => {
this.popup.toggle( false );
}, 250 );
// Clear the show timeout
clearTimeout( this.popupTimeoutShow );
this.popupTimeoutShow = null;
};
/**
* Set selected state on this widget
*
* @param {boolean} [isSelected] Widget is selected
*/
TagItemWidget.prototype.toggleSelected = function ( isSelected ) {
isSelected = isSelected !== undefined ? isSelected : !this.selected;
if ( this.selected !== isSelected ) {
this.selected = isSelected;
this.$element.toggleClass( 'mw-rcfilters-ui-tagItemWidget-selected', this.selected );
}
};
/**
* Get the selected state of this widget
*
* @return {boolean} Tag is selected
*/
TagItemWidget.prototype.isSelected = function () {
return this.selected;
};
/**
* Get item name
*
* @return {string} Filter name
*/
TagItemWidget.prototype.getName = function () {
return this.itemModel.getName();
};
/**
* Get item model
*
* @return {string} Filter model
*/
TagItemWidget.prototype.getModel = function () {
return this.itemModel;
};
/**
* Get item view
*
* @return {string} Filter view
*/
TagItemWidget.prototype.getView = function () {
return this.itemModel.getGroupModel().getView();
};
/**
* Remove and destroy external elements of this widget
*/
TagItemWidget.prototype.destroy = function () {
// Destroy the popup
this.popup.$element.detach();
// Disconnect events
this.itemModel.disconnect( this );
this.closeButton.disconnect( this );
};
module.exports = TagItemWidget;

File Metadata

Mime Type
text/plain
Expires
Tue, Aug 18, 22:02 (1 d, 11 h)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
b0/39/b11a1a83ef5469a61068850959b9
Default Alt Text
TagItemWidget.js (5 KB)

Event Timeline