X-Git-Url: https://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.rcfilters%2Fui%2Fmw.rcfilters.ui.FilterTagItemWidget.js;h=8a36eb419284a7a621814b6e5097268a20e0b478;hb=a8dcb178c7e347ef56bef1e36bb4a26a61a1d82b;hp=f79e013228050537db07d32f00e4164a2f549f5f;hpb=4067f91ad5fab793caba0b602c218384ec8a481a;p=lhc%2Fweb%2Fwiklou.git
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagItemWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagItemWidget.js
index f79e013228..8a36eb4192 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagItemWidget.js
@@ -1,194 +1,41 @@
-( function ( mw, $ ) {
+( function ( mw ) {
/**
* Extend OOUI's FilterTagItemWidget to also display a popup on hover.
*
* @class
- * @extends OO.ui.FilterTagItemWidget
- * @mixins OO.ui.mixin.PopupElement
+ * @extends mw.rcfilters.ui.TagItemWidget
*
* @constructor
* @param {mw.rcfilters.Controller} controller
* @param {mw.rcfilters.dm.FilterItem} model Item model
* @param {Object} config Configuration object
- * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
*/
mw.rcfilters.ui.FilterTagItemWidget = function MwRcfiltersUiFilterTagItemWidget( controller, model, config ) {
- // Configuration initialization
config = config || {};
- this.controller = controller;
- this.model = model;
- this.selected = false;
+ mw.rcfilters.ui.FilterTagItemWidget.parent.call( this, controller, model, config );
- mw.rcfilters.ui.FilterTagItemWidget.parent.call( this, $.extend( {
- data: this.model.getName(),
- label: this.model.getLabel()
- }, config ) );
-
- this.$overlay = config.$overlay || this.$element;
- this.popupLabel = new OO.ui.LabelWidget();
-
- // Mixin constructors
- OO.ui.mixin.PopupElement.call( this, $.extend( {
- popup: {
- padded: false,
- align: 'center',
- position: 'above',
- $content: $( '
' )
- .addClass( 'mw-rcfilters-ui-filterTagItemWidget-popup-content' )
- .append( this.popupLabel.$element ),
- $floatableContainer: this.$element,
- classes: [ 'mw-rcfilters-ui-filterTagItemWidget-popup' ]
- }
- }, config ) );
-
- this.positioned = false;
- this.popupTimeoutShow = null;
- this.popupTimeoutHide = null;
-
- this.$highlight = $( '
' )
- .addClass( 'mw-rcfilters-ui-filterTagItemWidget-highlight' );
-
- // Events
- this.model.connect( this, { update: 'onModelUpdate' } );
-
- // Initialization
- this.$overlay.append( this.popup.$element );
this.$element
- .prepend( this.$highlight )
- .attr( 'aria-haspopup', 'true' )
- .on( 'mouseenter', this.onMouseEnter.bind( this ) )
- .on( 'mouseleave', this.onMouseLeave.bind( this ) );
-
- this.setCurrentMuteState();
- this.setHighlightColor();
+ .addClass( 'mw-rcfilters-ui-filterTagItemWidget' );
};
/* Initialization */
- OO.inheritClass( mw.rcfilters.ui.FilterTagItemWidget, OO.ui.TagItemWidget );
- OO.mixinClass( mw.rcfilters.ui.FilterTagItemWidget, OO.ui.mixin.PopupElement );
+ OO.inheritClass( mw.rcfilters.ui.FilterTagItemWidget, mw.rcfilters.ui.TagItemWidget );
/* Methods */
/**
- * Respond to model update event
- */
- mw.rcfilters.ui.FilterTagItemWidget.prototype.onModelUpdate = function () {
- this.setCurrentMuteState();
-
- this.setHighlightColor();
- };
-
- mw.rcfilters.ui.FilterTagItemWidget.prototype.setHighlightColor = function () {
- var selectedColor = this.model.isHighlightEnabled() ? this.model.getHighlightColor() : null;
-
- this.$highlight
- .attr( 'data-color', selectedColor )
- .toggleClass(
- 'mw-rcfilters-ui-filterTagItemWidget-highlight-highlighted',
- !!selectedColor
- );
- };
-
- /**
- * Set the current mute state for this item
+ * @inheritdoc
*/
mw.rcfilters.ui.FilterTagItemWidget.prototype.setCurrentMuteState = function () {
- this.$element
- .toggleClass(
- 'mw-rcfilters-ui-filterTagItemWidget-muted',
+ this.setFlags( {
+ muted: (
!this.model.isSelected() ||
this.model.isIncluded() ||
this.model.isFullyCovered()
- )
- .toggleClass(
- 'mw-rcfilters-ui-filterTagItemWidget-conflicted',
- this.model.isSelected() && this.model.isConflicted()
- );
- };
-
- /**
- * Respond to mouse enter event
- */
- mw.rcfilters.ui.FilterTagItemWidget.prototype.onMouseEnter = function () {
- var labelText = this.model.getStateMessage();
-
- if ( labelText ) {
- this.popupLabel.setLabel( labelText );
-
- if ( !this.positioned ) {
- // Recalculate anchor position to be center of the capsule item
- this.popup.$anchor.css( 'margin-left', ( this.$element.width() / 2 ) );
- this.positioned = true;
- }
-
- // Set timeout for the popup to show
- this.popupTimeoutShow = setTimeout( function () {
- this.popup.toggle( true );
- }.bind( this ), 500 );
-
- // Cancel the hide timeout
- clearTimeout( this.popupTimeoutHide );
- this.popupTimeoutHide = null;
- }
- };
-
- /**
- * Respond to mouse leave event
- */
- mw.rcfilters.ui.FilterTagItemWidget.prototype.onMouseLeave = function () {
- this.popupTimeoutHide = setTimeout( function () {
- this.popup.toggle( false );
- }.bind( this ), 250 );
-
- // Clear the show timeout
- clearTimeout( this.popupTimeoutShow );
- this.popupTimeoutShow = null;
- };
-
- /**
- * Set selected state on this widget
- *
- * @param {boolean} [isSelected] Widget is selected
- */
- mw.rcfilters.ui.FilterTagItemWidget.prototype.toggleSelected = function ( isSelected ) {
- isSelected = isSelected !== undefined ? isSelected : !this.selected;
-
- if ( this.selected !== isSelected ) {
- this.selected = isSelected;
-
- this.$element.toggleClass( 'mw-rcfilters-ui-filterTagItemWidget-selected', this.selected );
- }
- };
-
- /**
- * Get the selected state of this widget
- *
- * @return {boolean} Tag is selected
- */
- mw.rcfilters.ui.FilterTagItemWidget.prototype.isSelected = function () {
- return this.selected;
- };
-
- /**
- * Get item name
- *
- * @return {string} Filter name
- */
- mw.rcfilters.ui.FilterTagItemWidget.prototype.getName = function () {
- return this.model.getName();
- };
-
- /**
- * Remove and destroy external elements of this widget
- */
- mw.rcfilters.ui.FilterTagItemWidget.prototype.destroy = function () {
- // Destroy the popup
- this.popup.$element.detach();
-
- // Disconnect events
- this.model.disconnect( this );
- this.closeButton.disconnect( this );
+ ),
+ invalid: this.model.isSelected() && this.model.isConflicted()
+ } );
};
}( mediaWiki, jQuery ) );