$content: this.filterPopup.$element,
$footer: $footer,
classes: [ 'mw-rcfilters-ui-filterWrapperWidget-popup' ],
- width: 650
+ width: 650,
+ hideWhenOutOfView: false
}
} );
itemUpdate: 'onModelItemUpdate'
} );
this.textInput.connect( this, {
- change: 'onTextInputChange'
+ change: 'onTextInputChange',
+ enter: 'onTextInputEnter'
} );
this.capsule.connect( this, { capsuleItemClick: 'onCapsuleItemClick' } );
- this.capsule.popup.connect( this, { toggle: 'onCapsulePopupToggle' } );
+ this.capsule.popup.connect( this, {
+ toggle: 'onCapsulePopupToggle',
+ ready: 'onCapsulePopupReady'
+ } );
// Initialize
this.$element
.addClass( 'mw-rcfilters-ui-filterWrapperWidget' )
- .addClass( 'mw-rcfilters-ui-ready' )
.append( this.capsule.$element, this.textInput.$element );
};
this.filterPopup.select( filterName );
this.capsule.select( item );
+ this.capsule.popup.toggle( true );
this.scrollToTop( filterWidget.$element );
};
+ /**
+ * Respond to capsule popup ready event, fired after the popup is visible, positioned and clipped
+ */
+ mw.rcfilters.ui.FilterWrapperWidget.prototype.onCapsulePopupReady = function () {
+ mw.hook( 'RcFilters.popup.open' ).fire( this.filterPopup.getSelectedFilter() );
+
+ this.scrollToTop( this.capsule.$element, 10 );
+ if ( !this.filterPopup.getSelectedFilter() ) {
+ // No selection, scroll the popup list to top
+ setTimeout( function () { this.capsule.popup.$body.scrollTop( 0 ); }.bind( this ), 0 );
+ }
+ };
+
/**
* Respond to popup toggle event. Reset selection in the list when the popup is closed.
*
* @param {boolean} isVisible Popup is visible
*/
mw.rcfilters.ui.FilterWrapperWidget.prototype.onCapsulePopupToggle = function ( isVisible ) {
- if ( !isVisible ) {
+ if ( !isVisible && !this.textInput.getValue() ) {
+ // Only reset selection if we are not filtering
this.filterPopup.resetSelection();
this.capsule.resetSelection();
- } else {
- this.scrollToTop( this.capsule.$element, 10 );
}
};
* @param {string} newValue Current value
*/
mw.rcfilters.ui.FilterWrapperWidget.prototype.onTextInputChange = function ( newValue ) {
- this.filterPopup.resetSelection();
-
// Filter the results
this.filterPopup.filter( this.model.findMatches( newValue ) );
+
+ if ( !newValue ) {
+ // If the value is empty, we didn't actually
+ // filter anything. the filter method will run
+ // and show all, but then will select the
+ // top item - but in this case, no selection
+ // should be made.
+ this.filterPopup.resetSelection();
+ }
this.capsule.popup.clip();
};
+ /**
+ * Respond to text input enter event
+ */
+ mw.rcfilters.ui.FilterWrapperWidget.prototype.onTextInputEnter = function () {
+ var filter = this.filterPopup.getSelectedFilter();
+
+ // Toggle the filter
+ this.controller.toggleFilterSelect( filter );
+ };
+
/**
* Respond to model update event and set up the available filters to choose
* from.
* any actual interaction with the system resets the selection state of any item.
*/
mw.rcfilters.ui.FilterWrapperWidget.prototype.onModelItemUpdate = function () {
- this.filterPopup.resetSelection();
+ if ( !this.textInput.getValue() ) {
+ this.filterPopup.resetSelection();
+ }
};
/**
*/
mw.rcfilters.ui.FilterWrapperWidget.prototype.scrollToTop = function ( $element, marginFromTop ) {
var container = OO.ui.Element.static.getClosestScrollableContainer( $element[ 0 ], 'y' ),
- pos = OO.ui.Element.static.getRelativePosition( $element, $( container ) );
+ pos = OO.ui.Element.static.getRelativePosition( $element, $( container ) ),
+ containerScrollTop = $( container ).is( 'body, html' ) ? 0 : $( container ).scrollTop();
// Scroll to item
$( container ).animate( {
- scrollTop: $( container ).scrollTop() + pos.top + ( marginFromTop || 0 )
+ scrollTop: containerScrollTop + pos.top - ( marginFromTop || 0 )
} );
};
}( mediaWiki ) );