resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagItemWidget.js

   1 ( function ( mw, $ ) {
   2         /**
   3          * Extend OOUI's FilterTagItemWidget to also display a popup on hover.
   4          *
   5          * @class
   6          * @extends OO.ui.FilterTagItemWidget
   7          * @mixins OO.ui.mixin.PopupElement
   8          *
   9          * @constructor
  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
  14          */
  15         mw.rcfilters.ui.FilterTagItemWidget = function MwRcfiltersUiFilterTagItemWidget( controller, model, config ) {
  16                 // Configuration initialization
  17                 config = config || {};
  18
  19                 this.controller = controller;
  20                 this.model = model;
  21                 this.selected = false;
  22
  23                 mw.rcfilters.ui.FilterTagItemWidget.parent.call( this, $.extend( {
  24                         data: this.model.getName(),
  25                         label: this.model.getLabel()
  26                 }, config ) );
  27
  28                 this.$overlay = config.$overlay || this.$element;
  29                 this.popupLabel = new OO.ui.LabelWidget();
  30
  31                 // Mixin constructors
  32                 OO.ui.mixin.PopupElement.call( this, $.extend( {
  33                         popup: {
  34                                 padded: false,
  35                                 align: 'center',
  36                                 position: 'above',
  37                                 $content: $( '<div>' )
  38                                         .addClass( 'mw-rcfilters-ui-filterTagItemWidget-popup-content' )
  39                                         .append( this.popupLabel.$element ),
  40                                 $floatableContainer: this.$element,
  41                                 classes: [ 'mw-rcfilters-ui-filterTagItemWidget-popup' ]
  42                         }
  43                 }, config ) );
  44
  45                 this.positioned = false;
  46                 this.popupTimeoutShow = null;
  47                 this.popupTimeoutHide = null;
  48
  49                 this.$highlight = $( '<div>' )
  50                         .addClass( 'mw-rcfilters-ui-filterTagItemWidget-highlight' );
  51
  52                 // Events
  53                 this.model.connect( this, { update: 'onModelUpdate' } );
  54
  55                 // Initialization
  56                 this.$overlay.append( this.popup.$element );
  57                 this.$element
  58                         .addClass( 'mw-rcfilters-ui-filterTagItemWidget' )
  59                         .prepend( this.$highlight )
  60                         .attr( 'aria-haspopup', 'true' )
  61                         .on( 'mouseenter', this.onMouseEnter.bind( this ) )
  62                         .on( 'mouseleave', this.onMouseLeave.bind( this ) );
  63
  64                 this.setCurrentMuteState();
  65                 this.setHighlightColor();
  66         };
  67
  68         /* Initialization */
  69
  70         OO.inheritClass( mw.rcfilters.ui.FilterTagItemWidget, OO.ui.TagItemWidget );
  71         OO.mixinClass( mw.rcfilters.ui.FilterTagItemWidget, OO.ui.mixin.PopupElement );
  72
  73         /* Methods */
  74
  75         /**
  76          * Respond to model update event
  77          */
  78         mw.rcfilters.ui.FilterTagItemWidget.prototype.onModelUpdate = function () {
  79                 this.setCurrentMuteState();
  80
  81                 this.setHighlightColor();
  82         };
  83
  84         mw.rcfilters.ui.FilterTagItemWidget.prototype.setHighlightColor = function () {
  85                 var selectedColor = this.model.isHighlightEnabled() ? this.model.getHighlightColor() : null;
  86
  87                 this.$highlight
  88                         .attr( 'data-color', selectedColor )
  89                         .toggleClass(
  90                                 'mw-rcfilters-ui-filterTagItemWidget-highlight-highlighted',
  91                                 !!selectedColor
  92                         );
  93         };
  94
  95         /**
  96          * Set the current mute state for this item
  97          */
  98         mw.rcfilters.ui.FilterTagItemWidget.prototype.setCurrentMuteState = function () {
  99                 this.setFlags( {
 100                         muted: (
 101                                 !this.model.isSelected() ||
 102                                 this.model.isIncluded() ||
 103                                 this.model.isFullyCovered()
 104                         ),
 105                         invalid: this.model.isSelected() && this.model.isConflicted()
 106                 } );
 107         };
 108
 109         /**
 110          * Respond to mouse enter event
 111          */
 112         mw.rcfilters.ui.FilterTagItemWidget.prototype.onMouseEnter = function () {
 113                 var labelText = this.model.getStateMessage();
 114
 115                 if ( labelText ) {
 116                         this.popupLabel.setLabel( labelText );
 117
 118                         if ( !this.positioned ) {
 119                                 // Recalculate anchor position to be center of the capsule item
 120                                 this.popup.$anchor.css( 'margin-left', ( this.$element.width() / 2 ) );
 121                                 this.positioned = true;
 122                         }
 123
 124                         // Set timeout for the popup to show
 125                         this.popupTimeoutShow = setTimeout( function () {
 126                                 this.popup.toggle( true );
 127                         }.bind( this ), 500 );
 128
 129                         // Cancel the hide timeout
 130                         clearTimeout( this.popupTimeoutHide );
 131                         this.popupTimeoutHide = null;
 132                 }
 133         };
 134
 135         /**
 136          * Respond to mouse leave event
 137          */
 138         mw.rcfilters.ui.FilterTagItemWidget.prototype.onMouseLeave = function () {
 139                 this.popupTimeoutHide = setTimeout( function () {
 140                         this.popup.toggle( false );
 141                 }.bind( this ), 250 );
 142
 143                 // Clear the show timeout
 144                 clearTimeout( this.popupTimeoutShow );
 145                 this.popupTimeoutShow = null;
 146         };
 147
 148         /**
 149          * Set selected state on this widget
 150          *
 151          * @param {boolean} [isSelected] Widget is selected
 152          */
 153         mw.rcfilters.ui.FilterTagItemWidget.prototype.toggleSelected = function ( isSelected ) {
 154                 isSelected = isSelected !== undefined ? isSelected : !this.selected;
 155
 156                 if ( this.selected !== isSelected ) {
 157                         this.selected = isSelected;
 158
 159                         this.$element.toggleClass( 'mw-rcfilters-ui-filterTagItemWidget-selected', this.selected );
 160                 }
 161         };
 162
 163         /**
 164          * Get the selected state of this widget
 165          *
 166          * @return {boolean} Tag is selected
 167          */
 168         mw.rcfilters.ui.FilterTagItemWidget.prototype.isSelected = function () {
 169                 return this.selected;
 170         };
 171
 172         /**
 173          * Get item name
 174          *
 175          * @return {string} Filter name
 176          */
 177         mw.rcfilters.ui.FilterTagItemWidget.prototype.getName = function () {
 178                 return this.model.getName();
 179         };
 180
 181         /**
 182          * Remove and destroy external elements of this widget
 183          */
 184         mw.rcfilters.ui.FilterTagItemWidget.prototype.destroy = function () {
 185                 // Destroy the popup
 186                 this.popup.$element.detach();
 187
 188                 // Disconnect events
 189                 this.model.disconnect( this );
 190                 this.closeButton.disconnect( this );
 191         };
 192 }( mediaWiki, jQuery ) );