mw.widgets.CalendarWidget: Lazy-initialize calendar buttons too

Bug: T126788
Change-Id: I9b0e67ea5b9854745928e3c63e73d701c6a83daf

diff --git a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.js b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.js
index 6524849..3daa70a 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.js
+++ b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.js
@@ -50,36 +50,8 @@
                this.$bodyOuterWrapper = $( '<div>' ).addClass( 'mw-widget-calendarWidget-body-outer-wrapper' );
                this.$bodyWrapper = $( '<div>' ).addClass( 'mw-widget-calendarWidget-body-wrapper' );
                this.$body = $( '<div>' ).addClass( 'mw-widget-calendarWidget-body' );
-               this.labelButton = new OO.ui.ButtonWidget( {
-                       tabIndex: -1,
-                       label: '',
-                       framed: false,
-                       classes: [ 'mw-widget-calendarWidget-labelButton' ]
-               } );
-               this.upButton = new OO.ui.ButtonWidget( {
-                       tabIndex: -1,
-                       framed: false,
-                       icon: 'collapse',
-                       classes: [ 'mw-widget-calendarWidget-upButton' ]
-               } );
-               this.prevButton = new OO.ui.ButtonWidget( {
-                       tabIndex: -1,
-                       framed: false,
-                       icon: 'previous',
-                       classes: [ 'mw-widget-calendarWidget-prevButton' ]
-               } );
-               this.nextButton = new OO.ui.ButtonWidget( {
-                       tabIndex: -1,
-                       framed: false,
-                       icon: 'next',
-                       classes: [ 'mw-widget-calendarWidget-nextButton' ]
-               } );
 
                // Events
-               this.labelButton.connect( this, { click: 'onUpButtonClick' } );
-               this.upButton.connect( this, { click: 'onUpButtonClick' } );
-               this.prevButton.connect( this, { click: 'onPrevButtonClick' } );
-               this.nextButton.connect( this, { click: 'onNextButtonClick' } );
                this.$element.on( {
                        focus: this.onFocus.bind( this ),
                        mousedown: this.onClick.bind( this ),
@@ -90,12 +62,9 @@
                this.$element
                        .addClass( 'mw-widget-calendarWidget' )
                        .append( this.$header, this.$bodyOuterWrapper.append( this.$bodyWrapper.append( this.$body ) ) );
-               this.$header.append(
-                       this.prevButton.$element,
-                       this.nextButton.$element,
-                       this.upButton.$element,
-                       this.labelButton.$element
-               );
+               if ( !this.lazyInitOnToggle ) {
+                       this.buildHeaderButtons();
+               }
                this.setDate( config.date !== undefined ? config.date : null );
        };
 
@@ -331,6 +300,50 @@
                this.$body.on( 'click', this.onBodyClick.bind( this ) );
        };
 
+       /**
+        * Construct and display buttons to navigate the calendar.
+        *
+        * @private
+        */
+       mw.widgets.CalendarWidget.prototype.buildHeaderButtons = function () {
+               this.labelButton = new OO.ui.ButtonWidget( {
+                       tabIndex: -1,
+                       label: '',
+                       framed: false,
+                       classes: [ 'mw-widget-calendarWidget-labelButton' ]
+               } );
+               this.upButton = new OO.ui.ButtonWidget( {
+                       tabIndex: -1,
+                       framed: false,
+                       icon: 'collapse',
+                       classes: [ 'mw-widget-calendarWidget-upButton' ]
+               } );
+               this.prevButton = new OO.ui.ButtonWidget( {
+                       tabIndex: -1,
+                       framed: false,
+                       icon: 'previous',
+                       classes: [ 'mw-widget-calendarWidget-prevButton' ]
+               } );
+               this.nextButton = new OO.ui.ButtonWidget( {
+                       tabIndex: -1,
+                       framed: false,
+                       icon: 'next',
+                       classes: [ 'mw-widget-calendarWidget-nextButton' ]
+               } );
+
+               this.labelButton.connect( this, { click: 'onUpButtonClick' } );
+               this.upButton.connect( this, { click: 'onUpButtonClick' } );
+               this.prevButton.connect( this, { click: 'onPrevButtonClick' } );
+               this.nextButton.connect( this, { click: 'onNextButtonClick' } );
+
+               this.$header.append(
+                       this.prevButton.$element,
+                       this.nextButton.$element,
+                       this.upButton.$element,
+                       this.labelButton.$element
+               );
+       };
+
        /**
         * Handle click events on the "up" button, switching to less precise view.
         *
@@ -554,6 +567,7 @@
        mw.widgets.CalendarWidget.prototype.toggle = function ( visible ) {
                if ( this.lazyInitOnToggle && visible ) {
                        this.lazyInitOnToggle = false;
+                       this.buildHeaderButtons();
                        this.updateUI();
                }