Lazy-infuse OOUI widgets by tab

Bug: T203838
Change-Id: I43241e0563c62e009c1ad5409bf598b62661483e

diff --git a/includes/specials/forms/PreferencesFormOOUI.php b/includes/specials/forms/PreferencesFormOOUI.php
index cfa8f8f..a5171e3 100644 (file)
--- a/includes/specials/forms/PreferencesFormOOUI.php
+++ b/includes/specials/forms/PreferencesFormOOUI.php
@@ -213,7 +213,7 @@ class PreferencesFormOOUI extends OOUIHTMLForm {
                                ) .
                                Html::rawElement(
                                        'div',
-                                       [ 'class' => 'oo-ui-menuLayout-content' ],
+                                       [ 'class' => 'oo-ui-menuLayout-content mw-htmlform-autoinfuse-lazy' ],
                                        $this->displaySection( $this->mFieldTree, '', 'mw-prefsection-' )
                                )
                        )

diff --git a/resources/src/mediawiki.htmlform/autoinfuse.js b/resources/src/mediawiki.htmlform/autoinfuse.js
index c39e43a..1628c5a 100644 (file)
--- a/resources/src/mediawiki.htmlform/autoinfuse.js
+++ b/resources/src/mediawiki.htmlform/autoinfuse.js
@@ -8,6 +8,11 @@
                var $oouiNodes, modules, extraModules;
 
                $oouiNodes = $root.find( '.mw-htmlform-field-autoinfuse' );
+
+               $oouiNodes = $oouiNodes.filter( function () {
+                       return !$( this ).closest( '.mw-htmlform-autoinfuse-lazy' ).length;
+               } );
+
                if ( $oouiNodes.length ) {
                        // The modules are preloaded (added server-side in HTMLFormField, and the individual fields
                        // which need extra ones), but this module doesn't depend on them. Wait until they're loaded.

diff --git a/resources/src/mediawiki.special.preferences.ooui/editfont.js b/resources/src/mediawiki.special.preferences.ooui/editfont.js
index fe48886..7c98ece 100644 (file)
--- a/resources/src/mediawiki.special.preferences.ooui/editfont.js
+++ b/resources/src/mediawiki.special.preferences.ooui/editfont.js
@@ -1,12 +1,20 @@
 /*!
  * JavaScript for Special:Preferences: editfont field enhancements.
  */
-( function ( mw, $ ) {
-       $( function () {
-               var widget, lastValue;
+( function ( mw ) {
+       mw.hook( 'htmlform.enhance' ).add( function ( $root ) {
+               var widget, lastValue,
+                       $target = $root.find( '#mw-input-wpeditfont' );
+
+               if (
+                       !$target.length ||
+                       $target.closest( '.mw-htmlform-autoinfuse-lazy' ).length
+               ) {
+                       return;
+               }
 
                try {
-                       widget = OO.ui.infuse( $( '#mw-input-wpeditfont' ) );
+                       widget = OO.ui.infuse( $target );
                } catch ( err ) {
                        // This preference could theoretically be disabled ($wgHiddenPrefs)
                        return;
@@ -29,4 +37,4 @@
                updateLabel( widget.getValue() );
 
        } );
-}( mediaWiki, jQuery ) );
+}( mediaWiki ) );

diff --git a/resources/src/mediawiki.special.preferences.ooui/tabs.js b/resources/src/mediawiki.special.preferences.ooui/tabs.js
index 194f74c..cc87f43 100644 (file)
--- a/resources/src/mediawiki.special.preferences.ooui/tabs.js
+++ b/resources/src/mediawiki.special.preferences.ooui/tabs.js
@@ -3,7 +3,7 @@
  */
 ( function ( mw, $ ) {
        $( function () {
-               var $preferences, tabs, wrapper, previousTab;
+               var $preferences, tabs, wrapper, previousTab, switchingNoHash;
 
                $preferences = $( '#preferences' );
 
@@ -52,8 +52,20 @@
                $preferences.prepend( wrapper.$element );
                $( '.mw-prefs-faketabs' ).remove();
 
-               function updateHash( panel ) {
+               function enhancePanel( panel ) {
+                       if ( !panel.$element.data( 'mw-section-infused' ) ) {
+                               // mw-htmlform-autoinfuse-lazy class has been removed by replacing faketabs
+                               mw.hook( 'htmlform.enhance' ).fire( panel.$element );
+                               panel.$element.data( 'mw-section-infused', true );
+                       }
+               }
+
+               function onTabPanelSet( panel ) {
                        var scrollTop, active;
+
+                       if ( switchingNoHash ) {
+                               return;
+                       }
                        // Handle hash manually to prevent jumping,
                        // therefore save and restore scrollTop to prevent jumping.
                        scrollTop = $( window ).scrollTop();
@@ -67,21 +79,22 @@
                        $( window ).scrollTop( scrollTop );
                }
 
-               tabs.on( 'set', updateHash );
+               tabs.on( 'set', onTabPanelSet );
 
                /**
                 * @ignore
                 * @param {string} name the name of a tab without the prefix ("mw-prefsection-")
-                * @param {string} [mode] A hash will be set according to the current
-                *  open section. Set mode 'noHash' to suppress this.
+                * @param {boolean} [noHash] A hash will be set according to the current
+                *  open section. Use this flag to suppress this.
                 */
-               function switchPrefTab( name, mode ) {
-                       if ( mode === 'noHash' ) {
-                               tabs.off( 'set', updateHash );
+               function switchPrefTab( name, noHash ) {
+                       if ( noHash ) {
+                               switchingNoHash = true;
                        }
                        tabs.setTabPanel( name );
-                       if ( mode === 'noHash' ) {
-                               tabs.on( 'set', updateHash );
+                       enhancePanel( tabs.getCurrentTabPanel() );
+                       if ( noHash ) {
+                               switchingNoHash = false;
                        }
                }
 
@@ -99,7 +112,7 @@
                                if ( parentSection.length ) {
                                        mw.storage.session.remove( 'mwpreferences-prevTab' );
                                        // Switch to proper tab and scroll to selected item.
-                                       switchPrefTab( parentSection.attr( 'id' ).replace( 'mw-prefsection-', '' ), 'noHash' );
+                                       switchPrefTab( parentSection.attr( 'id' ).replace( 'mw-prefsection-', '' ), true );
                                        matchedElement.scrollIntoView();
                                }
                        }
@@ -110,7 +123,7 @@
                        if ( hash.match( /^#mw-[\w-]+/ ) ) {
                                detectHash();
                        } else if ( hash === '' ) {
-                               switchPrefTab( 'personal', 'noHash' );
+                               switchPrefTab( 'personal', true );
                        }
                } )
                        // Run the function immediately to select the proper tab on startup.
@@ -119,7 +132,7 @@
                // Restore the active tab after saving the preferences
                previousTab = mw.storage.session.get( 'mwpreferences-prevTab' );
                if ( previousTab ) {
-                       switchPrefTab( previousTab, 'noHash' );
+                       switchPrefTab( previousTab, true );
                        // Deleting the key, the tab states should be reset until we press Save
                        mw.storage.session.remove( 'mwpreferences-prevTab' );
                }

diff --git a/resources/src/mediawiki.special.preferences/timezone.js b/resources/src/mediawiki.special.preferences/timezone.js
index f938bcf..47a4bbc 100644 (file)
--- a/resources/src/mediawiki.special.preferences/timezone.js
+++ b/resources/src/mediawiki.special.preferences/timezone.js
@@ -2,23 +2,31 @@
  * JavaScript for Special:Preferences: Timezone field enhancements.
  */
 ( function ( mw, $ ) {
-       $( function () {
+       mw.hook( 'htmlform.enhance' ).add( function ( $root ) {
                var $tzSelect, $tzTextbox, timezoneWidget, $localtimeHolder, servertime,
+                       $target = $root.find( '#wpTimeCorrection' ),
                        oouiEnabled = $( '#mw-prefs-form' ).hasClass( 'mw-htmlform-ooui' );
 
+               if (
+                       !$target.length ||
+                       $target.closest( '.mw-htmlform-autoinfuse-lazy' ).length
+               ) {
+                       return;
+               }
+
                // Timezone functions.
                // Guesses Timezone from browser and updates fields onchange.
 
                if ( oouiEnabled ) {
                        // This is identical to OO.ui.infuse( ... ), but it makes the class name of the result known.
                        try {
-                               timezoneWidget = mw.widgets.SelectWithInputWidget.static.infuse( $( '#wpTimeCorrection' ) );
+                               timezoneWidget = mw.widgets.SelectWithInputWidget.static.infuse( $target );
                        } catch ( err ) {
                                // This preference could theoretically be disabled ($wgHiddenPrefs)
                                timezoneWidget = null;
                        }
                } else {
-                       $tzSelect = $( '#wpTimeCorrection' );
+                       $tzSelect = $target;
                        $tzTextbox = $( '#wpTimeCorrection-other' );
                }