Merge "DateTimeInputWidget: Only show calendar when focusing date components, not...

[lhc/web/wiklou.git] / resources / src / mediawiki.widgets.datetime / DateTimeInputWidget.js

diff --git a/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.js b/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.js
index 91f797d..3e4c5e2 100644 (file)
--- a/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.js
+++ b/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.js
@@ -51,6 +51,11 @@
                        calendar: {}
                }, config );
 
+               // See InputWidget#reusePreInfuseDOM about config.$input
+               if ( config.$input ) {
+                       config.$input.addClass( 'oo-ui-element-hidden' );
+               }
+
                if ( $.isPlainObject( config.formatter ) && config.formatter.format === undefined ) {
                        config.formatter.format = '@' + config.type;
                }
@@ -144,19 +149,6 @@
                        } );
                }
 
-               // Our form input *should* be type="hidden". But if we're infusing from
-               // PHP, it's not.
-               if ( this.$input.attr( 'type' ) !== 'hidden' ) {
-                       try {
-                               this.$input.attr( 'type', 'hidden' );
-                       } catch ( e ) {
-                       }
-                       // IE <= 8, and IE 9 in quirks mode, doesn't allow changing the
-                       // type, so just hide the field with CSS. IE 9 in quirks mode
-                       // doesn't even throw an error, so do that unconditionally. Sigh.
-                       this.$input.css( 'display', 'none' );
-               }
-
                // Initialization
                this.setTabIndex( -1 );
 
@@ -185,7 +177,7 @@
 
        /* Static properties */
 
-       mw.widgets.datetime.DateTimeInputWidget[ 'static' ].supportsSimpleLabel = false;
+       mw.widgets.datetime.DateTimeInputWidget.static.supportsSimpleLabel = false;
 
        /* Events */
 
@@ -398,6 +390,10 @@
                                $field = $( '<span>' )
                                        .width( sz )
                                        .data( 'mw-widgets-datetime-dateTimeInputWidget-placeholder', placeholder );
+                               if ( spec.type !== 'static' ) {
+                                       $field.prop( 'tabIndex', -1 );
+                                       $field.on( 'focus', this.onFieldFocus.bind( this, $field ) );
+                               }
                                if ( spec.type === 'static' ) {
                                        $field.text( spec.value );
                                } else {
@@ -591,6 +587,7 @@
         * @private
         * @param {jQuery} $field
         * @param {jQuery.Event} e Key down event
+        * @return {boolean} False to cancel the default event
         */
        mw.widgets.datetime.DateTimeInputWidget.prototype.onFieldKeyDown = function ( $field, e ) {
                var spec = $field.data( 'mw-widgets-datetime-dateTimeInputWidget-fieldSpec' );
@@ -635,6 +632,8 @@
         * @param {jQuery.Event} e Focus event
         */
        mw.widgets.datetime.DateTimeInputWidget.prototype.onFieldFocus = function ( $field ) {
+               var spec = $field.data( 'mw-widgets-datetime-dateTimeInputWidget-fieldSpec' );
+
                if ( !this.isDisabled() ) {
                        if ( this.getValueAsDate() === null ) {
                                this.setValue( this.formatter.getDefaultDate() );
@@ -644,7 +643,7 @@
                        }
 
                        if ( this.calendar ) {
-                               this.calendar.toggle( true );
+                               this.calendar.toggle( !!spec.calendarComponent );
                        }
                }
        };
@@ -712,6 +711,7 @@
         * @private
         * @param {jQuery} $field
         * @param {jQuery.Event} e Change event
+        * @return {boolean} False to cancel the default event
         */
        mw.widgets.datetime.DateTimeInputWidget.prototype.onFieldWheel = function ( $field, e ) {
                var delta = 0,