WordPress.org

Make WordPress Core

Changeset 37347


Ignore:
Timestamp:
05/02/2016 07:52:01 PM (4 years ago)
Author:
westonruter
Message:

Customize: Allow Esc key to collapse the currently-expanded panel, section (or control).

Pressing Esc collapses any expanded widget or nav menu item controls, or any control that implements the expanding interface. Also improves alignment between WidgetControl and MenuItemControl, adding the expanded state and associated expand/collapse methods to nav menu items.

Props purcebr, celloexpressions, westonruter.
Fixes #22237.

Location:
trunk/src/wp-admin/js
Files:
2 edited

Legend:

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

    r37346 r37347  
    36483648        });
    36493649
     3650        // Keyboard shortcuts - esc to exit section/panel.
     3651        $( 'body' ).on( 'keydown', function( event ) {
     3652            var collapsedObject, expandedControls = [], expandedSections = [], expandedPanels = [];
     3653
     3654            if ( 27 !== event.which ) { // Esc.
     3655                return;
     3656            }
     3657
     3658            // Check for expanded expandable controls (e.g. widgets and nav menus items), sections, and panels.
     3659            api.control.each( function( control ) {
     3660                if ( control.expanded && control.expanded() && _.isFunction( control.collapse ) ) {
     3661                    expandedControls.push( control );
     3662                }
     3663            });
     3664            api.section.each( function( section ) {
     3665                if ( section.expanded() ) {
     3666                    expandedSections.push( section );
     3667                }
     3668            });
     3669            api.panel.each( function( panel ) {
     3670                if ( panel.expanded() ) {
     3671                    expandedPanels.push( panel );
     3672                }
     3673            });
     3674
     3675            // Skip collapsing expanded controls if there are no expanded sections.
     3676            if ( expandedControls.length > 0 && 0 === expandedSections.length ) {
     3677                expandedControls.length = 0;
     3678            }
     3679
     3680            // Collapse the most granular expanded object.
     3681            collapsedObject = expandedControls[0] || expandedSections[0] || expandedPanels[0];
     3682            if ( collapsedObject ) {
     3683                collapsedObject.collapse();
     3684                event.preventDefault();
     3685            }
     3686        });
     3687
    36503688        $( '.customize-controls-preview-toggle' ).on( 'click', function() {
    36513689            overlay.toggleClass( 'preview-only' );
  • trunk/src/wp-admin/js/customize-nav-menus.js

    r36908 r37347  
    994994        initialize: function( id, options ) {
    995995            var control = this;
     996            control.expanded = new api.Value( false );
     997            control.expandedArgumentsQueue = [];
     998            control.expanded.bind( function( expanded ) {
     999                var args = control.expandedArgumentsQueue.shift();
     1000                args = $.extend( {}, control.defaultExpandedArguments, args );
     1001                control.onChangeExpanded( expanded, args );
     1002            });
    9961003            api.Control.prototype.initialize.call( control, id, options );
    9971004            control.active.validate = function() {
     
    13711378
    13721379        /**
     1380         * @since 4.6.0
     1381         *
     1382         * @param {Boolean} expanded
     1383         * @param {Object} [params]
     1384         * @returns {Boolean} false if state already applied
     1385         */
     1386        _toggleExpanded: api.Section.prototype._toggleExpanded,
     1387
     1388        /**
     1389         * @since 4.6.0
     1390         *
     1391         * @param {Object} [params]
     1392         * @returns {Boolean} false if already expanded
     1393         */
     1394        expand: api.Section.prototype.expand,
     1395
     1396        /**
    13731397         * Expand the menu item form control.
    13741398         *
     
    13791403         */
    13801404        expandForm: function( params ) {
    1381             this.toggleForm( true, params );
    1382         },
     1405            this.expand( params );
     1406        },
     1407
     1408        /**
     1409         * @since 4.6.0
     1410         *
     1411         * @param {Object} [params]
     1412         * @returns {Boolean} false if already collapsed
     1413         */
     1414        collapse: api.Section.prototype.collapse,
    13831415
    13841416        /**
     
    13911423         */
    13921424        collapseForm: function( params ) {
    1393             this.toggleForm( false, params );
     1425            this.collapse( params );
    13941426        },
    13951427
     
    13971429         * Expand or collapse the menu item control.
    13981430         *
     1431         * @deprecated this is poor naming, and it is better to directly set control.expanded( showOrHide )
    13991432         * @since 4.5.0 Added params.completeCallback.
    14001433         *
     
    14041437         */
    14051438        toggleForm: function( showOrHide, params ) {
     1439            if ( typeof showOrHide === 'undefined' ) {
     1440                showOrHide = ! this.expanded();
     1441            }
     1442            if ( showOrHide ) {
     1443                this.expand( params );
     1444            } else {
     1445                this.collapse( params );
     1446            }
     1447        },
     1448
     1449        /**
     1450         * Expand or collapse the menu item control.
     1451         *
     1452         * @since 4.6.0
     1453         * @param {boolean}  [showOrHide] - If not supplied, will be inverse of current visibility
     1454         * @param {Object}   [params] - Optional params.
     1455         * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
     1456         */
     1457        onChangeExpanded: function( showOrHide, params ) {
    14061458            var self = this, $menuitem, $inside, complete;
    14071459
Note: See TracChangeset for help on using the changeset viewer.