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

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