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