mw.widgets.DateInputWidget, CalendarWidget: Lazy-initialize calendar when first shown

Bug: T126788
Change-Id: I469cd7dd77108435459b0f1feba953febd82e91b

diff --git a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.js b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.js
index 7a7b9cd..6524849 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.js
+++ b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.js
@@ -19,6 +19,8 @@
         *
         * @constructor
         * @param {Object} [config] Configuration options
+        * @cfg {boolean} [lazyInitOnToggle=false] Don't build most of the interface until
+        *     `.toggle( true )` is called. Meant to be used when the calendar is not immediately visible.
         * @cfg {string} [precision='day'] Date precision to use, 'day' or 'month'
         * @cfg {string|null} [date=null] Day or month date (depending on `precision`), in the format
         *     'YYYY-MM-DD' or 'YYYY-MM'. When null, the calendar will show today's date, but not select
@@ -36,6 +38,7 @@
                OO.ui.mixin.FloatableElement.call( this, config );
 
                // Properties
+               this.lazyInitOnToggle = !!config.lazyInitOnToggle;
                this.precision = config.precision || 'day';
                // Currently selected date (day or month)
                this.date = null;
@@ -160,6 +163,11 @@
                var items, today, selected, currentMonth, currentYear, currentDay, i, needsFade,
                        $bodyWrapper = this.$bodyWrapper;
 
+               if ( this.lazyInitOnToggle ) {
+                       // We're being called from the constructor and not being shown yet, do nothing
+                       return;
+               }
+
                if (
                        this.displayLayer === this.previousDisplayLayer &&
                        this.date === this.previousDate &&
@@ -544,6 +552,11 @@
         * @inheritdoc
         */
        mw.widgets.CalendarWidget.prototype.toggle = function ( visible ) {
+               if ( this.lazyInitOnToggle && visible ) {
+                       this.lazyInitOnToggle = false;
+                       this.updateUI();
+               }
+
                // Parent method
                mw.widgets.CalendarWidget.parent.prototype.toggle.call( this, visible );
 

diff --git a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
index 03baeb3..a9b5bc3 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
+++ b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
@@ -119,6 +119,7 @@
                        validate: this.validateDate.bind( this )
                } );
                this.calendar = new mw.widgets.CalendarWidget( {
+                       lazyInitOnToggle: true,
                        // Can't pass `$floatableContainer: this.$element` here, the latter is not set yet.
                        // Instead we call setFloatableContainer() below.
                        precision: config.precision