WordPress.org

Make WordPress Core

Ticket #42114: 42114.1.diff

File 42114.1.diff, 5.4 KB (added by bpayton, 2 years ago)
  • src/wp-admin/js/customize-controls.js

    From 1964dde99a082b9e03e0e4989753da826fed6a8b Mon Sep 17 00:00:00 2001
    From: Brandon Payton <brandon@happycode.net>
    Date: Wed, 18 Oct 2017 09:54:41 +0200
    Subject: [PATCH 1/2] Highlight New Items button for new menus
    
    ---
     src/wp-admin/js/customize-controls.js  | 48 ++++++++++++++++++++++++++++++++++
     src/wp-admin/js/customize-nav-menus.js | 21 ++++++++++++++-
     2 files changed, 68 insertions(+), 1 deletion(-)
    
    diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
    index c5cdfe9334..061b585cc4 100644
    a b  
    750750                return equal;
    751751        };
    752752
     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]
     764         * @param {number} [options.delay] Delay in milliseconds.
     765         * @param {jQuery} [options.focusTarget] A target for user focus that
     766         *      defaults to the highlighted element. If the user focuses the target
     767         *      before the delay passes, the reminder is canceled. This option exists
     768         *  to accommodate compound buttons containing auxiliary UI,
     769         *  such as the Publish button augmented with a 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                        delay,
     776                        focusTarget;
     777
     778                options = options || {};
     779                delay = 'delay' in options ? options.delay : 0;
     780                focusTarget = 'focusTarget' in options ? options.focusTarget : button;
     781
     782                function cancelReminder() {
     783                        canceled = true;
     784                }
     785
     786                // Remove animation class in case it was already applied
     787                button.removeClass( animationClass );
     788
     789                focusTarget.on( 'focusin', cancelReminder );
     790                setTimeout( function() {
     791                        focusTarget.off( 'focusin', cancelReminder );
     792
     793                        if ( ! canceled ) {
     794                                button.addClass( animationClass );
     795                        }
     796                }, delay );
     797
     798                return cancelReminder;
     799        };
     800
    753801        /**
    754802         * Get current timestamp adjusted for server clock time.
    755803         *
  • src/wp-admin/js/customize-nav-menus.js

    diff --git a/src/wp-admin/js/customize-nav-menus.js b/src/wp-admin/js/customize-nav-menus.js
    index 31768861ad..a059aee569 100644
    a b  
    11421142                                };
    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                highlightNewItemAffordance: function () {
     1158                        api.utils.highlightButton( this.contentContainer.find( '.add-new-menu-item' ), { delay: 2000 } );
    11451159                }
    11461160        });
    11471161
     
    13831397                        wp.a11y.speak( api.Menus.data.l10n.menuAdded );
    13841398
    13851399                        // 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...
     1400                        var editMenuSection = api.section( customizeId );
     1401                        editMenuSection.focus( {
     1402                                completeCallback: function() {
     1403                                        editMenuSection.highlightNewItemAffordance();
     1404                                }
     1405                        } ); // @todo should we focus on the new menu's control and open the add-items panel? Thinking user flow...api.section( customizeId ).focus(); // @todo should we focus on the new menu's control and open the add-items panel? Thinking user flow...
    13871406                },
    13881407
    13891408                /**
  • src/wp-admin/js/customize-controls.js

    -- 
    2.14.1
    
    
    From e049a562d54f66133e188a0939e2923c199cfc4f Mon Sep 17 00:00:00 2001
    From: Brandon Payton <brandon@happycode.net>
    Date: Wed, 18 Oct 2017 17:45:52 +0200
    Subject: [PATCH 2/2] Fix documentation style
    
    ---
     src/wp-admin/js/customize-controls.js | 8 ++++----
     1 file changed, 4 insertions(+), 4 deletions(-)
    
    diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
    index 061b585cc4..0dffe73916 100644
    a b  
    763763         * @param {object} [options]
    764764         * @param {number} [options.delay] Delay in milliseconds.
    765765         * @param {jQuery} [options.focusTarget] A target for user focus that
    766          *      defaults to the highlighted element. If the user focuses the target
     766         *      defaults to the highlighted element. If the user focuses the target
    767767         *      before the delay passes, the reminder is canceled. This option exists
    768          *  to accommodate compound buttons containing auxiliary UI,
    769          *  such as the Publish button augmented with a Settings button.
     768         *      to accommodate compound buttons containing auxiliary UI,
     769         *      such as the Publish button augmented with a Settings button.
    770770         * @returns {Function} An idempotent function that cancels the reminder.
    771771         */
    772772        api.utils.highlightButton = function highlightButton( button, options ) {
     
    783783                        canceled = true;
    784784                }
    785785
    786                 // Remove animation class in case it was already applied
     786                // Remove animation class in case it was already applied.
    787787                button.removeClass( animationClass );
    788788
    789789                focusTarget.on( 'focusin', cancelReminder );