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' ),
  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: true,
  38                                 align: 'center',
  39                                 $content: $popupContent
  40                                         .append( descLabelWidget.$element ),
  41                                 $floatableContainer: this.$element
  42                         }
  43                 }, config ) );
  44
  45                 // Set initial text for the popup - the description
  46                 descLabelWidget.setLabel( this.model.getDescription() );
  47
  48                 // Events
  49                 this.model.connect( this, { update: 'onModelUpdate' } );
  50
  51                 this.closeButton.connect( this, { click: 'onCapsuleRemovedByUser' } );
  52
  53                 // Initialization
  54                 this.$overlay.append( this.popup.$element );
  55                 this.$element
  56                         .attr( 'aria-haspopup', 'true' )
  57                         .addClass( 'mw-rcfilters-ui-capsuleItemWidget' )
  58                         .on( 'mouseover', this.onHover.bind( this, true ) )
  59                         .on( 'mouseout', this.onHover.bind( this, false ) );
  60
  61                 this.setCurrentMuteState();
  62         };
  63
  64         OO.inheritClass( mw.rcfilters.ui.CapsuleItemWidget, OO.ui.CapsuleItemWidget );
  65         OO.mixinClass( mw.rcfilters.ui.CapsuleItemWidget, OO.ui.mixin.PopupElement );
  66
  67         /**
  68          * Respond to model update event
  69          */
  70         mw.rcfilters.ui.CapsuleItemWidget.prototype.onModelUpdate = function () {
  71                 this.setCurrentMuteState();
  72         };
  73
  74         /**
  75          * Set the current mute state for this item
  76          */
  77         mw.rcfilters.ui.CapsuleItemWidget.prototype.setCurrentMuteState = function () {
  78                 this.$element
  79                         .toggleClass(
  80                                 'mw-rcfilters-ui-capsuleItemWidget-muted',
  81                                 this.model.isIncluded() ||
  82                                 this.model.isConflicted() ||
  83                                 this.model.isFullyCovered()
  84                         );
  85         };
  86
  87         /**
  88          * Respond to hover event on the capsule item.
  89          *
  90          * @param {boolean} isHovering Mouse is hovering on the item
  91          */
  92         mw.rcfilters.ui.CapsuleItemWidget.prototype.onHover = function ( isHovering ) {
  93                 if ( this.model.getDescription() ) {
  94                         this.popup.toggle( isHovering );
  95
  96                         if ( isHovering && !this.positioned ) {
  97                                 // Recalculate position to be center of the capsule item
  98                                 this.popup.$element.css( 'margin-left', ( this.$element.width() / 2 ) );
  99                                 this.positioned = true;
 100                         }
 101                 }
 102         };
 103
 104         /**
 105          * Respond to the user removing the capsule with the close button
 106          */
 107         mw.rcfilters.ui.CapsuleItemWidget.prototype.onCapsuleRemovedByUser = function () {
 108                 this.controller.updateFilter( this.model.getName(), false );
 109         };
 110
 111         /**
 112          * Remove and destroy external elements of this widget
 113          */
 114         mw.rcfilters.ui.CapsuleItemWidget.prototype.destroy = function () {
 115                 // Destroy the popup
 116                 this.popup.$element.detach();
 117
 118                 // Disconnect events
 119                 this.model.disconnect( this );
 120                 this.closeButton.disconnect( this );
 121         };
 122 }( mediaWiki, jQuery ) );