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

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