Add a 'deactivate' event to DateInputWidget, with a boolean indicating
whether the deactivation occurred because the user chose a date.
Also consolidate some of the code handling this case into the deactivate()
method.
Bug: T120733
Change-Id: Ia56cc28b400a0bc051dff79b2d3870a8954137a6
( function ( mw, $ ) {
$( function () {
( function ( mw, $ ) {
$( function () {
- mw.widgets.DateInputWidget.static.infuse( 'mw-date-start' );
- mw.widgets.DateInputWidget.static.infuse( 'mw-date-end' );
+ var startInput = mw.widgets.DateInputWidget.static.infuse( 'mw-date-start' ),
+ endInput = mw.widgets.DateInputWidget.static.infuse( 'mw-date-end' );
+
+ startInput.on( 'deactivate', function ( userSelected ) {
+ if ( userSelected ) {
+ endInput.focus();
+ }
+ } );
} );
}( mediaWiki, jQuery ) );
} );
}( mediaWiki, jQuery ) );
OO.inheritClass( mw.widgets.DateInputWidget, OO.ui.TextInputWidget );
OO.mixinClass( mw.widgets.DateInputWidget, OO.ui.mixin.IndicatorElement );
OO.inheritClass( mw.widgets.DateInputWidget, OO.ui.TextInputWidget );
OO.mixinClass( mw.widgets.DateInputWidget, OO.ui.mixin.IndicatorElement );
+ /* Events */
+
+ /**
+ * Fired when the widget is deactivated (i.e. the calendar is closed). This can happen because
+ * the user selected a value, or because the user blurred the widget.
+ *
+ * @event deactivate
+ * @param {boolean} userSelected Whether the deactivation happened because the user selected a value
+ */
+
* Deactivate this input field for data entry. Closes the calendar and hides the text field.
*
* @private
* Deactivate this input field for data entry. Closes the calendar and hides the text field.
*
* @private
+ * @param {boolean} [userSelected] Whether we are deactivating because the user selected a value
- mw.widgets.DateInputWidget.prototype.deactivate = function () {
+ mw.widgets.DateInputWidget.prototype.deactivate = function ( userSelected ) {
this.$element.removeClass( 'mw-widget-dateInputWidget-active' );
this.$handle.show();
this.textInput.toggle( false );
this.calendar.toggle( false );
this.setValidityFlag();
this.$element.removeClass( 'mw-widget-dateInputWidget-active' );
this.$handle.show();
this.textInput.toggle( false );
this.calendar.toggle( false );
this.setValidityFlag();
+
+ if ( userSelected ) {
+ // Prevent focusing the handle from reopening the calendar
+ this.closing = true;
+ this.$handle.focus();
+ this.closing = false;
+ }
+
+ this.emit( 'deactivate', !!userSelected );
*/
mw.widgets.DateInputWidget.prototype.onCalendarKeyPress = function ( e ) {
if ( !this.isDisabled() && e.which === OO.ui.Keys.ENTER ) {
*/
mw.widgets.DateInputWidget.prototype.onCalendarKeyPress = function ( e ) {
if ( !this.isDisabled() && e.which === OO.ui.Keys.ENTER ) {
- // Prevent focusing the handle from reopening the calendar
- this.closing = true;
-
- this.deactivate();
- this.$handle.focus();
-
- this.closing = false;
+ this.deactivate( true );
$( e.target ).hasClass( 'mw-widget-calendarWidget-month' )
)
) {
$( e.target ).hasClass( 'mw-widget-calendarWidget-month' )
)
) {
- // Prevent focusing the handle from reopening the calendar
- this.closing = true;
-
- this.deactivate();
- this.$handle.focus();
-
- this.closing = false;
+ this.deactivate( true );
* @private
*/
mw.widgets.DateInputWidget.prototype.onEnter = function () {
* @private
*/
mw.widgets.DateInputWidget.prototype.onEnter = function () {
- // Prevent focusing the handle from reopening the calendar
- this.closing = true;
-
- this.deactivate();
- this.$handle.focus();
-
- this.closing = false;
+ this.deactivate( true );