Changeset 41930
- Timestamp:
- 10/18/2017 09:59:34 PM (7 years ago)
- Location:
- trunk/src/wp-admin/js
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-admin/js/customize-controls.js
r41903 r41930 749 749 ); 750 750 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; 751 802 }; 752 803 -
trunk/src/wp-admin/js/customize-nav-menus.js
r41899 r41930 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 * @returns {void} 1158 */ 1159 highlightNewItemButton: function() { 1160 api.utils.highlightButton( this.contentContainer.find( '.add-new-menu-item' ), { delay: 2000 } ); 1145 1161 } 1146 1162 }); … … 1326 1342 menuSection, 1327 1343 customizeId, 1344 editMenuSection, 1328 1345 placeholderId = api.Menus.generatePlaceholderAutoIncrementId(); 1329 1346 … … 1384 1401 1385 1402 // 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... 1387 1409 }, 1388 1410
Note: See TracChangeset
for help on using the changeset viewer.