Nav menu UI updates. props koopersmith, see #13134.

git-svn-id: http://svn.automattic.com/wordpress/trunk@14286 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/js/common.dev.js

@@ -123,26 +123,48 @@ $(document).ready(function(){ adminMenu.init(); });
 // show/hide/save table columns
 columns = {
 	init : function() {
+		var that = this;
 		$('.hide-column-tog', '#adv-settings').click( function() {
-			var column = $(this).val();
+			var $t = $(this), column = $t.val();
-			if ( $(this).attr('checked') )
+			if ( $t.attr('checked') )
-				$('.column-' + column).show();
+				that.checked(column);
 			else
-				$('.column-' + column).hide();
+				that.unchecked(column);
 
-			columns.save_manage_columns_state();
+			columns.saveManageColumnsState();
 		});
 	},
 
-	save_manage_columns_state : function() {
+	saveManageColumnsState : function() {
-		var hidden = $('.manage-column').filter(':hidden').map(function() { return this.id; }).get().join(',');
+		var hidden = this.hidden();
 		$.post(ajaxurl, {
 			action: 'hidden-columns',
 			hidden: hidden,
 			screenoptionnonce: $('#screenoptionnonce').val(),
 			page: pagenow
 		});
-	}
+	},
+	
+	checked : function(column) {
+		$('.column-' + column).show();
+	},
+	
+	unchecked : function(column) {
+		$('.column-' + column).hide();
+	},
+	
+	hidden : function() {
+		return $('.manage-column').filter(':hidden').map(function() { return this.id; }).get().join(',');
+	},
+	
+	useCheckboxesForHidden : function() {
+		this.hidden = function(){
+			return $('.hide-column-tog').not(':checked').map(function() {
+				var id = this.id;
+				return id.substring( id, id.length - 5 );
+			}).get().join(',');
+		};
+	},
 }
 
 $(document).ready(function(){columns.init();});

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

@@ -111,28 +111,6 @@ var WPNavMenuHandler = function () {
 		}
 	},
 
-	/**
-	 * Get the parent element with the matching class, but go no higher than the form.
-	 *
-	 * @param DOM-element el The descendant element up from which we'll be searching
-	 * @param string parentClass The class name of the desired parent element.
-	 * @return DOM-element The parent element.
-	 */
-	getParentWrapper = function( el, parentClass ) {
-		var form = document.getElementById('nav-menu-meta'),
-		i;
-
-		while ( 
-			el.parentNode &&
-			( ! el.className || -1 == el.className.indexOf(parentClass) ) &&
-			el.parentNode != form
-		) {
-			el = el.parentNode;
-		}
-
-		return el;
-	},
-
 	makeDroppable = function(el) {
 		var that = this;
 
@@ -189,7 +167,30 @@ var WPNavMenuHandler = function () {
 			// init drag and drop
 			setupListItemsDragAndDrop.call(this, menuList); 
 
+			this.initToggles();
+		},
+		
+		initToggles : function() {
+			// init postboxes
 			postboxes.add_postbox_toggles('nav-menus');
+			
+			// adjust columns functions for menus UI
+			columns.useCheckboxesForHidden();
+			columns.checked = function(field) {
+				$('.field-' + field).removeClass('hidden-field');
+			}
+			columns.unchecked = function(field) {
+				$('.field-' + field).addClass('hidden-field');
+			}
+			// hide fields
+			this.hideAdvancedMenuItemFields();
+		},
+		
+		hideAdvancedMenuItemFields : function(container) {
+			container = container || '.menu';
+			$('.hide-column-tog').not(':checked').each(function(){
+				$(container).find('.field-' + $(this).val() ).addClass('hidden-field');
+			});
 		},
 		
 		attachMenuEditListeners : function() {
@@ -202,6 +203,8 @@ var WPNavMenuHandler = function () {
 						return that.eventOnClickMenuDelete(e.target);
 					} else if ( -1 != e.target.className.indexOf('item-delete') ) {
 						return that.eventOnClickMenuItemDelete(e.target);
+					} else if ( -1 != e.target.className.indexOf('item-close') ) {
+						return that.eventOnClickCloseLink(e.target);
 					}
 				}
 			});
@@ -211,23 +214,23 @@ var WPNavMenuHandler = function () {
 			if ( ! formEL )
 				return;
 
-			var that = this;
+			var that = this, lwd = 'label-with-default-title';
-
+			
-			// set default value for custom link name
+			$('.'+lwd).each(function(){
-			customLinkNameInput = document.getElementById('custom-menu-item-name');
+				var $t = $(this), title = $t.attr('title'), val = $t.val();
-			customLinkURLInput = document.getElementById('custom-menu-item-url');
+				$t.data(lwd, title);
-
+				if( '' == val ) $t.val(title);
-			if ( customLinkNameInput ) {
+				else if ( title == val ) return;
-				customLinkNameDefault = 'undefined' != typeof customLinkNameInput.defaultValue ? customLinkNameInput.defaultValue : customLinkNameInput.getAttribute('value');
+				else $t.removeClass(lwd);
-				customLinkURLDefault = 'undefined' != typeof customLinkURLInput.defaultValue ? customLinkURLInput.defaultValue : customLinkURLInput.getAttribute('value');
+			}).focus(function(){
-				$(customLinkNameInput).bind('focus', function(e) {
+				var $t = $(this);
-					this.value = customLinkNameDefault == this.value ? '' : this.value;
+				if( $t.val() == $t.data(lwd) )
-				});
+					$t.val('').removeClass(lwd);
-				
+			}).blur(function(){
-				$(customLinkNameInput).bind('blur', function(e) {
+				var $t = $(this);
-					this.value = '' == this.value ? customLinkNameDefault : this.value;
+				if( '' == $t.val() )
-				});
+					$t.val( $t.data(lwd) ).addClass(lwd);
-			}
+			});
 
 			// auto-suggest for the quick-search boxes
 			$('input.quick-search').each(function(i, el) {
@@ -241,7 +244,7 @@ var WPNavMenuHandler = function () {
 
 		attachTabsPanelListeners : function() {
 			$('#menu-settings-column').bind('click', function(e) {
-				if ( e.target && e.target.className && -1 != e.target.className.indexOf('menu-tab-link') ) {
+				if ( e.target && e.target.className && -1 != e.target.className.indexOf('nav-tab-link') ) {
 					var activePanel,
 					panelIdMatch = /#(.*)$/.exec(e.target.href),
 					tabPanels,
@@ -330,18 +333,29 @@ var WPNavMenuHandler = function () {
 			var activeEdit,
 			matchedSection = /#(.*)$/.exec(clickedEl.href);
 			if ( matchedSection && matchedSection[1] ) {
-				activeEdit = document.getElementById(matchedSection[1]);
+				activeEdit = $('#'+matchedSection[1]);
-				if ( activeEdit ) {
+				if( 0 != activeEdit.length ) {
-					if ( -1 != activeEdit.className.indexOf('menu-item-edit-inactive') ) {
+					if( activeEdit.hasClass('menu-item-edit-inactive') ) {
-						activeEdit.className = activeEdit.className.replace('menu-item-edit-inactive', 'menu-item-edit-active');
+						activeEdit.slideDown('fast')
-					} else { 
+							.siblings('dl').andSelf()
-						activeEdit.className = activeEdit.className.replace('menu-item-edit-active', 'menu-item-edit-inactive');
+							.removeClass('menu-item-edit-inactive')
+							.addClass('menu-item-edit-active');
+					} else {
+						activeEdit.slideUp('fast')
+							.siblings('dl').andSelf()
+							.removeClass('menu-item-edit-active')
+							.addClass('menu-item-edit-inactive');
 					}
 					return false;
 				}
 			}
 		},
 		
+		eventOnClickCloseLink : function(clickedEl) {
+			$(clickedEl).closest('.menu-item-settings').siblings('dl').find('.item-edit').click();
+			return false;
+		},
+		
 		eventOnClickMenuDelete : function(clickedEl) {
 			// Delete warning AYS
 			if ( confirm( navMenuL10n.warnDeleteMenu ) ) {
@@ -460,8 +474,7 @@ var WPNavMenuHandler = function () {
 		 * @param object e The event object.
 		 */
 		eventSubmitMetaForm : function(thisForm, e) {
-			var ancestor,
+			var inputs = thisForm.getElementsByTagName('input'),
-			inputs = thisForm.getElementsByTagName('input'),
 			i = inputs.length,
 			j,
 			listItemData,
@@ -471,6 +484,7 @@ var WPNavMenuHandler = function () {
 			processMethod = function(){},
 			re = new RegExp('menu-item\\[(\[^\\]\]*)');
 
+			thisForm.className = thisForm.className + ' processing',
 			that = this;
 
 			params['action'] = '';
@@ -498,7 +512,6 @@ var WPNavMenuHandler = function () {
 						params['menu-item[' + listItemDBID + '][' + j + ']'] = listItemData[j];
 					}
 
-					ancestor = getParentWrapper(inputs[i], 'inside');
 					inputs[i].checked = false;
 
 				// we're submitting a search term
@@ -508,7 +521,6 @@ var WPNavMenuHandler = function () {
 					inputs[i].className &&
 					-1 != inputs[i].className.search(/quick-search\b[^-]/)
 				) {
-					ancestor = getParentWrapper(inputs[i], 'inside');
 					params['action'] = 'menu-quick-search';
 					params['q'] = inputs[i].value;
 					params['response-format'] = 'markup';
@@ -516,16 +528,12 @@ var WPNavMenuHandler = function () {
 					processMethod = that.processQuickSearchQueryResponse;
 				}
 			}
-
-			if ( ancestor )
-				ancestor.className = ancestor.className + ' processing',
-
 			params['menu'] = thisForm.elements['menu'].value;
 			params['menu-settings-column-nonce'] = thisForm.elements['menu-settings-column-nonce'].value;
 
 			$.post( ajaxurl, params, function(menuMarkup) {
 				processMethod.call(that, menuMarkup, params);	
-				ancestor.className = ancestor.className.replace(/processing/g, '');
+				thisForm.className = thisForm.className.replace(/processing/g, '');
 			});
 
 			return false;
@@ -592,12 +600,11 @@ var WPNavMenuHandler = function () {
 			}
 
 			this.recalculateSortOrder(menuList);
+			this.hideAdvancedMenuItemFields(menuList);
 
 			/* set custom link form back to defaults */
-			if ( customLinkNameInput && customLinkURLInput ) { 
+			$('#custom-menu-item-name').val('').blur();
-				customLinkNameInput.value = customLinkNameDefault;
+			$('#custom-menu-item-url').val('http://');
-				customLinkURLInput.value = customLinkURLDefault; 
-			}
 		},
 
 		/**
@@ -639,7 +646,6 @@ var WPNavMenuHandler = function () {
 			if ( items[0] && req.object_type ) {
 				resultList = document.getElementById(req.object_type + '-search-checklist');
 				if ( resultList ) {
-					resultList.innerHTML = '';
 					resultList.appendChild(items[0]);
 				}
 			} else if ( req.type ) {
@@ -647,7 +653,6 @@ var WPNavMenuHandler = function () {
 				if ( matched && matched[2] ) {
 					resultList = document.getElementById(matched[2] + '-search-checklist');
 					if ( resultList ) {
-						resultList.innerHTML = '';
 						i = items.length;
 						if ( ! i ) {
 							message = document.createElement('li');