WordPress.org

Make WordPress Core

Changeset 36383


Ignore:
Timestamp:
01/22/2016 09:20:26 PM (5 years ago)
Author:
westonruter
Message:

Customizer: Add shift-click on nav menu items in preview to focus on corresponding nav menu item controls in pane.

Add missing params.completeCallback to MenuItemControl.focus() for parity with Control.focus(). Also adds params to MenuItemControl.expandForm, MenuItemControl.collapseForm(), and MenuItemControl.toggleForm().

Props MattGeri, westonruter.
Fixes #32681.

Location:
trunk/src
Files:
4 edited

Legend:

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

    r36287 r36383  
    7575     *
    7676     * @param {Object}   [params]
    77      * @param {Callback} [params.completeCallback]
     77     * @param {Function} [params.completeCallback]
    7878     */
    7979    focus = function ( params ) {
  • trunk/src/wp-admin/js/customize-nav-menus.js

    r35584 r36383  
    13641364        /**
    13651365         * Expand the menu item form control.
    1366          */
    1367         expandForm: function() {
    1368             this.toggleForm( true );
     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.
     1371         */
     1372        expandForm: function( params ) {
     1373            this.toggleForm( true, params );
    13691374        },
    13701375
    13711376        /**
    13721377         * Collapse the menu item form control.
    1373          */
    1374         collapseForm: function() {
    1375             this.toggleForm( false );
     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.
     1383         */
     1384        collapseForm: function( params ) {
     1385            this.toggleForm( false, params );
    13761386        },
    13771387
     
    13791389         * Expand or collapse the menu item control.
    13801390         *
    1381          * @param {boolean|undefined} [showOrHide] If not supplied, will be inverse of current visibility
    1382          */
    1383         toggleForm: function( showOrHide ) {
     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.
     1396         */
     1397        toggleForm: function( showOrHide, params ) {
    13841398            var self = this, $menuitem, $inside, complete;
    13851399
     
    13921406            // Already expanded or collapsed.
    13931407            if ( $inside.is( ':visible' ) === showOrHide ) {
     1408                if ( params && params.completeCallback ) {
     1409                    params.completeCallback();
     1410                }
    13941411                return;
    13951412            }
     
    14081425                        .addClass( 'menu-item-edit-active' );
    14091426                    self.container.trigger( 'expanded' );
     1427
     1428                    if ( params && params.completeCallback ) {
     1429                        params.completeCallback();
     1430                    }
    14101431                };
    14111432
     
    14201441                        .removeClass( 'menu-item-edit-active' );
    14211442                    self.container.trigger( 'collapsed' );
     1443
     1444                    if ( params && params.completeCallback ) {
     1445                        params.completeCallback();
     1446                    }
    14221447                };
    14231448
     
    14321457         * Expand the containing menu section, expand the form, and focus on
    14331458         * the first input in the control.
    1434          */
    1435         focus: function() {
    1436             var control = this, focusable;
     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.
     1464         */
     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
     
    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
  • trunk/src/wp-includes/class-wp-customize-nav-menus.php

    r36379 r36383  
    947947            'previewCustomizeNonce' => wp_create_nonce( 'preview-customize_' . $this->manager->get_stylesheet() ),
    948948            'navMenuInstanceArgs'   => $this->preview_nav_menu_instance_args,
     949            'l10n'                  => array(
     950                'editNavMenuItemTooltip' => __( 'Shift-click to edit this menu item.' ),
     951            ),
    949952        );
    950953
  • trunk/src/wp-includes/js/customize-preview-nav-menus.js

    r33859 r36383  
    2020                stylesheet: ''
    2121            },
    22             navMenuInstanceArgs: {}
     22            navMenuInstanceArgs: {},
     23            l10n: {}
    2324        };
    2425
     
    6465                }
    6566            } );
     67
     68            self.highlightControls();
    6669        },
    6770
     
    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                addTooltips;
     286
     287            // Open expand the menu item control when shift+clicking the menu item
     288            $( document ).on( 'click', selector, function( e ) {
     289                var navMenuItemParts;
     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    };
Note: See TracChangeset for help on using the changeset viewer.