WordPress.org

Make WordPress Core

Changeset 41670


Ignore:
Timestamp:
10/02/2017 04:11:50 AM (21 months ago)
Author:
westonruter
Message:

Customize: Fix WP_Customize_Date_Time_Control to be re-usable for plugins and custom settings.

  • Allow time fields to be omitted by constructing with timeIncluded as false.
  • Ensure reportValidity is only called on a control when it is in an expanded section.
  • Rename "ampm" to "meridian".
  • Improve accessibility and fix HTML validation and style issues for both the date/time control and the preview link control.
  • Fix styling of dropdowns and clean CSS.
  • Improve accessibility of nav menus component.

Props westonruter, afercia, sayedwp, melchoyce.
Amends [41626].
See #39896.
Fixes #42022.

Location:
trunk
Files:
8 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-controls.css

    r41667 r41670  
    174174
    175175#customize-controls .date-input:invalid {
    176     border-color: red;
    177 }
    178 
    179 .date-time-fields .month-field {
    180     width: 79px;
    181 }
    182 
    183 .date-time-fields .day-field,
    184 .date-time-fields .hour-field,
    185 .date-time-fields .minute-field {
    186     width: 46px;
    187 }
    188 
    189 .date-time-fields .year-field {
    190     width: 60px;
    191 }
    192 
    193 .date-time-fields .am-pm-field {
    194     width: 53px;
     176    border-color: #dc3232;
    195177}
    196178
     
    226208.customize-copy-preview-link:before,
    227209.customize-copy-preview-link:after {
    228     content: '';
     210    content: "";
    229211    height: 28px;
    230212    position: absolute;
     
    251233    border-right: none;
    252234    text-indent: -999px;
    253     color: white;
     235    color: #fff;
    254236}
    255237
     
    259241}
    260242
    261 #customize-control-changeset_preview_link a.preview-control-element {
     243#customize-control-changeset_preview_link a {
    262244    display: inline-block;
    263245    position: absolute;
     
    270252}
    271253
    272 #customize-control-changeset_preview_link a.preview-control-element.disabled,
    273 #customize-control-changeset_preview_link a.preview-control-element.disabled:active,
    274 #customize-control-changeset_preview_link a.preview-control-element.disabled:focus,
    275 #customize-control-changeset_preview_link a.preview-control-element.disabled:visited {
     254#customize-control-changeset_preview_link a.disabled,
     255#customize-control-changeset_preview_link a.disabled:active,
     256#customize-control-changeset_preview_link a.disabled:focus,
     257#customize-control-changeset_preview_link a.disabled:visited {
    276258    color: black;
    277259    opacity: 0.4;
     
    294276}
    295277
    296 .date-time-fields label,
    297 .date-time-fields .date-time-separator {
     278.customize-control.customize-control-date_time .date-time-fields .date-input,
     279.customize-control.customize-control-date_time .date-time-fields .date-time-separator {
    298280    float: left;
    299     margin-right:5px;
     281    margin-right: 5px;
     282}
     283
     284.date-time-fields .date-input.month {
     285    width: auto;
     286    margin: 0;
     287}
     288
     289.date-time-fields .date-input.day,
     290.date-time-fields .date-input.hour,
     291.date-time-fields .date-input.minute {
     292    width: 46px;
     293}
     294
     295.date-time-fields .date-input.year {
     296    width: 60px;
     297}
     298
     299.date-time-fields .date-input.meridian {
     300    width: auto;
     301    margin: 0;
    300302}
    301303
     
    305307
    306308.date-time-fields .time-row {
    307     padding-top: 12px;
     309    margin-top: 12px;
    308310}
    309311
     
    10361038
    10371039.customize-control-dropdown-pages .new-content-item .create-item-input.invalid {
    1038     border: 1px solid #f00;
     1040    border: 1px solid #dc3232;
    10391041}
    10401042
     
    11991201}
    12001202#customize-control-show_on_front.has-error .customize-control-notifications-container {
    1201     margin-top:12px;
     1203    margin-top: 12px;
    12021204}
    12031205
     
    13841386    position: absolute;
    13851387    height: auto;
    1386     top: 0; left: 0; bottom: 0; right: 0;
     1388    top: 0;
     1389    left: 0;
     1390    bottom: 0;
     1391    right: 0;
    13871392    border: 4px solid #00a0d2;
    13881393    border-radius: 2px;
     
    26862691    }
    26872692
    2688     .date-time-fields .month-field {
     2693    .date-time-fields .date-input.month {
    26892694        width: 79px;
    26902695    }
    26912696
    2692     .date-time-fields .day-field,
    2693     .date-time-fields .hour-field,
    2694     .date-time-fields .minute-field {
     2697    .date-time-fields .date-input.day,
     2698    .date-time-fields .date-input.hour,
     2699    .date-time-fields .date-input.minute {
    26952700        width: 55px;
    26962701    }
    26972702
    2698     .date-time-fields .year-field {
     2703    .date-time-fields .date-input.year {
    26992704        width: 80px;
    27002705    }
    27012706
     2707    .date-time-fields .date-time-separator,
    27022708    .date-time-fields .date-timezone {
    27032709        line-height: 3.2;
    27042710    }
     2711
    27052712    .wp-core-ui.wp-customizer .button {
    27062713        margin-top: 12px;
  • trunk/src/wp-admin/css/customize-nav-menus.css

    r41062 r41670  
    133133.customize-control input.menu-name-field {
    134134    width: 100%; /* Override the 98% default for customizer inputs, to align with the size of menu items. */
    135     margin: 12px 0;
    136135}
    137136
  • trunk/src/wp-admin/js/customize-controls.js

    r41667 r41670  
    49304930    api.DateTimeControl = api.Control.extend({
    49314931
    4932         dateInputs: {},
    4933         inputElements: {},
    4934         invalidDate: false,
    4935 
    49364932        /**
    49374933         * Initialize behaviors.
     
    49434939            var control = this;
    49444940
    4945             _.bindAll( control, 'populateSetting', 'updateDaysForMonth', 'updateMinutesForHour' );
    4946 
    4947             control.dateInputs = control.container.find( '.date-input' );
     4941            control.inputElements = {};
     4942            control.invalidDate = false;
     4943
     4944            _.bindAll( control, 'populateSetting', 'updateDaysForMonth', 'updateMinutesForHour', 'populateDateInputs' );
    49484945
    49494946            // @todo This needs https://core.trac.wordpress.org/ticket/37964
     
    49524949            }
    49534950
     4951            // @todo Should this be? Default should be on client. The default value should be in the setting itself.
    49544952            if ( ! control.setting.get() && control.params.defaultValue ) {
    49554953                control.setting.set( control.params.defaultValue );
    49564954            }
    49574955
    4958             control.dateInputs.each( function() {
     4956            control.container.find( '.date-input' ).each( function() {
    49594957                var input = $( this ), component, element;
    49604958                component = input.data( 'component' );
    49614959                element = new api.Element( input );
    4962                 element.validate = function( value ) {
    4963                     return _.contains( [ 'am', 'pm' ], value ) ? value : parseInt( value, 10 );
    4964                 };
     4960                if ( 'meridian' === component ) {
     4961                    element.validate = function( value ) {
     4962                        if ( 'am' !== value && 'pm' !== value ) {
     4963                            return null;
     4964                        }
     4965                        return value;
     4966                    };
     4967                } else {
     4968                    element.validate = function( value ) {
     4969                        var val = parseInt( value, 10 );
     4970                        if ( isNaN( val ) ) {
     4971                            return null;
     4972                        }
     4973                        return val;
     4974                    };
     4975                }
     4976                element.bind( control.populateSetting );
    49654977                control.inputElements[ component ] = element;
    49664978                control.elements.push( element );
    49674979            } );
    49684980
    4969             control.dateInputs.on( 'input', control.populateSetting );
    49704981            control.inputElements.month.bind( control.updateDaysForMonth );
    49714982            control.inputElements.year.bind( control.updateDaysForMonth );
    4972             control.inputElements.hour.bind( control.updateMinutesForHour );
     4983            if ( control.params.includeTime ) {
     4984                control.inputElements.hour.bind( control.updateMinutesForHour );
     4985            }
    49734986            control.populateDateInputs();
     4987            control.setting.bind( control.populateDateInputs );
    49744988        },
    49754989
     
    49784992         *
    49794993         * @since 4.9.0
    4980          * @param {string} datetime Date/Time string. Accepts Y-m-d H:i:s format.
    4981          * @param {boolean} twelveHourFormat If twelve hour format array is required.
     4994         *
     4995         * @param {string} datetime - Date/Time string. Accepts Y-m-d[ H:i[:s]] format.
    49824996         * @returns {object|null} Returns object containing date components or null if parse error.
    49834997         */
    4984         parseDateTime: function parseDateTime( datetime, twelveHourFormat ) {
    4985             var matches, date, midDayHour = 12;
     4998        parseDateTime: function parseDateTime( datetime ) {
     4999            var control = this, matches, date, midDayHour = 12;
    49865000
    49875001            if ( datetime ) {
    4988                 matches = datetime.match( /^(\d\d\d\d)-(\d\d)-(\d\d) (\d\d):(\d\d):(\d\d)$/ );
     5002                matches = datetime.match( /^(\d\d\d\d)-(\d\d)-(\d\d)(?: (\d\d):(\d\d)(?::(\d\d))?)?$/ );
    49895003            }
    49905004
     
    49995013                month: matches.shift(),
    50005014                day: matches.shift(),
    5001                 hour: matches.shift(),
    5002                 minute: matches.shift(),
    5003                 second: matches.shift()
     5015                hour: matches.shift() || '00',
     5016                minute: matches.shift() || '00',
     5017                second: matches.shift() || '00'
    50045018            };
    50055019
    5006             if ( twelveHourFormat ) {
     5020            if ( control.params.includeTime && control.params.twelveHourFormat ) {
    50075021                date.hour = parseInt( date.hour, 10 );
    5008                 date.ampm = date.hour >= midDayHour ? 'pm' : 'am';
     5022                date.meridian = date.hour >= midDayHour ? 'pm' : 'am';
    50095023                date.hour = date.hour % midDayHour ? String( date.hour % midDayHour ) : String( midDayHour );
    5010                 delete date.second;
     5024                delete date.second; // @todo Why only if twelveHourFormat?
    50115025            }
    50125026
     
    50215035         */
    50225036        validateInputs: function validateInputs() {
    5023             var control = this, errorMessage;
     5037            var control = this, errorMessage, components;
    50245038
    50255039            control.invalidDate = false;
    50265040
    5027             _.each( [ 'day', 'hour', 'year', 'minute' ], function( component ) {
    5028                 var element, el, max, min, maxLength, value;
     5041            components = [ 'year', 'day' ];
     5042            if ( control.params.includeTime ) {
     5043                components.push( 'hour', 'minute' );
     5044            }
     5045
     5046            _.each( components, function( component ) {
     5047                var element, el, max, min, value;
    50295048
    50305049                if ( ! control.invalidDate ) {
     
    50335052                    max = parseInt( element.element.attr( 'max' ), 10 );
    50345053                    min = parseInt( element.element.attr( 'min' ), 10 );
    5035                     maxLength = parseInt( element.element.attr( 'maxlength' ), 10 );
    50365054                    value = element();
    5037                     control.invalidDate = value > max || value < min || String( value ).length > maxLength;
     5055                    control.invalidDate = value > max || value < min;
    50385056                    errorMessage = control.invalidDate ? api.l10n.invalid + ' ' + component : '';
    50395057
    50405058                    el.setCustomValidity( errorMessage );
    5041                     _.result( el, 'reportValidity' );
     5059                    if ( ! control.section() || api.section.has( control.section() ) && api.section( control.section() ).expanded() ) {
     5060                        _.result( el, 'reportValidity' );
     5061                    }
    50425062                }
    50435063            } );
     
    50785098            var control = this, maxHours = 24, minuteEl;
    50795099
    5080             if ( control.inputElements.ampm ) {
     5100            if ( control.inputElements.meridian ) {
    50815101                return;
    50825102            }
     
    50875107                control.inputElements.minute( 0 );
    50885108                minuteEl.data( 'default-max', minuteEl.attr( 'max' ) );
    5089                 minuteEl.data( 'default-maxlength', minuteEl.attr( 'maxlength' ) );
    50905109                minuteEl.attr( 'max', '0' );
    50915110            } else if ( minuteEl.data( 'default-max' ) ) {
    50925111                minuteEl.attr( 'max', minuteEl.data( 'default-max' ) );
    5093                 minuteEl.attr( 'maxlength', minuteEl.data( 'maxlength' ) );
    50945112            }
    50955113        },
     
    51435161            };
    51445162
    5145             hourInTwentyFourHourFormat = control.inputElements.ampm ? control.convertHourToTwentyFourHourFormat( control.inputElements.hour(), control.inputElements.ampm() ) : control.inputElements.hour();
    5146             dateFormat = [ 'year', '-', 'month', '-', 'day', ' ', pad( hourInTwentyFourHourFormat, 2 ), ':', 'minute', ':', '00' ];
     5163            dateFormat = [ 'year', '-', 'month', '-', 'day' ];
     5164            if ( control.params.includeTime ) {
     5165                hourInTwentyFourHourFormat = control.inputElements.meridian ? control.convertHourToTwentyFourHourFormat( control.inputElements.hour(), control.inputElements.meridian() ) : control.inputElements.hour();
     5166                dateFormat = dateFormat.concat( [ ' ', pad( hourInTwentyFourHourFormat, 2 ), ':', 'minute', ':', '00' ] );
     5167            }
    51475168
    51485169            _.each( dateFormat, function( component ) {
     
    51685189         *
    51695190         * @since 4.9.0
    5170          * @param {string} hourInTwelveHourFormat Hour in twelve hour format.
    5171          * @param {string} ampm am/pm
    5172          * @return {string} Hour in twenty four hour format.
    5173          */
    5174         convertHourToTwentyFourHourFormat: function convertHour( hourInTwelveHourFormat, ampm ) {
     5191         * @param {string} hourInTwelveHourFormat - Hour in twelve hour format.
     5192         * @param {string} meridian - Either 'am' or 'pm'.
     5193         * @returns {string} Hour in twenty four hour format.
     5194         */
     5195        convertHourToTwentyFourHourFormat: function convertHour( hourInTwelveHourFormat, meridian ) {
    51755196            var hourInTwentyFourHourFormat, hour, midDayHour = 12;
    51765197
    51775198            hour = parseInt( hourInTwelveHourFormat, 10 );
    5178 
    5179             if ( 'pm' === ampm && hour < midDayHour ) {
     5199            if ( isNaN( hour ) ) {
     5200                return '';
     5201            }
     5202
     5203            if ( 'pm' === meridian && hour < midDayHour ) {
    51805204                hourInTwentyFourHourFormat = hour + midDayHour;
    5181             } else if ( 'am' === ampm && midDayHour === hour ) {
     5205            } else if ( 'am' === meridian && midDayHour === hour ) {
    51825206                hourInTwentyFourHourFormat = hour - midDayHour;
    51835207            } else {
     
    51975221            var control = this, parsed;
    51985222
    5199             parsed = control.parseDateTime( control.setting.get(), control.params.twelveHourFormat );
     5223            parsed = control.parseDateTime( control.setting.get() );
    52005224
    52015225            if ( ! parsed ) {
     
    52465270    api.PreviewLinkControl = api.Control.extend({
    52475271
    5248         previewElements: {},
    5249 
    52505272        /**
    52515273         * Override the templateSelector before embedding the control into the page.
     
    52675289         */
    52685290        ready: function ready() {
    5269             var control = this, element, component, node, link, input, button;
     5291            var control = this, element, component, node, url, input, button;
    52705292
    52715293            _.bindAll( control, 'updatePreviewLink' );
     
    52745296                control.setting = new api.Value();
    52755297            }
     5298
     5299            control.previewElements = {};
    52765300
    52775301            control.container.find( '.preview-control-element' ).each( function() {
     
    52835307            } );
    52845308
    5285             link = control.previewElements.link;
     5309            url = control.previewElements.url;
    52865310            input = control.previewElements.input;
    52875311            button = control.previewElements.button;
    52885312
    52895313            input.link( control.setting );
    5290             link.link( control.setting );
    5291 
    5292             link.bind( function( value ) {
    5293                 link.element.attr( 'href', value );
    5294                 link.element.attr( 'target', api.settings.changeset.uuid );
     5314            url.link( control.setting );
     5315
     5316            url.bind( function( value ) {
     5317                url.element.parent().attr( {
     5318                    href: value,
     5319                    target: api.settings.changeset.uuid
     5320                } );
    52955321            } );
    52965322
    52975323            api.bind( 'ready', control.updatePreviewLink );
    5298             api.bind( 'change', control.updatePreviewLink );
    52995324            api.state( 'saved' ).bind( control.updatePreviewLink );
     5325            api.state( 'changesetStatus' ).bind( control.updatePreviewLink );
    53005326
    53015327            button.element.on( 'click', function( event ) {
     
    53085334            } );
    53095335
    5310             link.element.on( 'click', function( event ) {
    5311                 if ( link.element.hasClass( 'disabled' ) ) {
     5336            url.element.parent().on( 'click', function( event ) {
     5337                if ( $( this ).hasClass( 'disabled' ) ) {
    53125338                    event.preventDefault();
    53135339                }
     
    53305356            var control = this, unsavedDirtyValues;
    53315357
    5332             unsavedDirtyValues = ! _.isEmpty( api.dirtyValues( {
    5333                 unsaved: true
    5334             } ) );
     5358            unsavedDirtyValues = ! api.state( 'saved' ).get() || '' === api.state( 'changesetStatus' ).get() || 'auto-draft' === api.state( 'changesetStatus' ).get();
    53355359
    53365360            control.toggleSaveNotification( unsavedDirtyValues );
    5337             control.previewElements.link.element.toggleClass( 'disabled', unsavedDirtyValues );
     5361            control.previewElements.url.element.parent().toggleClass( 'disabled', unsavedDirtyValues );
    53385362            control.previewElements.button.element.prop( 'disabled', unsavedDirtyValues );
    53395363            control.setting.set( api.previewer.getFrontendPreviewUrl() );
     
    65096533                    } );
    65106534
    6511                     /**
    6512                      * Find all invalid setting less controls with notification type error.
    6513                      */
     6535                    // Find all invalid setting less controls with notification type error.
    65146536                    api.control.each( function( control ) {
    65156537                        if ( ! control.setting || ! control.setting.id && control.active.get() ) {
     
    79317953        })();
    79327954
    7933         /**
    7934          * Publish settings section and controls.
    7935          */
     7955        // Publish settings section and controls.
    79367956        api.control( 'changeset_status', 'changeset_scheduled_date', function( statusControl, dateControl ) {
    79377957            $.when( statusControl.deferred.embedded, dateControl.deferred.embedded ).done( function() {
  • trunk/src/wp-includes/class-wp-customize-manager.php

    r41667 r41670  
    36233623        </script>
    36243624        <script type="text/html" id="tmpl-customize-preview-link-control" >
    3625             <span class="customize-control-title">
    3626                 <label><?php esc_html_e( 'Share Preview Link' ); ?></label>
    3627             </span>
    3628             <span class="description customize-control-description"><?php esc_html_e( 'See how changes would look live on your website, and share the preview with people who can\'t access the Customizer.' ); ?></span>
     3625            <# var elementPrefix = _.uniqueId( 'el' ) + '-' #>
     3626            <p class="customize-control-title">
     3627                <?php esc_html_e( 'Share Preview Link' ); ?>
     3628            </p>
     3629            <p class="description customize-control-description"><?php esc_html_e( 'See how changes would look live on your website, and share the preview with people who can\'t access the Customizer.' ); ?></p>
    36293630            <div class="customize-control-notifications-container"></div>
    36303631            <div class="preview-link-wrapper">
    3631                 <label>
    3632                     <span class="screen-reader-text"><?php esc_html_e( 'Preview Link' ); ?></span>
    3633                     <a class="preview-control-element" data-component="link" href="" target=""></a>
    3634                     <input readonly class="preview-control-element" data-component="input" value="test" >
    3635                     <button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="<?php esc_attr_e( 'Copy' ); ?>" data-copied-text="<?php esc_attr_e( 'Copied' ); ?>" ><?php esc_html_e( 'Copy' ); ?></button>
    3636                 </label>
     3632                <label for="{{ elementPrefix }}customize-preview-link-input" class="screen-reader-text"><?php esc_html_e( 'Preview Link' ); ?></label>
     3633                <a href="" target="">
     3634                    <span class="preview-control-element" data-component="url"></span>
     3635                    <span class="screen-reader-text"><?php _e( '(opens in a new window)' ); ?></span>
     3636                </a>
     3637                <input id="{{ elementPrefix }}customize-preview-link-input" readonly class="preview-control-element" data-component="input">
     3638                <button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="<?php esc_attr_e( 'Copy' ); ?>" data-copied-text="<?php esc_attr_e( 'Copied' ); ?>" ><?php esc_html_e( 'Copy' ); ?></button>
    36373639            </div>
    36383640        </script>
     
    42374239            $initial_date = current_time( 'mysql', false );
    42384240        }
     4241
    42394242        $this->add_control( new WP_Customize_Date_Time_Control( $this, 'changeset_scheduled_date', array(
    42404243            'section' => 'publish_settings',
     
    42444247            'min_year' => date( 'Y' ),
    42454248            'allow_past_date' => false,
     4249            'include_time' => true,
    42464250            'twelve_hour_format' => false !== stripos( get_option( 'time_format' ), 'a' ),
    42474251            'description' => __( 'Schedule your customization changes to publish ("go live") at a future date.' ),
  • trunk/src/wp-includes/class-wp-customize-nav-menus.php

    r41353 r41670  
    675675
    676676        $this->manager->add_control( 'new_menu_name', array(
    677             'label'       => '',
     677            'label'       => __( 'New menu name' ),
    678678            'section'     => 'add_menu',
    679679            'type'        => 'text',
     
    681681            'input_attrs' => array(
    682682                'class'       => 'menu-name-field',
    683                 'placeholder' => __( 'New menu name' ),
    684683            ),
    685684        ) );
     
    10181017                    <?php if ( current_user_can( $post_type_obj->cap->create_posts ) && current_user_can( $post_type_obj->cap->publish_posts ) ) : ?>
    10191018                        <div class="new-content-item">
    1020                             <input type="text" class="create-item-input" placeholder="<?php echo esc_attr( $post_type_obj->labels->add_new_item ); ?>">
     1019                            <label for="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="screen-reader-text"><?php echo esc_html( $post_type_obj->labels->add_new_item ); ?></label>
     1020                            <input type="text" id="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="create-item-input" placeholder="<?php echo esc_attr( $post_type_obj->labels->add_new_item ); ?>">
    10211021                            <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
    10221022                        </div>
  • trunk/src/wp-includes/customize/class-wp-customize-date-time-control.php

    r41626 r41670  
    5050
    5151    /**
     52     * Whether hours, minutes, and meridian should be shown.
     53     *
     54     * @since 4.9.0
     55     * @var boolean
     56     */
     57    public $include_time = true;
     58
     59    /**
    5260     * If set to false the control will appear in 24 hour format,
    5361     * the value will still be saved in Y-m-d H:i:s format.
     
    8492        $data['maxYear'] = intval( $this->max_year );
    8593        $data['minYear'] = intval( $this->min_year );
    86         $data['allowPastDate'] = $this->allow_past_date ? true : false;
    87         $data['twelveHourFormat'] = $this->twelve_hour_format ? true : false;
     94        $data['allowPastDate'] = (bool) $this->allow_past_date;
     95        $data['twelveHourFormat'] = (bool) $this->twelve_hour_format;
     96        $data['includeTime'] = (bool) $this->include_time;
    8897        $data['defaultValue'] = $this->default_value;
    8998
     
    102111
    103112        <# _.defaults( data, <?php echo wp_json_encode( $data ); ?> ); #>
     113        <# var idPrefix = _.uniqueId( 'el' ) + '-'; #>
    104114
    105115        <span class="customize-control-title">
    106             <label>{{ data.label }}</label>
     116            {{ data.label }}
    107117        </span>
    108118        <div class="customize-control-notifications-container"></div>
    109119        <span class="description customize-control-description">{{ data.description }}</span>
    110120        <div class="date-time-fields">
    111             <div class="day-row">
    112                 <span class="title-day"><?php esc_html_e( 'Day' ); ?></span>
     121            <fieldset class="day-row">
     122                <legend class="title-day"><?php esc_html_e( 'Date' ); ?></legend>
    113123                <div class="day-fields clear">
    114                     <label class="month-field">
    115                         <span class="screen-reader-text"><?php esc_html_e( 'Month' ); ?></span>
    116                             <select class="date-input month" data-component="month">
    117                                 <# _.each( data.month_choices, function( choice ) {
    118                                     if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
    119                                         text = choice.text;
    120                                         value = choice.value;
    121                                     }
    122                                     #>
    123                                     <option value="{{ value }}" >
    124                                         {{ text }}
    125                                     </option>
    126                                 <# } ); #>
     124                    <label for="{{ idPrefix }}date-time-month" class="screen-reader-text"><?php esc_html_e( 'Month' ); ?></label>
     125                    <select id="{{ idPrefix }}date-time-month" class="date-input month" data-component="month">
     126                        <# _.each( data.month_choices, function( choice ) {
     127                            if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
     128                                text = choice.text;
     129                                value = choice.value;
     130                            }
     131                            #>
     132                            <option value="{{ value }}" >
     133                                {{ text }}
     134                            </option>
     135                        <# } ); #>
     136                    </select>
     137                    <label for="{{ idPrefix }}date-time-day" class="screen-reader-text"><?php esc_html_e( 'Day' ); ?></label>
     138                    <input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31" />
     139                    <span class="time-special-char date-time-separator">,</span>
     140                    <label for="{{ idPrefix }}date-time-year" class="screen-reader-text"><?php esc_html_e( 'Year' ); ?></label>
     141                    <input id="{{ idPrefix }}date-time-year" type="number" size="4" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}">
     142                </div>
     143            </fieldset>
     144            <# if ( data.includeTime ) { #>
     145                <fieldset class="time-row clear">
     146                    <legend class="title-time"><?php esc_html_e( 'Time' ); ?></legend>
     147                    <div class="time-fields clear">
     148                        <label for="{{ idPrefix }}date-time-hour" class="screen-reader-text"><?php esc_html_e( 'Hour' ); ?></label>
     149                        <# var maxHour = data.twelveHourFormat ? 12 : 24; #>
     150                        <input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}">
     151                        <span class="time-special-char date-time-separator">:</span>
     152                        <label for="{{ idPrefix }}date-time-minute" class="screen-reader-text"><?php esc_html_e( 'Minute' ); ?></label>
     153                        <input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59">
     154                        <# if ( data.twelveHourFormat ) { #>
     155                            <label for="{{ idPrefix }}date-time-meridian" class="screen-reader-text"><?php esc_html_e( 'Meridian' ); ?></label>
     156                            <select id="{{ idPrefix }}date-time-meridian" class="date-input meridian" data-component="meridian">
     157                                <option value="am"><?php esc_html_e( 'AM' ); ?></option>
     158                                <option value="pm"><?php esc_html_e( 'PM' ); ?></option>
    127159                            </select>
    128                     </label>
    129                     <label class="day-field">
    130                         <span class="screen-reader-text"><?php esc_html_e( 'Day' ); ?></span>
    131                         <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31"" />
    132                     </label>
    133                     <span class="time-special-char date-time-separator">,</span>
    134                     <label class="year-field">
    135                         <span class="screen-reader-text"><?php esc_html_e( 'Year' ); ?></span>
    136                         <# var maxYearLength = String( data.maxYear ).length; #>
    137                         <input type="number" size="4" maxlength="{{ maxYearLength }}" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}" />
    138                     </label>
    139                 </div>
    140             </div>
    141             <div class="time-row clear">
    142                 <span class="title-time"><?php esc_html_e( 'Time' ); ?></span>
    143                 <div class="time-fields clear">
    144                     <label class="hour-field">
    145                         <span class="screen-reader-text"><?php esc_html_e( 'Hour' ); ?></span>
    146                         <# var maxHour = data.twelveHourFormat ? 12 : 24; #>
    147                         <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}"" />
    148                     </label>
    149                     <span class="time-special-char date-time-separator">:</span>
    150                     <label class="minute-field">
    151                         <span class="screen-reader-text"><?php esc_html_e( 'Minute' ); ?></span>
    152                         <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59" />
    153                     </label>
    154                     <# if ( data.twelveHourFormat ) { #>
    155                     <label class="am-pm-field">
    156                         <span class="screen-reader-text"><?php esc_html_e( 'AM / PM' ); ?></span>
    157                         <select class="date-input" data-component="ampm">
    158                             <option value="am"><?php esc_html_e( 'AM' ); ?></option>
    159                             <option value="pm"><?php esc_html_e( 'PM' ); ?></option>
    160                         </select>
    161                     </label>
    162                     <# } #>
    163                     <abbr class="date-timezone" aria-label="<?php esc_attr_e( 'Timezone' ); ?>" title="<?php echo esc_attr( $timezone_info['description'] ); ?>"><?php echo esc_html( $timezone_info['abbr'] ); ?></abbr>
    164                 </div>
    165             </div>
     160                        <# } #>
     161                        <abbr class="date-timezone" aria-label="<?php esc_attr_e( 'Timezone' ); ?>" title="<?php echo esc_attr( $timezone_info['description'] ); ?>"><?php echo esc_html( $timezone_info['abbr'] ); ?></abbr>
     162                    </div>
     163                </fieldset>
     164            <# } #>
    166165        </div>
    167166        <?php
  • trunk/tests/qunit/index.html

    r41626 r41670  
    873873            <# } #>
    874874        </script>
    875     <script type="text/html" id="tmpl-customize-control-date_time-content">
    876 
    877         <# _.defaults( data, {"settings":[],"type":"date_time","priority":10,"active":true,"section":"","content":"<li id=\"customize-control-temp\" class=\"customize-control customize-control-date_time\">\n\t\t\t\t\t<\/li>","label":"","description":"","instanceNumber":69,"maxYear":9999,"minYear":1000,"allowPastDate":true,"twelveHourFormat":true,"defaultValue":null,"month_choices":{"1":{"text":"1-Jan","value":1},"2":{"text":"2-Feb","value":2},"3":{"text":"3-Mar","value":3},"4":{"text":"4-Apr","value":4},"5":{"text":"5-May","value":5},"6":{"text":"6-Jun","value":6},"7":{"text":"7-Jul","value":7},"8":{"text":"8-Aug","value":8},"9":{"text":"9-Sep","value":9},"10":{"text":"10-Oct","value":10},"11":{"text":"11-Nov","value":11},"12":{"text":"12-Dec","value":12}}} ); #>
     875        <script type="text/html" id="tmpl-customize-control-date_time-content">
     876
     877        <# _.defaults( data, {"settings":[],"type":"date_time","priority":10,"active":true,"section":"","content":"<li id=\"customize-control-temp\" class=\"customize-control customize-control-date_time\">\n\t\t\t\t\t<\/li>","label":"","description":"","instanceNumber":73,"maxYear":9999,"minYear":1000,"allowPastDate":true,"twelveHourFormat":true,"includeTime":true,"defaultValue":null,"month_choices":{"1":{"text":"1-Jan","value":1},"2":{"text":"2-Feb","value":2},"3":{"text":"3-Mar","value":3},"4":{"text":"4-Apr","value":4},"5":{"text":"5-May","value":5},"6":{"text":"6-Jun","value":6},"7":{"text":"7-Jul","value":7},"8":{"text":"8-Aug","value":8},"9":{"text":"9-Sep","value":9},"10":{"text":"10-Oct","value":10},"11":{"text":"11-Nov","value":11},"12":{"text":"12-Dec","value":12}}} ); #>
     878        <# var idPrefix = _.uniqueId( 'el' ) + '-'; #>
    878879
    879880        <span class="customize-control-title">
    880             <label>{{ data.label }}</label>
     881            {{ data.label }}
    881882        </span>
    882883        <div class="customize-control-notifications-container"></div>
    883884        <span class="description customize-control-description">{{ data.description }}</span>
    884885        <div class="date-time-fields">
    885             <div class="day-row">
    886                 <span class="title-day">Day</span>
     886            <fieldset class="day-row">
     887                <legend class="title-day">Date</legend>
    887888                <div class="day-fields clear">
    888                     <label class="month-field">
    889                         <span class="screen-reader-text">Month</span>
    890                         <select class="date-input month" data-component="month">
    891                             <# _.each( data.month_choices, function( choice ) {
    892                                     if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
    893                                     text = choice.text;
    894                                     value = choice.value;
    895                                     }
    896                                     #>
    897                                 <option value="{{ value }}" >
    898                                     {{ text }}
    899                                 </option>
    900                                 <# } ); #>
    901                         </select>
    902                     </label>
    903                     <label class="day-field">
    904                         <span class="screen-reader-text">Day</span>
    905                         <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31"" />
    906                     </label>
     889                    <label for="{{ idPrefix }}date-time-month" class="screen-reader-text">Month</label>
     890                    <select id="{{ idPrefix }}date-time-month" class="date-input month" data-component="month">
     891                        <# _.each( data.month_choices, function( choice ) {
     892                                if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
     893                                text = choice.text;
     894                                value = choice.value;
     895                                }
     896                                #>
     897                            <option value="{{ value }}" >
     898                                {{ text }}
     899                            </option>
     900                        <# } ); #>
     901                    </select>
     902                    <label for="{{ idPrefix }}date-time-day" class="screen-reader-text">Day</label>
     903                    <input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31" />
    907904                    <span class="time-special-char date-time-separator">,</span>
    908                     <label class="year-field">
    909                         <span class="screen-reader-text">Year</span>
    910                         <# var maxYearLength = String( data.maxYear ).length; #>
    911                             <input type="number" size="4" maxlength="{{ maxYearLength }}" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}" />
    912                     </label>
    913                 </div>
    914             </div>
    915             <div class="time-row clear">
    916                 <span class="title-time">Time</span>
    917                 <div class="time-fields clear">
    918                     <label class="hour-field">
    919                         <span class="screen-reader-text">Hour</span>
     905                    <label for="{{ idPrefix }}date-time-year" class="screen-reader-text">Year</label>
     906                    <input id="{{ idPrefix }}date-time-year" type="number" size="4" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}">
     907                </div>
     908            </fieldset>
     909            <# if ( data.includeTime ) { #>
     910                <fieldset class="time-row clear">
     911                    <legend class="title-time">Time</legend>
     912                    <div class="time-fields clear">
     913                        <label for="{{ idPrefix }}date-time-hour" class="screen-reader-text">Hour</label>
    920914                        <# var maxHour = data.twelveHourFormat ? 12 : 24; #>
    921                             <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}"" />
    922                     </label>
    923                     <span class="time-special-char date-time-separator">:</span>
    924                     <label class="minute-field">
    925                         <span class="screen-reader-text">Minute</span>
    926                         <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59" />
    927                     </label>
    928                     <# if ( data.twelveHourFormat ) { #>
    929                         <label class="am-pm-field">
    930                             <span class="screen-reader-text">AM / PM</span>
    931                             <select class="date-input" data-component="ampm">
     915                        <input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}">
     916                        <span class="time-special-char date-time-separator">:</span>
     917                        <label for="{{ idPrefix }}date-time-minute" class="screen-reader-text">Minute</label>
     918                        <input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59">
     919                        <# if ( data.twelveHourFormat ) { #>
     920                            <label for="{{ idPrefix }}date-time-meridian" class="screen-reader-text">Meridian</label>
     921                            <select id="{{ idPrefix }}date-time-meridian" class="date-input meridian" data-component="meridian">
    932922                                <option value="am">AM</option>
    933923                                <option value="pm">PM</option>
    934924                            </select>
    935                         </label>
    936925                        <# } #>
    937                     <abbr class="date-timezone" aria-label="Timezone" title="Timezone is Asia/Kolkata (IST), currently UTC+5:30.">IST</abbr>
    938                 </div>
    939             </div>
     926                        <abbr class="date-timezone" aria-label="Timezone" title="Timezone is America/Los Angeles (PDT), currently UTC-7.">PDT</abbr>
     927                    </div>
     928                </fieldset>
     929            <# } #>
    940930        </div>
    941931    </script>
    942932    <script type="text/html" id="tmpl-customize-preview-link-control" >
    943         <span class="customize-control-title">
    944         <label>Share Preview Link</label>
    945     </span>
    946         <span class="description customize-control-description">See how changes would look live on your website, and share the preview with people who can&#039;t access the Customizer.</span>
     933        <# var elementPrefix = _.uniqueId( 'el' ) + '-' #>
     934        <p class="customize-control-title">
     935            Share Preview Link          </p>
     936        <p class="description customize-control-description">See how changes would look live on your website, and share the preview with people who can&#039;t access the Customizer.</p>
    947937        <div class="customize-control-notifications-container"></div>
    948938        <div class="preview-link-wrapper">
    949             <label>
    950                 <span class="screen-reader-text">Preview Link</span>
    951                 <a class="preview-control-element" data-component="link" href="" target=""></a>
    952                 <input readonly class="preview-control-element" data-component="input" value="test" >
    953                 <button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="Copy" data-copied-text="Copied" >Copy</button>
    954             </label>
     939            <label for="{{ elementPrefix }}customize-preview-link-input" class="screen-reader-text">Preview Link</label>
     940            <a href="" target="">
     941                <span class="preview-control-element" data-component="url"></span>
     942                <span class="screen-reader-text">(opens in a new window)</span>
     943            </a>
     944            <input id="{{ elementPrefix }}customize-preview-link-input" readonly class="preview-control-element" data-component="input">
     945            <button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="Copy" data-copied-text="Copied" >Copy</button>
    955946        </div>
    956947    </script>
  • trunk/tests/qunit/wp-admin/js/customize-controls.js

    r41626 r41670  
    703703        var control, controlId = 'date_time', section, sectionId = 'fixture-section',
    704704            datetime = '2599-08-06 18:12:13', dateTimeArray, dateTimeArrayInampm, timeString,
    705             day, year, month, minute, ampm, hour;
     705            day, year, month, minute, meridian, hour;
    706706
    707707        section = wp.customize.section( sectionId );
     
    711711                section: section.id,
    712712                type: 'date_time',
     713                includeTime: true,
    713714                content: '<li id="customize-control-' + controlId + '" class="customize-control"></li>',
    714715                defaultValue: datetime
     
    729730        minute = control.inputElements.minute;
    730731        hour = control.inputElements.hour;
    731         ampm = control.inputElements.ampm;
     732        meridian = control.inputElements.meridian;
    732733
    733734        year( '23' );
    734735        assert.equal( typeof year(), 'number', 'Should always return integer' );
    735736
     737        month( '8' );
    736738        month( 'test' );
    737         assert.notOk( month(), 'Should not accept text' );
     739        assert.equal( 8, month(), 'Should not accept text' );
    738740
    739741        // Test control.parseDateTime();
     742        control.params.twelveHourFormat = false;
    740743        dateTimeArray = control.parseDateTime( datetime );
    741744        assert.deepEqual( dateTimeArray, {
     
    748751        } );
    749752
    750         dateTimeArrayInampm = control.parseDateTime( datetime, true );
     753        control.params.twelveHourFormat = true;
     754        dateTimeArrayInampm = control.parseDateTime( datetime );
    751755        assert.deepEqual( dateTimeArrayInampm, {
    752756            year: '2599',
     
    754758            hour: '6',
    755759            minute: '12',
    756             ampm: 'pm',
     760            meridian: 'pm',
    757761            day: '06'
    758762        } );
     
    763767        hour( '3' );
    764768        minute( '44' );
    765         ampm( 'am' );
     769        meridian( 'am' );
    766770
    767771        // Test control.convertInputDateToString().
     
    769773        assert.equal( timeString, '2010-12-18 03:44:00' );
    770774
    771         ampm( 'pm' );
     775        meridian( 'pm' );
    772776        timeString = control.convertInputDateToString();
    773777        assert.equal( timeString, '2010-12-18 15:44:00' );
     778
     779        control.params.includeTime = false;
     780        timeString = control.convertInputDateToString();
     781        assert.equal( timeString, '2010-12-18' );
     782        control.params.includeTime = true;
    774783
    775784        // Test control.updateDaysForMonth();.
     
    797806
    798807        // Test control.populateDateInputs();
     808        control.setting._value = '2000-12-30 12:34:56';
    799809        control.populateDateInputs();
    800         control.dateInputs.each( function() {
    801             var node = jQuery( this );
    802             assert.equal( node.val(), control.inputElements[ node.data( 'component' ) ].get() );
    803         } );
     810        assert.equal( '2000', control.inputElements.year.get() );
     811        assert.equal( '12', control.inputElements.month.get() );
     812        assert.equal( '30', control.inputElements.day.get() );
     813        assert.equal( '12', control.inputElements.hour.get() );
     814        assert.equal( '34', control.inputElements.minute.get() );
     815        assert.equal( 'pm', control.inputElements.meridian.get() );
    804816
    805817        // Test control.validateInputs();
     
    819831        hour( 4 );
    820832        minute( 20 );
    821         ampm( 'pm' );
     833        meridian( 'pm' );
    822834        control.populateSetting();
    823835        assert.equal( control.setting(), '2018-11-02 16:20:00' );
     
    837849        hour( 4 );
    838850        minute( 20 );
    839         ampm( 'pm' );
     851        meridian( 'pm' );
    840852        assert.ok( control.isFutureDate() );
    841853
     
    849861        hour( 24 );
    850862        minute( 32 );
    851         control.inputElements.ampm = false; // Because it works only when the time is twenty four hour format.
     863        control.inputElements.meridian = false; // Because it works only when the time is twenty four hour format.
    852864        control.updateMinutesForHour();
    853865        assert.deepEqual( minute(), 0 );
     
    911923
    912924                    assert.equal( control.previewElements.input(), newLink );
    913                     assert.equal( control.previewElements.link(), newLink );
    914                     assert.equal( control.previewElements.link.element.attr( 'href' ), newLink );
    915                     assert.equal( control.previewElements.link.element.attr( 'target' ), wp.customize.settings.changeset.uuid );
     925                    assert.equal( control.previewElements.url(), newLink );
     926                    assert.equal( control.previewElements.url.element.parent().attr( 'href' ), newLink );
     927                    assert.equal( control.previewElements.url.element.parent().attr( 'target' ), wp.customize.settings.changeset.uuid );
    916928
    917929                    // Test control.toggleSaveNotification().
Note: See TracChangeset for help on using the changeset viewer.