Ticket #42114: 42114.1.diff
File 42114.1.diff, 5.4 KB (added by , 8 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 750 750 return equal; 751 751 }; 752 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] 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 753 801 /** 754 802 * Get current timestamp adjusted for server clock time. 755 803 * -
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 1142 1142 }; 1143 1143 } 1144 1144 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 } ); 1145 1159 } 1146 1160 }); 1147 1161 … … 1383 1397 wp.a11y.speak( api.Menus.data.l10n.menuAdded ); 1384 1398 1385 1399 // 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... 1387 1406 }, 1388 1407 1389 1408 /** -
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 763 763 * @param {object} [options] 764 764 * @param {number} [options.delay] Delay in milliseconds. 765 765 * @param {jQuery} [options.focusTarget] A target for user focus that 766 * defaults to the highlighted element. If the user focuses the target766 * defaults to the highlighted element. If the user focuses the target 767 767 * before the delay passes, the reminder is canceled. This option exists 768 * 769 * 768 * to accommodate compound buttons containing auxiliary UI, 769 * such as the Publish button augmented with a Settings button. 770 770 * @returns {Function} An idempotent function that cancels the reminder. 771 771 */ 772 772 api.utils.highlightButton = function highlightButton( button, options ) { … … 783 783 canceled = true; 784 784 } 785 785 786 // Remove animation class in case it was already applied 786 // Remove animation class in case it was already applied. 787 787 button.removeClass( animationClass ); 788 788 789 789 focusTarget.on( 'focusin', cancelReminder );