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