Changeset 44758

Timestamp:

02/20/2019 10:55:19 PM (6 years ago)

Author:

afercia

Message:

Accessibility: General Settings: Update custom date/time format previews while typing.

The custom date/time format previews in General Settings were updated only when blurring the related input fields. With this change, they're now updated when users finish typing a custom format, properly debouncing the input event callback.

Props dilipbheda, Girishpanchal.
Fixes #43364.

File:

• trunk/src/wp-admin/includes/options.php (modified) (3 diffs)

trunk/src/wp-admin/includes/options.php

@@ -62 +62 @@
                 $( 'input[name="time_format_custom"]' ).val( $( this ).val() ).closest( 'fieldset' ).find( '.example' ).text( $( this ).parent( 'label' ).children( '.format-i18n' ).text() );
         });
+
         $( 'input[name="time_format_custom"]' ).on( 'click input', function() {
             $( '#time_format_custom_radio' ).prop( 'checked', true );
         });
-        $("input[name='date_format_custom'], input[name='time_format_custom']").change( function() {
+
+        $( 'input[name="date_format_custom"], input[name="time_format_custom"]' ).on( 'input', function() {
             var format = $( this ),
                 fieldset = format.closest( 'fieldset' ),
@@ -71 +73 @@
                 spinner = fieldset.find( '.spinner' );
 
-            spinner.addClass( 'is-active' );
+            // Debounce the event callback while users are typing.
+            clearTimeout( $.data( this, 'timer' ) );
+            $( this ).data( 'timer', setTimeout( function() {
+                // If custom date is not empty.
+                if ( format.val() ) {
+                    spinner.addClass( 'is-active' );
 
-            $.post( ajaxurl, {
-                    action: 'date_format_custom' == format.attr( 'name' ) ? 'date_format' : 'time_format',
-                    date : format.val()
-                }, function( d ) { spinner.removeClass( 'is-active' ); example.text( d ); } );
-        });
+                    $.post( ajaxurl, {
+                        action: 'date_format_custom' == format.attr( 'name' ) ? 'date_format' : 'time_format',
+                        date    : format.val()
+                    }, function( d ) { spinner.removeClass( 'is-active' ); example.text( d ); } );
+                }
+            }, 500 ) );
+        } );
 
         var languageSelect = $( '#WPLANG' );
@@ -108 +117 @@
             };
         check_disabled();
-         section.find('input:radio').change(check_disabled);
+        section.find( 'input:radio' ).change( check_disabled );
     });
 </script>