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

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