Stop using and deprecate jquery.delayedBind

Reasons:
* It provides the same functionality as jquery.throttle-debounce, but
  in a hackier and less flexible way
* It's (to my knowledge) not used outside of core, while
  jquery.throttle-debounce is - deciding on one can lower the payload
  size a little bit
* It's a custom library and we have too many of those

Only two modules in core were using it:
* jquery.expandableField: It was, in fact, used incorrectly, the code
  needs a simple setTimeout / clearTimeout pair with no debouncing.
  The bug made it possible to keep focus on a field while it was
  unexpanded (by quickly triggering blur and focus events in order).
* skins.vector.js: Straightforwardly converted the usage to a
  $.debounce call. Also fixed a bug where the window resize handler
  was bound for each $.fn.collapsibleTabs call instead of once.

The module will be removed in MediaWiki 1.24:
Ifc84b09a78007a6a0ea5676b0f12a38937dca2e7.

Change-Id: I83ba37a9568a171d9f3654f6bfdb6064e0e65bd4

diff --git a/RELEASE-NOTES-1.23 b/RELEASE-NOTES-1.23
index 2350b8e..d520de5 100644 (file)
--- a/RELEASE-NOTES-1.23
+++ b/RELEASE-NOTES-1.23
@@ -248,6 +248,8 @@ changes to languages because of Bugzilla reports.
   was removed.
 * A user_password_expires column has been added to the user table. The User
   object expects this column to exist. Use update.php to create this new field.
+* The jquery.delayedBind ResourceLoader module was deprecated in favor of the
+  jquery.throttle-debounce module. It will be removed in MediaWiki 1.24.
 
 ==== Removed classes ====
 * FakeMemCachedClient (deprecated in 1.18)

diff --git a/resources/Resources.php b/resources/Resources.php
index 7f5b75a..f8c6114 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -150,7 +150,7 @@ return array(
                        'vector/vector.js',
                ),
                'position' => 'top',
-               'dependencies' => 'jquery.delayedBind',
+               'dependencies' => 'jquery.throttle-debounce',
                'remoteBasePath' => $GLOBALS['wgStylePath'],
                'localBasePath' => $GLOBALS['wgStyleDirectory'],
        ),
@@ -238,7 +238,6 @@ return array(
        ),
        'jquery.expandableField' => array(
                'scripts' => 'resources/jquery/jquery.expandableField.js',
-               'dependencies' => 'jquery.delayedBind',
        ),
        'jquery.farbtastic' => array(
                'scripts' => 'resources/jquery/jquery.farbtastic.js',

diff --git a/resources/jquery/jquery.delayedBind.js b/resources/jquery/jquery.delayedBind.js
index 40f3d44..874c111 100644 (file)
--- a/resources/jquery/jquery.delayedBind.js
+++ b/resources/jquery/jquery.delayedBind.js
@@ -1,4 +1,4 @@
-( function ( $ ) {
+( function ( mw, $ ) {
 /**
  * Function that escapes spaces in event names. This is needed because
  * "_delayedBind-foo bar-1000" refers to two events
@@ -73,4 +73,11 @@ $.fn.extend( {
        }
 } );
 
-}( jQuery ) );
+mw.log.deprecate( $.fn, 'delayedBind', $.fn.delayedBind,
+       'Use the jquery.throttle-debounce module instead' );
+mw.log.deprecate( $.fn, 'delayedBindCancel', $.fn.delayedBindCancel,
+       'Use the jquery.throttle-debounce module instead' );
+mw.log.deprecate( $.fn, 'delayedBindUnbind', $.fn.delayedBindUnbind,
+       'Use the jquery.throttle-debounce module instead' );
+
+}( mediaWiki, jQuery ) );

diff --git a/resources/jquery/jquery.expandableField.js b/resources/jquery/jquery.expandableField.js
index 9e532e5..732cc6e 100644 (file)
--- a/resources/jquery/jquery.expandableField.js
+++ b/resources/jquery/jquery.expandableField.js
@@ -56,7 +56,7 @@
                        args = arguments;
 
                $( this ).each( function () {
-                       var key, context;
+                       var key, context, timeout;
 
                        /* Construction / Loading */
 
@@ -122,10 +122,13 @@
                                $( this )
                                        .addClass( 'expandableField' )
                                        .focus( function ( e ) {
+                                               clearTimeout( timeout );
                                                $.expandableField.expandField( e, context );
                                        } )
-                                       .delayedBind( 250, 'blur', function ( e ) {
-                                               $.expandableField.condenseField( e, context );
+                                       .blur( function ( e ) {
+                                               timeout = setTimeout( function () {
+                                                       $.expandableField.condenseField( e, context );
+                                               }, 250 );
                                        } );
                        }
                        // Store the context for next time

diff --git a/skins/vector/collapsibleTabs.js b/skins/vector/collapsibleTabs.js
index e33cfc9..0e49744 100644 (file)
--- a/skins/vector/collapsibleTabs.js
+++ b/skins/vector/collapsibleTabs.js
@@ -24,13 +24,14 @@
                        } );
                } );
 
-               // if we haven't already bound our resize hanlder, bind it now
+               // if we haven't already bound our resize handler, bind it now
                if ( !$.collapsibleTabs.boundEvent ) {
-                       $( window )
-                               .delayedBind( 500, 'resize', function () {
-                                       $.collapsibleTabs.handleResize();
-                               } );
+                       $( window ).on( 'resize', $.debounce( 500, function () {
+                               $.collapsibleTabs.handleResize();
+                       } ) );
+                       $.collapsibleTabs.boundEvent = true;
                }
+
                // call our resize handler to setup the page
                $.collapsibleTabs.handleResize();
                return this;
@@ -101,9 +102,6 @@
                        }
                        return $settings;
                },
-               /**
-                * @param {jQuery.Event} e
-                */
                handleResize: function () {
                        $.collapsibleTabs.instances.each( function () {
                                var $el = $( this ),