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

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