Make WordPress Core

Changeset 41930


Ignore:
Timestamp:
10/18/2017 09:59:34 PM (7 years ago)
Author:
westonruter
Message:

Customize: Draw attention to "Add Items" button after creating a new menu.

Introduce wp.customize.utils.highlightButton() and wp.customize.Menus.MenuSection#highlightNewItemButton().

Props bpayton, melchoyce, afercia, westonruter.
Fixes #42114.

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

Legend:

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

    r41903 r41930  
    749749        );
    750750        return equal;
     751    };
     752
     753    /**
     754     * Highlight the existence of a button.
     755     *
     756     * This function reminds the user of a button represented by the specified
     757     * UI element, after an optional delay. If the user focuses the element
     758     * before the delay passes, the reminder is canceled.
     759     *
     760     * @since 4.9.0
     761     *
     762     * @param {jQuery} button - The element to highlight.
     763     * @param {object} [options] - Options.
     764     * @param {number} [options.delay=0] - Delay in milliseconds.
     765     * @param {jQuery} [options.focusTarget] - A target for user focus that defaults to the highlighted element.
     766     *                                         If the user focuses the target before the delay passes, the reminder
     767     *                                         is canceled. This option exists to accommodate compound buttons
     768     *                                         containing auxiliary UI, such as the Publish button augmented with a
     769     *                                         Settings button.
     770     * @returns {Function} An idempotent function that cancels the reminder.
     771     */
     772    api.utils.highlightButton = function highlightButton( button, options ) {
     773        var animationClass = 'button-see-me',
     774            canceled = false,
     775            params;
     776
     777        params = _.extend(
     778            {
     779                delay: 0,
     780                focusTarget: button
     781            },
     782            options
     783        );
     784
     785        function cancelReminder() {
     786            canceled = true;
     787        }
     788
     789        // Remove animation class in case it was already applied.
     790        button.removeClass( animationClass );
     791
     792        params.focusTarget.on( 'focusin', cancelReminder );
     793        setTimeout( function() {
     794            params.focusTarget.off( 'focusin', cancelReminder );
     795
     796            if ( ! canceled ) {
     797                button.addClass( animationClass );
     798            }
     799        }, params.delay );
     800
     801        return cancelReminder;
    751802    };
    752803
  • trunk/src/wp-admin/js/customize-nav-menus.js

    r41899 r41930  
    11431143            }
    11441144            api.Section.prototype.onChangeExpanded.call( section, expanded, args );
     1145        },
     1146
     1147        /**
     1148         * Highlight how a user may create new menu items.
     1149         *
     1150         * This method reminds the user to create new menu items and how.
     1151         * It's exposed this way because this class knows best which UI needs
     1152         * highlighted but those expanding this section know more about why and
     1153         * when the affordance should be highlighted.
     1154         *
     1155         * @since 4.9.0
     1156         *
     1157         * @returns {void}
     1158         */
     1159        highlightNewItemButton: function() {
     1160            api.utils.highlightButton( this.contentContainer.find( '.add-new-menu-item' ), { delay: 2000 } );
    11451161        }
    11461162    });
     
    13261342                menuSection,
    13271343                customizeId,
     1344                editMenuSection,
    13281345                placeholderId = api.Menus.generatePlaceholderAutoIncrementId();
    13291346
     
    13841401
    13851402            // Focus on the new menu section.
    1386             api.section( customizeId ).focus(); // @todo should we focus on the new menu's control and open the add-items panel? Thinking user flow...
     1403            editMenuSection = api.section( customizeId );
     1404            editMenuSection.focus( {
     1405                completeCallback: function() {
     1406                    editMenuSection.highlightNewItemButton();
     1407                }
     1408            } ); // @todo should we focus on the new menu's control and open the add-items panel? Thinking user flow...
    13871409        },
    13881410
Note: See TracChangeset for help on using the changeset viewer.