Make WordPress Core

Ticket #32681: 32681.0.diff

File 32681.0.diff, 6.9 KB (added by westonruter, 8 years ago)

https://github.com/xwp/wordpress-develop/pull/137

  • src/wp-admin/js/customize-controls.js

    diff --git src/wp-admin/js/customize-controls.js src/wp-admin/js/customize-controls.js
    index 8f1b9a1..a6ede27 100644
     
    7474         * @since 4.1.0
    7575         *
    7676         * @param {Object}   [params]
    77          * @param {Callback} [params.completeCallback]
     77         * @param {Function} [params.completeCallback]
    7878         */
    7979        focus = function ( params ) {
    8080                var construct, completeCallback, focus;
  • src/wp-admin/js/customize-nav-menus.js

    diff --git src/wp-admin/js/customize-nav-menus.js src/wp-admin/js/customize-nav-menus.js
    index 9db1664..bcebb65 100644
     
    13631363
    13641364                /**
    13651365                 * Expand the menu item form control.
     1366                 *
     1367                 * @since 4.5.0 Added params.completeCallback.
     1368                 *
     1369                 * @param {Object}   [params] - Optional params.
     1370                 * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
    13661371                 */
    1367                 expandForm: function() {
    1368                         this.toggleForm( true );
     1372                expandForm: function( params ) {
     1373                        this.toggleForm( true, params );
    13691374                },
    13701375
    13711376                /**
    13721377                 * Collapse the menu item form control.
     1378                 *
     1379                 * @since 4.5.0 Added params.completeCallback.
     1380                 *
     1381                 * @param {Object}   [params] - Optional params.
     1382                 * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
    13731383                 */
    1374                 collapseForm: function() {
    1375                         this.toggleForm( false );
     1384                collapseForm: function( params ) {
     1385                        this.toggleForm( false, params );
    13761386                },
    13771387
    13781388                /**
    13791389                 * Expand or collapse the menu item control.
    13801390                 *
    1381                  * @param {boolean|undefined} [showOrHide] If not supplied, will be inverse of current visibility
     1391                 * @since 4.5.0 Added params.completeCallback.
     1392                 *
     1393                 * @param {boolean}  [showOrHide] - If not supplied, will be inverse of current visibility
     1394                 * @param {Object}   [params] - Optional params.
     1395                 * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
    13821396                 */
    1383                 toggleForm: function( showOrHide ) {
     1397                toggleForm: function( showOrHide, params ) {
    13841398                        var self = this, $menuitem, $inside, complete;
    13851399
    13861400                        $menuitem = this.container;
     
    13911405
    13921406                        // Already expanded or collapsed.
    13931407                        if ( $inside.is( ':visible' ) === showOrHide ) {
     1408                                if ( params && params.completeCallback ) {
     1409                                        params.completeCallback();
     1410                                }
    13941411                                return;
    13951412                        }
    13961413
     
    14071424                                                .removeClass( 'menu-item-edit-inactive' )
    14081425                                                .addClass( 'menu-item-edit-active' );
    14091426                                        self.container.trigger( 'expanded' );
     1427
     1428                                        if ( params && params.completeCallback ) {
     1429                                                params.completeCallback();
     1430                                        }
    14101431                                };
    14111432
    14121433                                $menuitem.find( '.item-edit' ).attr( 'aria-expanded', 'true' );
     
    14191440                                                .addClass( 'menu-item-edit-inactive' )
    14201441                                                .removeClass( 'menu-item-edit-active' );
    14211442                                        self.container.trigger( 'collapsed' );
     1443
     1444                                        if ( params && params.completeCallback ) {
     1445                                                params.completeCallback();
     1446                                        }
    14221447                                };
    14231448
    14241449                                self.container.trigger( 'collapse' );
     
    14311456                /**
    14321457                 * Expand the containing menu section, expand the form, and focus on
    14331458                 * the first input in the control.
     1459                 *
     1460                 * @since 4.5.0 Added params.completeCallback.
     1461                 *
     1462                 * @param {Object}   [params] - Params object.
     1463                 * @param {Function} [params.completeCallback] - Optional callback function when focus has completed.
    14341464                 */
    1435                 focus: function() {
    1436                         var control = this, focusable;
     1465                focus: function( params ) {
     1466                        params = params || {};
     1467                        var control = this, originalCompleteCallback = params.completeCallback;
     1468
    14371469                        control.expandControlSection();
    1438                         control.expandForm();
    1439                         // Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
    1440                         focusable = control.container.find( '.menu-item-settings' ).find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' );
    1441                         focusable.first().focus();
     1470
     1471                        params.completeCallback = function() {
     1472                                var focusable;
     1473
     1474                                // Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
     1475                                focusable = control.container.find( '.menu-item-settings' ).find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' );
     1476                                focusable.first().focus();
     1477
     1478                                if ( originalCompleteCallback ) {
     1479                                        originalCompleteCallback();
     1480                                }
     1481                        };
     1482
     1483                        control.expandForm( params );
    14421484                },
    14431485
    14441486                /**
     
    24452487                api.previewer.bind( 'refresh', function() {
    24462488                        api.previewer.refresh();
    24472489                });
     2490
     2491                // Open and focus menu control.
     2492                api.previewer.bind( 'focus-nav-menu-item-control', api.Menus.focusMenuItemControl );
    24482493        } );
    24492494
    24502495        /**
  • src/wp-includes/class-wp-customize-nav-menus.php

    diff --git src/wp-includes/class-wp-customize-nav-menus.php src/wp-includes/class-wp-customize-nav-menus.php
    index f6be209..4e92166 100644
    final class WP_Customize_Nav_Menus { 
    950950                        ),
    951951                        'previewCustomizeNonce' => wp_create_nonce( 'preview-customize_' . $this->manager->get_stylesheet() ),
    952952                        'navMenuInstanceArgs'   => $this->preview_nav_menu_instance_args,
     953                        'l10n'                  => array(
     954                                'editNavMenuItemTooltip' => __( 'Shift-click to edit this menu item.' ),
     955                        ),
    953956                );
    954957
    955958                printf( '<script>var _wpCustomizePreviewNavMenusExports = %s;</script>', wp_json_encode( $exports ) );
  • src/wp-includes/js/customize-preview-nav-menus.js

    diff --git src/wp-includes/js/customize-preview-nav-menus.js src/wp-includes/js/customize-preview-nav-menus.js
    index 814c6f2..257cf19 100644
     
    1919                                active: false,
    2020                                stylesheet: ''
    2121                        },
    22                         navMenuInstanceArgs: {}
     22                        navMenuInstanceArgs: {},
     23                        l10n: {}
    2324                };
    2425
    2526        api.MenusCustomizerPreview = {
     
    6364                                        }
    6465                                }
    6566                        } );
     67
     68                        self.highlightControls();
    6669                },
    6770
    6871                /**
     
    272275                                }, this ),
    273276                                refreshDebounceDelay
    274277                        );
     278                },
     279
     280                /**
     281                 * Connect nav menu items with their corresponding controls in the pane.
     282                 */
     283                highlightControls: function() {
     284                        var selector = '.menu-item[id^=menu-item-]',
     285                                navMenuItemParts,
     286                                addTooltips;
     287
     288                        // Open expand the menu item control when shift+clicking the menu item
     289                        $( document ).on( 'click', selector, function( e ) {
     290                                if ( ! e.shiftKey ) {
     291                                        return;
     292                                }
     293
     294                                navMenuItemParts = $( this ).attr( 'id' ).match( /^menu-item-(\d+)$/ );
     295                                if ( navMenuItemParts ) {
     296                                        e.preventDefault();
     297                                        e.stopPropagation(); // Make sure a sub-nav menu item will get focused instead of parent items.
     298                                        api.preview.send( 'focus-nav-menu-item-control', parseInt( navMenuItemParts[1], 10 ) );
     299                                }
     300                        });
     301
     302                        addTooltips = function( e, params ) {
     303                                params.newContainer.find( selector ).attr( 'title', settings.l10n.editNavMenuItemTooltip );
     304                        };
     305
     306                        addTooltips( null, { newContainer: $( document.body ) } );
     307                        $( document ).on( 'customize-preview-menu-refreshed', addTooltips );
    275308                }
    276309        };
    277310