Live update the menu item title when the user is editing the "Navigation Label" field.

Props celloexpressions.
See #23076.


git-svn-id: https://develop.svn.wordpress.org/trunk@28707 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/nav-menus.css

@@ -507,6 +507,10 @@ ul.add-menu-item-tabs li {
 	margin-right: 13em;
 }
 
+.menu-item-handle .menu-item-title.no-title {
+	color: #999;
+}
+
 /* Sortables */
 li.menu-item.ui-sortable-helper dl {
 	margin-top: 0;

src/wp-admin/js/nav-menu.js

@@ -57,6 +57,8 @@ var wpNavMenu;
 			this.initAccessibility();
 
 			this.initToggles();
+
+			this.initPreviewing();
 		},
 
 		jQueryExtensions : function() {
@@ -530,6 +532,21 @@ var wpNavMenu;
 			});
 		},
 
+		initPreviewing : function() {
+			// Update the item handle title when the navigation label is changed.
+			$( 'body' ).on( 'input', '.edit-menu-item-title', function(e) {
+				var input = $( e.currentTarget ), title, titleEl;
+				title = input.val();
+				titleEl = input.closest( '.menu-item' ).find( '.menu-item-title' );
+				// Don't update to empty title.
+				if ( title ) {
+					titleEl.text( title ).removeClass( 'no-title' );
+				} else {
+					titleEl.text( navMenuL10n.untitled ).addClass( 'no-title' );
+				}
+			} );
+		},
+
 		initToggles : function() {
 			// init postboxes
 			postboxes.add_postbox_toggles('nav-menus');