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
  28                 // Parent constructor
  29                 mw.rcfilters.ui.CapsuleItemWidget.parent.call( this, $.extend( {
  30                         data: this.model.getName(),
  31                         label: this.model.getLabel()
  32                 }, config ) );
  33
  34                 // Mixin constructors
  35                 OO.ui.mixin.PopupElement.call( this, $.extend( {
  36                         popup: {
  37                                 padded: false,
  38                                 align: 'center',
  39                                 $content: $popupContent
  40                                         .append( descLabelWidget.$element ),
  41                                 $floatableContainer: this.$element,
  42                                 classes: [ 'mw-rcfilters-ui-capsuleItemWidget-popup' ]
  43                         }
  44                 }, config ) );
  45
  46                 // Set initial text for the popup - the description
  47                 descLabelWidget.setLabel( this.model.getDescription() );
  48
  49                 this.$highlight = $( '<div>' )
  50                         .addClass( 'mw-rcfilters-ui-capsuleItemWidget-highlight' );
  51
  52                 // Events
  53                 this.model.connect( this, { update: 'onModelUpdate' } );
  54
  55                 this.closeButton.$element.on( 'mousedown', this.onCloseButtonMouseDown.bind( this ) );
  56
  57                 // Initialization
  58                 this.$overlay.append( this.popup.$element );
  59                 this.$element
  60                         .prepend( this.$highlight )
  61                         .attr( 'aria-haspopup', 'true' )
  62                         .addClass( 'mw-rcfilters-ui-capsuleItemWidget' )
  63                         .on( 'mouseover', this.onHover.bind( this, true ) )
  64                         .on( 'mouseout', this.onHover.bind( this, false ) );
  65
  66                 this.setCurrentMuteState();
  67                 this.setHighlightColor();
  68         };
  69
  70         OO.inheritClass( mw.rcfilters.ui.CapsuleItemWidget, OO.ui.CapsuleItemWidget );
  71         OO.mixinClass( mw.rcfilters.ui.CapsuleItemWidget, OO.ui.mixin.PopupElement );
  72
  73         /**
  74          * Respond to model update event
  75          */
  76         mw.rcfilters.ui.CapsuleItemWidget.prototype.onModelUpdate = function () {
  77                 this.setCurrentMuteState();
  78
  79                 this.setHighlightColor();
  80         };
  81
  82         /**
  83          * Override mousedown event to prevent its propagation to the parent,
  84          * since the parent (the multiselect widget) focuses the popup when its
  85          * mousedown event is fired.
  86          *
  87          * @param {jQuery.Event} e Event
  88          */
  89         mw.rcfilters.ui.CapsuleItemWidget.prototype.onCloseButtonMouseDown = function ( e ) {
  90                 e.stopPropagation();
  91         };
  92
  93         /**
  94          * Emit a click event when the capsule is clicked so we can aggregate this
  95          * in the parent (the capsule)
  96          */
  97         mw.rcfilters.ui.CapsuleItemWidget.prototype.onClick = function () {
  98                 this.emit( 'click' );
  99         };
 100
 101         /**
 102          * Override the event listening to the item close button click
 103          */
 104         mw.rcfilters.ui.CapsuleItemWidget.prototype.onCloseClick = function () {
 105                 var element = this.getElementGroup();
 106
 107                 if ( element && $.isFunction( element.removeItems ) ) {
 108                         element.removeItems( [ this ] );
 109                 }
 110
 111                 // Respond to user removing the filter
 112                 this.controller.updateFilter( this.model.getName(), false );
 113                 this.controller.clearHighlightColor( this.model.getName() );
 114         };
 115
 116         mw.rcfilters.ui.CapsuleItemWidget.prototype.setHighlightColor = function () {
 117                 var selectedColor = this.model.isHighlightEnabled() ? this.model.getHighlightColor() : null;
 118
 119                 this.$highlight
 120                         .attr( 'data-color', selectedColor )
 121                         .toggleClass(
 122                                 'mw-rcfilters-ui-capsuleItemWidget-highlight-highlighted',
 123                                 !!selectedColor
 124                         );
 125         };
 126
 127         /**
 128          * Set the current mute state for this item
 129          */
 130         mw.rcfilters.ui.CapsuleItemWidget.prototype.setCurrentMuteState = function () {
 131                 this.$element
 132                         .toggleClass(
 133                                 'mw-rcfilters-ui-capsuleItemWidget-muted',
 134                                 !this.model.isSelected() ||
 135                                 this.model.isIncluded() ||
 136                                 this.model.isConflicted() ||
 137                                 this.model.isFullyCovered()
 138                         );
 139         };
 140
 141         /**
 142          * Respond to hover event on the capsule item.
 143          *
 144          * @param {boolean} isHovering Mouse is hovering on the item
 145          */
 146         mw.rcfilters.ui.CapsuleItemWidget.prototype.onHover = function ( isHovering ) {
 147                 if ( this.model.getDescription() ) {
 148                         this.popup.toggle( isHovering );
 149
 150                         if ( isHovering && !this.positioned ) {
 151                                 // Recalculate position to be center of the capsule item
 152                                 this.popup.$element.css( 'margin-left', ( this.$element.width() / 2 ) );
 153                                 this.positioned = true;
 154                         }
 155                 }
 156         };
 157
 158         /**
 159          * Remove and destroy external elements of this widget
 160          */
 161         mw.rcfilters.ui.CapsuleItemWidget.prototype.destroy = function () {
 162                 // Destroy the popup
 163                 this.popup.$element.detach();
 164
 165                 // Disconnect events
 166                 this.model.disconnect( this );
 167                 this.closeButton.disconnect( this );
 168         };
 169 }( mediaWiki, jQuery ) );