From cb519ced0fdfcdb497db2a8afb4fcd7d0977ef3f Mon Sep 17 00:00:00 2001
From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= <matma.rex@gmail.com>
Date: Fri, 19 Feb 2016 22:44:22 +0100
Subject: [PATCH] mw.widgets.DateInputWidget, CalendarWidget: Lazy-initialize
 calendar when first shown

Bug: T126788
Change-Id: I469cd7dd77108435459b0f1feba953febd82e91b
---
 .../mediawiki.widgets/mw.widgets.CalendarWidget.js  | 13 +++++++++++++
 .../mediawiki.widgets/mw.widgets.DateInputWidget.js |  1 +
 2 files changed, 14 insertions(+)

diff --git a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.js b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.js
index 7a7b9cda0f..65248490f2 100644
--- 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 03baeb34a2..a9b5bc30b5 100644
--- 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
-- 
2.20.1