WordPress.org

Make WordPress Core

Changeset 44758


Ignore:
Timestamp:
02/20/2019 10:55:19 PM (9 months 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/includes/options.php

    r43571 r44758  
    6262                $( 'input[name="time_format_custom"]' ).val( $( this ).val() ).closest( 'fieldset' ).find( '.example' ).text( $( this ).parent( 'label' ).children( '.format-i18n' ).text() );
    6363        });
     64
    6465        $( 'input[name="time_format_custom"]' ).on( 'click input', function() {
    6566            $( '#time_format_custom_radio' ).prop( 'checked', true );
    6667        });
    67         $("input[name='date_format_custom'], input[name='time_format_custom']").change( function() {
     68
     69        $( 'input[name="date_format_custom"], input[name="time_format_custom"]' ).on( 'input', function() {
    6870            var format = $( this ),
    6971                fieldset = format.closest( 'fieldset' ),
     
    7173                spinner = fieldset.find( '.spinner' );
    7274
    73             spinner.addClass( 'is-active' );
     75            // Debounce the event callback while users are typing.
     76            clearTimeout( $.data( this, 'timer' ) );
     77            $( this ).data( 'timer', setTimeout( function() {
     78                // If custom date is not empty.
     79                if ( format.val() ) {
     80                    spinner.addClass( 'is-active' );
    7481
    75             $.post( ajaxurl, {
    76                     action: 'date_format_custom' == format.attr( 'name' ) ? 'date_format' : 'time_format',
    77                     date : format.val()
    78                 }, function( d ) { spinner.removeClass( 'is-active' ); example.text( d ); } );
    79         });
     82                    $.post( ajaxurl, {
     83                        action: 'date_format_custom' == format.attr( 'name' ) ? 'date_format' : 'time_format',
     84                        date    : format.val()
     85                    }, function( d ) { spinner.removeClass( 'is-active' ); example.text( d ); } );
     86                }
     87            }, 500 ) );
     88        } );
    8089
    8190        var languageSelect = $( '#WPLANG' );
     
    108117            };
    109118        check_disabled();
    110          section.find('input:radio').change(check_disabled);
     119        section.find( 'input:radio' ).change( check_disabled );
    111120    });
    112121</script>
Note: See TracChangeset for help on using the changeset viewer.