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

   1 ( function ( mw ) {
   2         /**
   3          * List displaying all filter groups
   4          *
   5          * @extends OO.ui.Widget
   6          * @mixins OO.ui.mixin.PendingElement
   7          *
   8          * @constructor
   9          * @param {mw.rcfilters.Controller} controller Controller
  10          * @param {mw.rcfilters.dm.FiltersViewModel} model View model
  11          * @param {Object} [config] Configuration object
  12          * @cfg {Object} [filters] A definition of the filter groups in this list
  13          * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
  14          */
  15         mw.rcfilters.ui.FilterWrapperWidget = function MwRcfiltersUiFilterWrapperWidget( controller, model, config ) {
  16                 var $footer = $( '<div>' );
  17                 config = config || {};
  18
  19                 // Parent
  20                 mw.rcfilters.ui.FilterWrapperWidget.parent.call( this, config );
  21                 // Mixin constructors
  22                 OO.ui.mixin.PendingElement.call( this, config );
  23
  24                 this.controller = controller;
  25                 this.model = model;
  26                 this.$overlay = config.$overlay || this.$element;
  27
  28                 this.filterPopup = new mw.rcfilters.ui.FiltersListWidget(
  29                         this.controller,
  30                         this.model,
  31                         {
  32                                 label: mw.msg( 'rcfilters-filterlist-title' ),
  33                                 $overlay: this.$overlay
  34                         }
  35                 );
  36
  37                 $footer.append(
  38                         new OO.ui.ButtonWidget( {
  39                                 framed: false,
  40                                 icon: 'feedback',
  41                                 flags: [ 'progressive' ],
  42                                 label: mw.msg( 'rcfilters-filterlist-feedbacklink' ),
  43                                 href: 'https://www.mediawiki.org/wiki/Help_talk:New_filters_for_edit_review'
  44                         } ).$element
  45                 );
  46
  47                 this.textInput = new OO.ui.TextInputWidget( {
  48                         classes: [ 'mw-rcfilters-ui-filterWrapperWidget-search' ],
  49                         icon: 'search',
  50                         placeholder: mw.msg( 'rcfilters-search-placeholder' )
  51                 } );
  52
  53                 this.capsule = new mw.rcfilters.ui.FilterCapsuleMultiselectWidget( controller, this.model, this.textInput, {
  54                         $overlay: this.$overlay,
  55                         popup: {
  56                                 $content: this.filterPopup.$element,
  57                                 $footer: $footer,
  58                                 classes: [ 'mw-rcfilters-ui-filterWrapperWidget-popup' ],
  59                                 width: 650,
  60                                 hideWhenOutOfView: false
  61                         }
  62                 } );
  63
  64                 // Events
  65                 this.model.connect( this, {
  66                         initialize: 'onModelInitialize',
  67                         itemUpdate: 'onModelItemUpdate'
  68                 } );
  69                 this.textInput.connect( this, {
  70                         change: 'onTextInputChange',
  71                         enter: 'onTextInputEnter'
  72                 } );
  73                 this.capsule.connect( this, { capsuleItemClick: 'onCapsuleItemClick' } );
  74                 this.capsule.popup.connect( this, {
  75                         toggle: 'onCapsulePopupToggle',
  76                         ready: 'onCapsulePopupReady'
  77                 } );
  78
  79                 // Initialize
  80                 this.$element
  81                         .addClass( 'mw-rcfilters-ui-filterWrapperWidget' )
  82                         .append( this.capsule.$element, this.textInput.$element );
  83         };
  84
  85         /* Initialization */
  86
  87         OO.inheritClass( mw.rcfilters.ui.FilterWrapperWidget, OO.ui.Widget );
  88         OO.mixinClass( mw.rcfilters.ui.FilterWrapperWidget, OO.ui.mixin.PendingElement );
  89
  90         /**
  91          * Respond to capsule item click and make the popup scroll down to the requested item
  92          *
  93          * @param {mw.rcfilters.ui.CapsuleItemWidget} item Clicked item
  94          */
  95         mw.rcfilters.ui.FilterWrapperWidget.prototype.onCapsuleItemClick = function ( item ) {
  96                 var filterName = item.getData(),
  97                         // Find the item in the popup
  98                         filterWidget = this.filterPopup.getItemWidget( filterName );
  99
 100                 // Highlight item
 101                 this.filterPopup.select( filterName );
 102                 this.capsule.select( item );
 103
 104                 this.capsule.popup.toggle( true );
 105                 this.scrollToTop( filterWidget.$element );
 106         };
 107
 108         /**
 109          * Respond to capsule popup ready event, fired after the popup is visible, positioned and clipped
 110          */
 111         mw.rcfilters.ui.FilterWrapperWidget.prototype.onCapsulePopupReady = function () {
 112                 mw.hook( 'RcFilters.popup.open' ).fire( this.filterPopup.getSelectedFilter() );
 113
 114                 this.scrollToTop( this.capsule.$element, 10 );
 115                 if ( !this.filterPopup.getSelectedFilter() ) {
 116                         // No selection, scroll the popup list to top
 117                         setTimeout( function () { this.capsule.popup.$body.scrollTop( 0 ); }.bind( this ), 0 );
 118                 }
 119         };
 120
 121         /**
 122          * Respond to popup toggle event. Reset selection in the list when the popup is closed.
 123          *
 124          * @param {boolean} isVisible Popup is visible
 125          */
 126         mw.rcfilters.ui.FilterWrapperWidget.prototype.onCapsulePopupToggle = function ( isVisible ) {
 127                 if ( !isVisible && !this.textInput.getValue() ) {
 128                         // Only reset selection if we are not filtering
 129                         this.filterPopup.resetSelection();
 130                         this.capsule.resetSelection();
 131                 }
 132         };
 133
 134         /**
 135          * Respond to text input change
 136          *
 137          * @param {string} newValue Current value
 138          */
 139         mw.rcfilters.ui.FilterWrapperWidget.prototype.onTextInputChange = function ( newValue ) {
 140                 // Filter the results
 141                 this.filterPopup.filter( this.model.findMatches( newValue ) );
 142
 143                 if ( !newValue ) {
 144                         // If the value is empty, we didn't actually
 145                         // filter anything. the filter method will run
 146                         // and show all, but then will select the
 147                         // top item - but in this case, no selection
 148                         // should be made.
 149                         this.filterPopup.resetSelection();
 150                 }
 151                 this.capsule.popup.clip();
 152         };
 153
 154         /**
 155          * Respond to text input enter event
 156          */
 157         mw.rcfilters.ui.FilterWrapperWidget.prototype.onTextInputEnter = function () {
 158                 var filter = this.filterPopup.getSelectedFilter();
 159
 160                 // Toggle the filter
 161                 this.controller.toggleFilterSelect( filter );
 162         };
 163
 164         /**
 165          * Respond to model update event and set up the available filters to choose
 166          * from.
 167          */
 168         mw.rcfilters.ui.FilterWrapperWidget.prototype.onModelInitialize = function () {
 169                 var wrapper = this;
 170
 171                 // Add defaults to capsule. We have to do this
 172                 // after we added to the capsule menu, since that's
 173                 // how the capsule multiselect widget knows which
 174                 // object to add
 175                 this.model.getItems().forEach( function ( filterItem ) {
 176                         if ( filterItem.isSelected() ) {
 177                                 wrapper.capsule.addItemByName( filterItem.getName() );
 178                         }
 179                 } );
 180         };
 181
 182         /**
 183          * Respond to item update and reset the selection. This will make it so that
 184          * any actual interaction with the system resets the selection state of any item.
 185          */
 186         mw.rcfilters.ui.FilterWrapperWidget.prototype.onModelItemUpdate = function () {
 187                 if ( !this.textInput.getValue() ) {
 188                         this.filterPopup.resetSelection();
 189                 }
 190         };
 191
 192         /**
 193          * Scroll the element to top within its container
 194          *
 195          * @private
 196          * @param {jQuery} $element Element to position
 197          * @param {number} [marginFromTop] When scrolling the entire widget to the top, leave this
 198          *  much space (in pixels) above the widget.
 199          */
 200         mw.rcfilters.ui.FilterWrapperWidget.prototype.scrollToTop = function ( $element, marginFromTop ) {
 201                 var container = OO.ui.Element.static.getClosestScrollableContainer( $element[ 0 ], 'y' ),
 202                         pos = OO.ui.Element.static.getRelativePosition( $element, $( container ) ),
 203                         containerScrollTop = $( container ).is( 'body, html' ) ? 0 : $( container ).scrollTop();
 204
 205                 // Scroll to item
 206                 $( container ).animate( {
 207                         scrollTop: containerScrollTop + pos.top - ( marginFromTop || 0 )
 208                 } );
 209         };
 210 }( mediaWiki ) );