Special:Contributions: Open "To date" widget after selecting a "From date"

[lhc/web/wiklou.git] / resources / src / mediawiki.widgets / mw.widgets.DateInputWidget.js

diff --git a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
index 0ec6a4c..ce9cf36 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
+++ b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
@@ -56,7 +56,7 @@
         *     } );
         *
         * @class
-        * @extends OO.ui.InputWidget
+        * @extends OO.ui.TextInputWidget
         * @mixins OO.ui.mixin.IndicatorElement
         *
         * @constructor
@@ -116,7 +116,7 @@
 
                // Properties (must be set before parent constructor, which calls #setValue)
                this.$handle = $( '<div>' );
-               this.label = new OO.ui.LabelWidget();
+               this.innerLabel = new OO.ui.LabelWidget();
                this.textInput = new OO.ui.TextInputWidget( {
                        required: config.required,
                        placeholder: placeholderDateFormat,
@@ -130,13 +130,14 @@
                } );
                this.inCalendar = 0;
                this.inTextInput = 0;
+               this.closing = false;
                this.inputFormat = config.inputFormat;
                this.displayFormat = config.displayFormat;
                this.longDisplayFormat = config.longDisplayFormat;
                this.required = config.required;
                this.placeholderLabel = config.placeholderLabel;
-
                // Validate and set min and max dates as properties
+
                if ( config.mustBeAfter !== undefined ) {
                        mustBeAfter = moment( config.mustBeAfter, 'YYYY-MM-DD' );
                        if ( mustBeAfter.isValid() ) {
@@ -149,7 +150,6 @@
                                this.mustBeBefore = mustBeBefore;
                        }
                }
-
                // Parent constructor
                mw.widgets.DateInputWidget.parent.call( this, config );
 
@@ -173,14 +173,15 @@
                } );
                this.$handle.on( {
                        click: this.onClick.bind( this ),
-                       keypress: this.onKeyPress.bind( this )
+                       keypress: this.onKeyPress.bind( this ),
+                       focus: this.onFocus.bind( this )
                } );
 
                // Initialization
                // Move 'tabindex' from this.$input (which is invisible) to the visible handle
                this.setTabIndexedElement( this.$handle );
                this.$handle
-                       .append( this.label.$element, this.$indicator )
+                       .append( this.innerLabel.$element, this.$indicator )
                        .addClass( 'mw-widget-dateInputWidget-handle' );
                this.calendar.$element
                        .addClass( 'mw-widget-dateInputWidget-calendar' );
@@ -239,9 +240,19 @@
 
        /* Inheritance */
 
-       OO.inheritClass( mw.widgets.DateInputWidget, OO.ui.InputWidget );
+       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
+        */
+
        /* Methods */
 
        /**
@@ -367,7 +378,7 @@
                if ( this.getValue() === '' ) {
                        this.textInput.setValue( '' );
                        this.calendar.setDate( null );
-                       this.label.setLabel( this.placeholderLabel );
+                       this.innerLabel.setLabel( this.placeholderLabel );
                        this.$element.addClass( 'mw-widget-dateInputWidget-empty' );
                } else {
                        moment = this.getMoment();
@@ -377,7 +388,7 @@
                        if ( !this.inCalendar ) {
                                this.calendar.setDate( this.getValue() );
                        }
-                       this.label.setLabel( moment.format( this.getDisplayFormat() ) );
+                       this.innerLabel.setLabel( moment.format( this.getDisplayFormat() ) );
                        this.$element.removeClass( 'mw-widget-dateInputWidget-empty' );
                }
        };
@@ -386,13 +397,23 @@
         * 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();
+
+               if ( userSelected ) {
+                       // Prevent focusing the handle from reopening the calendar
+                       this.closing = true;
+                       this.$handle.focus();
+                       this.closing = false;
+               }
+
+               this.emit( 'deactivate', !!userSelected );
        };
 
        /**
@@ -521,6 +542,17 @@
                }
        };
 
+       /**
+        * Handle focus events.
+        *
+        * @private
+        */
+       mw.widgets.DateInputWidget.prototype.onFocus = function () {
+               if ( !this.closing ) {
+                       this.activate();
+               }
+       };
+
        /**
         * Handle calendar key press events.
         *
@@ -530,8 +562,7 @@
         */
        mw.widgets.DateInputWidget.prototype.onCalendarKeyPress = function ( e ) {
                if ( !this.isDisabled() && e.which === OO.ui.Keys.ENTER ) {
-                       this.deactivate();
-                       this.$handle.focus();
+                       this.deactivate( true );
                        return false;
                }
        };
@@ -547,10 +578,12 @@
                if (
                        !this.isDisabled() &&
                        e.which === 1 &&
-                       $( e.target ).hasClass( 'mw-widget-calendarWidget-day' )
+                       (
+                               $( e.target ).hasClass( 'mw-widget-calendarWidget-day' ) ||
+                               $( e.target ).hasClass( 'mw-widget-calendarWidget-month' )
+                       )
                ) {
-                       this.deactivate();
-                       this.$handle.focus();
+                       this.deactivate( true );
                        return false;
                }
        };
@@ -561,8 +594,7 @@
         * @private
         */
        mw.widgets.DateInputWidget.prototype.onEnter = function () {
-               this.deactivate();
-               this.$handle.focus();
+               this.deactivate( true );
        };
 
        /**