3 * List displaying all filter groups
5 * @extends OO.ui.Widget
6 * @mixins OO.ui.mixin.PendingElement
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
15 mw
.rcfilters
.ui
.FilterWrapperWidget
= function MwRcfiltersUiFilterWrapperWidget( controller
, model
, config
) {
16 var $footer
= $( '<div>' );
17 config
= config
|| {};
20 mw
.rcfilters
.ui
.FilterWrapperWidget
.parent
.call( this, config
);
22 OO
.ui
.mixin
.PendingElement
.call( this, config
);
24 this.controller
= controller
;
26 this.$overlay
= config
.$overlay
|| this.$element
;
28 this.filterPopup
= new mw
.rcfilters
.ui
.FiltersListWidget(
32 label
: mw
.msg( 'rcfilters-filterlist-title' ),
33 $overlay
: this.$overlay
38 new OO
.ui
.ButtonWidget( {
41 flags
: [ 'progressive' ],
42 label
: mw
.msg( 'rcfilters-filterlist-feedbacklink' ),
43 href
: 'https://www.mediawiki.org/wiki/Help_talk:New_filters_for_edit_review'
47 this.textInput
= new OO
.ui
.TextInputWidget( {
48 classes
: [ 'mw-rcfilters-ui-filterWrapperWidget-search' ],
50 placeholder
: mw
.msg( 'rcfilters-search-placeholder' )
53 this.capsule
= new mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget( controller
, this.model
, this.textInput
, {
54 $overlay
: this.$overlay
,
56 $content
: this.filterPopup
.$element
,
58 classes
: [ 'mw-rcfilters-ui-filterWrapperWidget-popup' ],
60 hideWhenOutOfView
: false
65 this.model
.connect( this, {
66 initialize
: 'onModelInitialize',
67 itemUpdate
: 'onModelItemUpdate'
69 this.textInput
.connect( this, {
70 change
: 'onTextInputChange',
71 enter
: 'onTextInputEnter'
73 this.capsule
.connect( this, { capsuleItemClick
: 'onCapsuleItemClick' } );
74 this.capsule
.popup
.connect( this, { toggle
: 'onCapsulePopupToggle' } );
78 .addClass( 'mw-rcfilters-ui-filterWrapperWidget' )
79 .addClass( 'mw-rcfilters-ui-ready' )
80 .append( this.capsule
.$element
, this.textInput
.$element
);
85 OO
.inheritClass( mw
.rcfilters
.ui
.FilterWrapperWidget
, OO
.ui
.Widget
);
86 OO
.mixinClass( mw
.rcfilters
.ui
.FilterWrapperWidget
, OO
.ui
.mixin
.PendingElement
);
89 * Respond to capsule item click and make the popup scroll down to the requested item
91 * @param {mw.rcfilters.ui.CapsuleItemWidget} item Clicked item
93 mw
.rcfilters
.ui
.FilterWrapperWidget
.prototype.onCapsuleItemClick = function ( item
) {
94 var filterName
= item
.getData(),
95 // Find the item in the popup
96 filterWidget
= this.filterPopup
.getItemWidget( filterName
);
99 this.filterPopup
.select( filterName
);
100 this.capsule
.select( item
);
102 this.scrollToTop( filterWidget
.$element
);
106 * Respond to popup toggle event. Reset selection in the list when the popup is closed.
108 * @param {boolean} isVisible Popup is visible
110 mw
.rcfilters
.ui
.FilterWrapperWidget
.prototype.onCapsulePopupToggle = function ( isVisible
) {
112 if ( !this.textInput
.getValue() ) {
113 // Only reset selection if we are not filtering
114 this.filterPopup
.resetSelection();
115 this.capsule
.resetSelection();
118 this.scrollToTop( this.capsule
.$element
, 10 );
123 * Respond to text input change
125 * @param {string} newValue Current value
127 mw
.rcfilters
.ui
.FilterWrapperWidget
.prototype.onTextInputChange = function ( newValue
) {
128 // Filter the results
129 this.filterPopup
.filter( this.model
.findMatches( newValue
) );
132 // If the value is empty, we didn't actually
133 // filter anything. the filter method will run
134 // and show all, but then will select the
135 // top item - but in this case, no selection
137 this.filterPopup
.resetSelection();
139 this.capsule
.popup
.clip();
143 * Respond to text input enter event
145 mw
.rcfilters
.ui
.FilterWrapperWidget
.prototype.onTextInputEnter = function () {
146 var filter
= this.filterPopup
.getSelectedFilter();
149 this.controller
.toggleFilterSelect( filter
);
153 * Respond to model update event and set up the available filters to choose
156 mw
.rcfilters
.ui
.FilterWrapperWidget
.prototype.onModelInitialize = function () {
159 // Add defaults to capsule. We have to do this
160 // after we added to the capsule menu, since that's
161 // how the capsule multiselect widget knows which
163 this.model
.getItems().forEach( function ( filterItem
) {
164 if ( filterItem
.isSelected() ) {
165 wrapper
.capsule
.addItemByName( filterItem
.getName() );
171 * Respond to item update and reset the selection. This will make it so that
172 * any actual interaction with the system resets the selection state of any item.
174 mw
.rcfilters
.ui
.FilterWrapperWidget
.prototype.onModelItemUpdate = function () {
175 if ( !this.textInput
.getValue() ) {
176 this.filterPopup
.resetSelection();
181 * Scroll the element to top within its container
184 * @param {jQuery} $element Element to position
185 * @param {number} [marginFromTop] When scrolling the entire widget to the top, leave this
186 * much space (in pixels) above the widget.
188 mw
.rcfilters
.ui
.FilterWrapperWidget
.prototype.scrollToTop = function ( $element
, marginFromTop
) {
189 var container
= OO
.ui
.Element
.static.getClosestScrollableContainer( $element
[ 0 ], 'y' ),
190 pos
= OO
.ui
.Element
.static.getRelativePosition( $element
, $( container
) );
193 $( container
).animate( {
194 scrollTop
: $( container
).scrollTop() + pos
.top
+ ( marginFromTop
|| 0 )