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.dm.FilterItem} model Item model
  11          * @param {Object} config Configuration object
  12          * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
  13          */
  14         mw.rcfilters.ui.CapsuleItemWidget = function MwRcfiltersUiCapsuleItemWidget( model, config ) {
  15                 var $popupContent = $( '<div>' )
  16                         .addClass( 'mw-rcfilters-ui-capsuleItemWidget-popup' ),
  17                         descLabelWidget = new OO.ui.LabelWidget();
  18
  19                 // Configuration initialization
  20                 config = config || {};
  21
  22                 this.model = model;
  23                 this.$overlay = config.$overlay || this.$element;
  24                 this.positioned = false;
  25
  26                 // Parent constructor
  27                 mw.rcfilters.ui.CapsuleItemWidget.parent.call( this, $.extend( {
  28                         data: this.model.getName(),
  29                         label: this.model.getLabel()
  30                 }, config ) );
  31
  32                 // Mixin constructors
  33                 OO.ui.mixin.PopupElement.call( this, $.extend( {
  34                         popup: {
  35                                 padded: true,
  36                                 align: 'center',
  37                                 $content: $popupContent
  38                                         .append( descLabelWidget.$element ),
  39                                 $floatableContainer: this.$element
  40                         }
  41                 }, config ) );
  42
  43                 // Set initial text for the popup - the description
  44                 descLabelWidget.setLabel( this.model.getDescription() );
  45
  46                 // Events
  47                 this.model.connect( this, { update: 'onModelUpdate' } );
  48
  49                 // Initialization
  50                 this.$overlay.append( this.popup.$element );
  51                 this.$element
  52                         .attr( 'aria-haspopup', 'true' )
  53                         .addClass( 'mw-rcfilters-ui-capsuleItemWidget' )
  54                         .on( 'mouseover', this.onHover.bind( this, true ) )
  55                         .on( 'mouseout', this.onHover.bind( this, false ) );
  56         };
  57
  58         OO.inheritClass( mw.rcfilters.ui.CapsuleItemWidget, OO.ui.CapsuleItemWidget );
  59         OO.mixinClass( mw.rcfilters.ui.CapsuleItemWidget, OO.ui.mixin.PopupElement );
  60
  61         /**
  62          * Respond to model update event
  63          */
  64         mw.rcfilters.ui.CapsuleItemWidget.prototype.onModelUpdate = function () {
  65                 // Deal with active/inactive capsule filter items
  66                 this.$element
  67                         .toggleClass(
  68                                 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-item-inactive',
  69                                 !this.model.isActive()
  70                         );
  71         };
  72
  73         /**
  74          * Respond to hover event on the capsule item.
  75          *
  76          * @param {boolean} isHovering Mouse is hovering on the item
  77          */
  78         mw.rcfilters.ui.CapsuleItemWidget.prototype.onHover = function ( isHovering ) {
  79                 if ( this.model.getDescription() ) {
  80                         this.popup.toggle( isHovering );
  81
  82                         if ( isHovering && !this.positioned ) {
  83                                 // Recalculate position to be center of the capsule item
  84                                 this.popup.$element.css( 'margin-left', ( this.$element.width() / 2 ) );
  85                                 this.positioned = true;
  86                         }
  87                 }
  88         };
  89 }( mediaWiki, jQuery ) );