Add ability to drag objects from meta boxes and drop them into your menu. Includes multiple-select before dragging. Select all is todo. Checkboxes remain non-JS fallback. props koopersmith, see #13247.

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

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

@@ -201,6 +201,66 @@ body {
 	width: 210px;
 }
 
+.add-menu-item-view-all {
+	height: 400px;
+}
+
+#side-sortables .potential-menu-item {
+	margin-left: 0;
+	position: relative;
+	margin: 6px 0;
+}
+#side-sortables .potential-menu-item ul {
+	margin-left: 0;
+	
+}
+#side-sortables .potential-menu-item li {
+	cursor: move;
+	padding: 1px 6px;
+	border-radius: 4px;
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	-khtml-border-radius: 4px;
+}
+	.potential-menu-item li {
+		background: #eee;
+		border: 1px solid #dfdfdf;
+		color: #646464;
+	}
+	.potential-menu-item li:hover {
+		color: #222;
+		border-color: #ccc;
+		background: #f9f9f9;
+	}
+		.selected-menu-item li {
+			background: #FFFFE0;
+			border-color: #E6DB55;
+		}
+		.selected-menu-item li:hover {
+			background: #ffffbe;
+			border-color: #e2d537;
+		}
+	.potential-menu-item .item-controls,
+	.potential-menu-item .menu-item-transport {
+		display: none;
+	}
+	.potential-menu-item .ui-draggable-dragging div,
+	.potential-menu-item .menu-item-handle .item-controls {
+		display: block;
+	}
+	#side-sortables .new-menu-item,
+	#side-sortables .new-menu-item li,
+	#side-sortables .additional-menu-items li {
+		background: transparent;
+		border: 0;
+	}
+	#side-sortables .additional-menu-items li {
+		margin-top: 13px;
+	}
+	.item-edit img.waiting {
+		display: block;
+	}
+
 /* Button Primary Actions */
 #menu-container .submit { margin: 0px 0px 10px; padding: 0px; }
 
@@ -259,16 +319,15 @@ body {
 .menu li {
 	margin-bottom: 0;
 }
-.menu li dl {
+.menu-item-bar {
 	clear:both;
 	line-height:1.5em;
 	position:relative;
 	margin-top: 13px;
 }
-.menu li dl dt {
+.menu-item-handle {
 	background: url("../images/gray-grad.png") repeat-x scroll left top #DFDFDF;
 	border: 1px solid #E6E6E6;
-	clear:both;
 	position: relative;
 	padding-left: 10px;
 	height: auto;
@@ -277,14 +336,12 @@ body {
 	text-shadow: 0 1px 0 #FFFFFF;
 	font-weight:bold;
 	overflow: hidden;
-}
-.menu li dl.menu-item-edit-inactive dt {
 	border-radius: 6px;
 	-webkit-border-radius: 6px;
 	-moz-border-radius: 6px;
 	-khtml-border-radius: 6px;
 }
-.menu li dl.menu-item-edit-active dt {
+.menu-item-edit-active .menu-item-handle {
 	-moz-border-radius: 6px 6px 0 0;
 	-webkit-border-top-right-radius: 6px;
 	-webkit-border-top-left-radius: 6px;
@@ -293,16 +350,14 @@ body {
 	border-top-right-radius: 6px;
 	border-top-left-radius: 6px;
 }
-.js .menu li dl dt {
+.js .menu-item-handle {
 	cursor: move;
 }
-.menu li dl dt:hover {
-}
-.menu li.deleting dl dt {
+.menu li.deleting .menu-item-handle {
 	background-color:#faa;
 }
 
-.menu li .item-title {
+.menu-item-handle .item-title {
 	padding: 7px 0;
 	line-height: 20px;
 	display:block;

wp-admin/css/wp-admin.dev.css

@@ -2004,13 +2004,11 @@ input#link_url {
 	border-width: 1px;
 }
 
-.nav-menus-php .categorydiv div.tabs-panel,
 .nav-menus-php .customlinkdiv div.tabs-panel,
 .nav-menus-php .posttypediv div.tabs-panel,
-.nav-menus-php .taxonomydiv div.tabs-panel,
-.nav-menus-php #linkcategorydiv div.tabs-panel {
+.nav-menus-php .taxonomydiv div.tabs-panel {
 	height: auto;
-	max-height: 205px;
+	overflow: visible;
 }
 
 div.tabs-panel-active {

wp-admin/includes/nav-menu.php

@@ -59,13 +59,13 @@ class Walker_Nav_Menu_Edit extends Walker_Nav_Menu  {
 		}
 		?>
 		<li id="menu-item-<?php echo $item_id; ?>" class="menu-item menu-item-depth-<?php echo $depth; ?> menu-item-<?php echo strtolower(esc_attr( $item->append )); ?>">
-			<dl class="<?php
+			<dl class="menu-item-bar <?php
 				if ( isset($_GET['edit-menu-item']) && $item_id == $_GET['edit-menu-item'] )
 					echo 'menu-item-edit-active';
 				else
 					echo 'menu-item-edit-inactive';
 			?>">
-				<dt>
+				<dt class="menu-item-handle">
 					<span class="item-title"><?php echo esc_html( $item->title ); ?></span>
 					<span class="item-controls">
 						<span class="item-type"><?php echo esc_html( $item->append ); ?></span>
@@ -601,7 +601,7 @@ function wp_nav_menu_item_post_type_meta_box( $object, $post_type ) {
 		</div><!-- /.tabs-panel -->
 
 
-		<div id="<?php echo $post_type_name; ?>-all" class="tabs-panel <?php
+		<div id="<?php echo $post_type_name; ?>-all" class="tabs-panel tabs-panel-view-all <?php
 			echo ( 'all' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' );
 		?>">
 			<div class="add-menu-item-pagelinks">
@@ -664,7 +664,7 @@ function wp_nav_menu_item_taxonomy_meta_box( $object, $taxonomy ) {
 		return;
 	}
 	// paginate browsing for large numbers of objects
-	$per_page = 50;
+	$per_page = 13;
 	$pagenum = isset( $_REQUEST[$taxonomy_name . '-tab'] ) && isset( $_REQUEST['paged'] ) ? absint( $_REQUEST['paged'] ) : 1;
 	$offset = 0 < $pagenum ? $per_page * ( $pagenum - 1 ) : 0;
 
@@ -776,7 +776,7 @@ function wp_nav_menu_item_taxonomy_meta_box( $object, $taxonomy ) {
 			</ul>
 		</div><!-- /.tabs-panel -->
 
-		<div id="tabs-panel-<?php echo $taxonomy_name; ?>-all" class="tabs-panel <?php
+		<div id="tabs-panel-<?php echo $taxonomy_name; ?>-all" class="tabs-panel tabs-panel-view-all <?php
 			echo ( 'all' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' );
 		?>">
 			<div class="add-menu-item-pagelinks">

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

@@ -87,7 +87,7 @@ var WPNavMenuHandler = function ($) {
 		return Math.floor(px / menuItemDepthPerLevel);
 	},
 
-	menuList;
+	menuList, targetList;
 
 	// jQuery extensions
 	$.fn.extend({
@@ -153,6 +153,7 @@ var WPNavMenuHandler = function ($) {
 		// Functions that run on init.
 		init : function() {
 			menuList = $('#menu-to-edit');
+			targetList = menuList;
 
 			this.attachMenuEditListeners();
 
@@ -166,6 +167,8 @@ var WPNavMenuHandler = function ($) {
 			this.initToggles();
 
 			this.initTabManager();
+			
+			this.initAddMenuItemDraggables();
 		},
 
 		initToggles : function() {
@@ -186,24 +189,31 @@ var WPNavMenuHandler = function ($) {
 
 		initSortables : function() {
 			var currentDepth = 0, originalDepth, minDepth, maxDepth,
-				menuLeft = menuList.offset().left;
+				menuLeft = menuList.offset().left,
+				newItem, transport;
 
 			menuList.sortable({
-				handle: ' > dl',
+				handle: '.menu-item-handle',
 				placeholder: 'sortable-placeholder',
 				start: function(e, ui) {
-					var next, height, width, parent, children, maxChildDepth,
-						transport = ui.item.children('.menu-item-transport');
+					console.log('sort start', e, ui);
+					var next, height, width, parent, children, maxChildDepth;
 
-					// Set depths
-					originalDepth = ui.item.menuItemDepth();
+					transport = ui.item.children('.menu-item-transport');
+					// Check if the item is in the menu, or new
+					newItem = ( ui.helper.hasClass('new-menu-item') );
+					
+					// Set depths. currentDepth must be set before children are located.
+					originalDepth = ( newItem ) ? 0 : ui.item.menuItemDepth();
 					updateCurrentDepth(ui, originalDepth);
-
-					// Attach child elements to parent
-					// Skip the placeholder
-					parent = ( ui.item.next()[0] == ui.placeholder[0] ) ? ui.item.next() : ui.item;
-					children = parent.childMenuItems();
-					transport.append( children );
+					
+					if( ! newItem ) {
+						// Attach child elements to parent
+						// Skip the placeholder
+						parent = ( ui.item.next()[0] == ui.placeholder[0] ) ? ui.item.next() : ui.item;
+						children = parent.childMenuItems();
+						transport.append( children );
+					}
 
 					// Now that the element is complete, we can update...
 					updateDepthRange(ui);
@@ -212,17 +222,19 @@ var WPNavMenuHandler = function ($) {
 					height = transport.outerHeight();
 					// If there are children, account for distance between top of children and parent
 					height += ( height > 0 ) ? (ui.placeholder.css('margin-top').slice(0, -2) * 1) : 0;
-					height += ui.item.outerHeight();
+					height += ui.helper.outerHeight();
 					height -= 2; // Subtract 2 for borders
 					ui.placeholder.height(height);
 
 					// Update the width of the placeholder to match the moving item.
 					maxChildDepth = originalDepth;
-					children.each(function(){
-						var depth = $(this).menuItemDepth();
-						maxChildDepth = (depth > maxChildDepth) ? depth : maxChildDepth;
-					});
-					width = ui.item.find('dl dt').outerWidth(); // Get original width
+					if( ! newItem ) { // Children have already been attached to new items
+						children.each(function(){
+							var depth = $(this).menuItemDepth();
+							maxChildDepth = (depth > maxChildDepth) ? depth : maxChildDepth;
+						});
+					}
+					width = ui.helper.find('.menu-item-handle').outerWidth(); // Get original width
 					width += depthToPx(maxChildDepth - originalDepth); // Account for children
 					width -= 2; // Subtract 2 for borders
 					ui.placeholder.width(width);
@@ -231,15 +243,26 @@ var WPNavMenuHandler = function ($) {
 					var children, depthChange = currentDepth - originalDepth;
 
 					// Return child elements to the list
-					children = ui.item.children('.menu-item-transport').children().insertAfter(ui.item);
-
-					// Update depth classes
-					if( depthChange != 0 ) {
-						ui.item.updateDepthClass( currentDepth );
-						children.shiftDepthClass( depthChange );
+					children = transport.children().insertAfter(ui.item);
+					
+					if( newItem ) {
+						// Remove the helper item
+						ui.item.remove();
+						// Update depth classes
+						if( depthChange != 0 )
+							children.shiftDepthClass( depthChange );
+						// All new menu items must be updated
+						children.updateParentMenuItemDBId();
+					} else {
+						// Update depth classes
+						if( depthChange != 0 ) {
+							ui.item.updateDepthClass( currentDepth );
+							children.shiftDepthClass( depthChange );
+						}
+						// Update the item data.
+						ui.item.updateParentMenuItemDBId();
 					}
-					// Finally, update the item/menu data.
-					ui.item.updateParentMenuItemDBId();
+					// Update positions
 					recalculateMenuItemPositions();
 				},
 				change: function(e, ui) {
@@ -251,13 +274,16 @@ var WPNavMenuHandler = function ($) {
 					updateDepthRange(ui);
 				},
 				sort: function(e, ui) {
-					var depth = pxToDepth(ui.item.offset().left - menuLeft);
+					var depth = pxToDepth(ui.helper.offset().left - menuLeft);
 					// Check and correct if depth is not within range.
 					if ( depth < minDepth ) depth = minDepth;
 					else if ( depth > maxDepth ) depth = maxDepth;
 
 					if( depth != currentDepth )
 						updateCurrentDepth(ui, depth);
+				},
+				receive: function(e, ui) {
+					transport = ui.sender.children('.menu-item-transport');
 				}
 			});
 
@@ -282,6 +308,78 @@ var WPNavMenuHandler = function ($) {
 				currentDepth = depth;
 			}
 		},
+		
+		initAddMenuItemDraggables : function() {
+			$.fn.extend({
+				checkItem : function() {
+					return this.each(function(){
+						$(this).addClass('selected-menu-item')
+							.next().children('input').attr('checked','checked');
+					});
+				},
+				uncheckItem : function() {
+					return this.each(function(){
+						$(this).removeClass('selected-menu-item')
+							.next().children('input').removeAttr('checked');
+					});
+				},
+				toggleItem : function() {
+					return this.each(function(){
+						var t = $(this);
+						if( t.hasClass('selected-menu-item') )
+							t.uncheckItem();
+						else
+							t.checkItem();
+					});
+				}
+			});
+			
+			var menuItems = $('.potential-menu-item');
+			menuItems.click(function(e){
+				$(this).toggleItem();
+			}).children().draggable({
+				helper: 'clone',
+				connectToSortable: 'ul#menu-to-edit',
+				distance: 5,
+				zIndex: 100,
+				start: function(e, ui) {
+					var target = $(e.target),
+					 	item = target.parent(),
+						li = item.parent(),
+						items;
+					
+					// Make sure the item we're dragging is selected.
+					item.checkItem();
+					// Set us to be the ajax target
+					targetList = target.children('.menu-item-transport');
+					// Get all checked elements and assemble selected items.
+					items = menuItems.filter('.selected-menu-item').children().not( ui.helper ).clone();
+					ui.helper.children('.additional-menu-items').append( items );
+					// This class tells the sortables to treat it as a new item.
+					ui.helper.addClass('new-menu-item');
+					
+					// CSS tweaks to remove some unnecessary items
+					ui.helper.children('div').hide();
+					items.first().css('margin-top', 0);
+
+					// Make the items look like menu items
+					items.children('div').addClass('menu-item-handle');
+					ui.helper.children('div').addClass('hidden-handle');
+					
+					// Trigger the ajax
+					li.parents('.inside').find('.add-to-menu input').trigger('submit');
+					
+					// Lock dimensions
+					ui.helper.width( ui.helper.width() );
+					ui.helper.height( ui.helper.height() );
+				},
+				stop: function(e, ui) {
+					// Reset the targetList and unselect the menu items
+					targetList = menuList;
+					menuItems.filter('.selected-menu-item').uncheckItem();
+				}
+			});
+		},
 
 		attachMenuEditListeners : function() {
 			var that = this;
@@ -599,8 +697,8 @@ var WPNavMenuHandler = function ($) {
 		 */
 		eventSubmitMetaForm : function(thisForm, e) {
 			var inputs = thisForm.getElementsByTagName('input'),
-			i = inputs.length,
-			j,
+			len = inputs.length,
+			i, j,
 			listItemData,
 			listItemDBID,
 			listItemDBIDMatch,
@@ -611,7 +709,7 @@ var WPNavMenuHandler = function ($) {
 			that = this;
 			params['action'] = '';
 
-			while ( i-- ) {
+			for ( i = 0; i < len; i++ ) {
 				if ( 	// we're submitting a checked item
 					inputs[i].name &&
 					-1 != inputs[i].name.indexOf('menu-item-object-id') &&
@@ -668,7 +766,7 @@ var WPNavMenuHandler = function ($) {
 		 * @param object req The request arguments.
 		 */
 		processAddMenuItemResponse : function( menuMarkup, req ) {
-			$(menuMarkup).hideAdvancedMenuItemFields().appendTo( menuList );
+			$(menuMarkup).hideAdvancedMenuItemFields().appendTo( targetList );
 
 			/* set custom link form back to defaults */
 			$('#custom-menu-item-name').val('').blur();

wp-includes/nav-menu-template.php

@@ -142,9 +142,17 @@ class Walker_Nav_Menu_Checklist extends Walker_Nav_Menu  {
 		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
 
 		$output .= $indent . '<li>';
-		$output .= '<label class="menu-item-title">';
-		$output .= '<input type="checkbox" name="menu-item[' . $possible_object_id . '][menu-item-object-id]" value="'. esc_attr( $item->object_id ) .'" /> ';
-		$output .= $item->title .'</label>';
+		$output .= '<ul class="potential-menu-item hide-if-no-js"><li><div>';
+		$output .= '<span class="item-title">' . esc_html( $item->title ) . '</span>';
+		$output .= '<span class="item-controls">';
+		$output .= '<span class="item-type">' . esc_html( $item->append ) . '</span>';
+		$output .= '<span class="item-edit">';
+		$output .= '<img class="waiting" src="' . esc_url( admin_url( 'images/wpspin_light.gif' ) ) . '" />';
+		$output .= '</span></span>';
+		$output .= '</div><ul class="additional-menu-items"></ul><ul class="menu-item-transport"></ul></li></ul>';
+		$output .= '<label class="menu-item-title hide-if-js">';
+		$output .= '<input type="checkbox" class="menu-item-checkbox" name="menu-item[' . $possible_object_id . '][menu-item-object-id]" value="'. esc_attr( $item->object_id ) .'" /> ';
+		$output .= esc_html( $item->title ) .'</label>';
 
 		// Menu item hidden fields
 		$output .= '<input type="hidden" class="menu-item-db-id" name="menu-item[' . $possible_object_id . '][menu-item-db-id]" value="' . $possible_db_id . '" />';

wp-includes/script-loader.php

@@ -393,7 +393,7 @@ function wp_default_scripts( &$scripts ) {
 		) );
 
 		// Custom Navigation
-		$scripts->add( 'nav-menu', "/wp-admin/js/nav-menu$suffix.js", false, '20100503a' );
+		$scripts->add( 'nav-menu', "/wp-admin/js/nav-menu$suffix.js", false, '20100504' );
 		$scripts->localize( 'nav-menu', 'navMenuL10n', array(
 			'custom' => _x('Custom', 'menu nav item type'),
 			'thickbox' => _x('Edit Menu Item', 'Thickbox Title'),
@@ -442,7 +442,7 @@ function wp_default_styles( &$styles ) {
 	// Any rtl stylesheets that don't have a .dev version for ltr
 	$no_suffix = array( 'farbtastic' );
 
-	$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20100501a' );
+	$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20100504' );
 
 	$styles->add( 'ie', "/wp-admin/css/ie$suffix.css", array(), '20100219' );
 	$styles->add_data( 'ie', 'conditional', 'lte IE 7' );
@@ -474,7 +474,7 @@ function wp_default_styles( &$styles ) {
 	$styles->add( 'farbtastic', '/wp-admin/css/farbtastic.css', array(), '1.2' );
 	$styles->add( 'jcrop', '/wp-includes/js/jcrop/jquery.Jcrop.css', array(), '0.9.8' );
 	$styles->add( 'imgareaselect', '/wp-includes/js/imgareaselect/imgareaselect.css', array(), '0.9.1' );
-	$styles->add( 'nav-menu', "/wp-admin/css/nav-menu$suffix.css", array(), '20100503a' );
+	$styles->add( 'nav-menu', "/wp-admin/css/nav-menu$suffix.css", array(), '20100504' );
 
 	foreach ( $rtl_styles as $rtl_style ) {
 		$styles->add_data( $rtl_style, 'rtl', true );