First pass on sliding tabs for the nav menu admin UI. props koopersmith, see #13215.

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

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

@@ -8,6 +8,11 @@
  * @subpackage Administration
  */
 
+html,
+body {
+	min-width: 950px;
+}
+
 #nav-menus-frame {
 	margin-left: 300px;
 }
@@ -95,12 +100,53 @@
 		font-weight:bold;
 	}
 	
-	#menu-management .nav-tabs {
+/* Menu Tabs */
+	
+#menu-management .nav-tabs-nav {
+	margin: 0 20px;
+}
+
+#menu-management .nav-tabs-arrow {
+	width: 10px;
+	padding: 0 5px 4px;
+	cursor: pointer;
+	position: absolute;
+	top: 0;
+	line-height: 22px;
+	font-size: 18px;
+	text-shadow: 0 1px 0 #fff;
+}
+	#menu-management .nav-tabs-arrow a { color: #C1C1C1; }
+	#menu-management .nav-tabs-arrow a:hover { color: #D54E21; }
+	#menu-management .nav-tabs-arrow a:active { color: #464646; }
+	#menu-management .nav-tabs-arrow-left {
+		left: 0;
+	}
+	#menu-management .nav-tabs-arrow-right {
+		right: 0;
+		text-align: right;
+	}
+
+
+#menu-management .nav-tabs-wrapper {
+	width: 100%;
+	height: 28px;
+	margin-bottom: -1px;
+	overflow: hidden;
+}
+
+.no-js #menu-management .nav-tabs {
 	padding-left: 30px;
 	clear: both;
 }
+.js #menu-management .nav-tabs {
+	float: left;
+	margin-left: 0px;
+	margin-right: -400px;
+}
 
 #menu-management .nav-tab {
+	margin-bottom: 0;
 	background: #f4f4f4;
 	font-weight: bold;
 	border-color: #dfdfdf;
@@ -122,6 +168,7 @@
 		display: inline;
 	}
 	
+/* Menu Toolbar */
 #menu-management #major-publishing-actions #delete-action {
 	float: right;
 	margin-right: 10px;
@@ -455,5 +502,5 @@ body.js .item-order {
 
 
 /* Clearfix */
-.menu-item-settings:after, .button-controls:after, #menu-item-url-wrap:after, #menu-item-name-wrap:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+#nav-menus-frame:after, .menu-item-settings:after, .button-controls:after, #menu-item-url-wrap:after, #menu-item-name-wrap:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
-.menu-item-settings, .button-controls, #menu-item-url-wrap, #menu-item-name-wrap { display: block; }
+#nav-menus-frame, .menu-item-settings, .button-controls, #menu-item-url-wrap, #menu-item-name-wrap { display: block; }

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

@@ -164,6 +164,8 @@ var WPNavMenuHandler = function ($) {
 				this.initSortables();
 
 			this.initToggles();
+			
+			this.initTabManager();
 		},
 		
 		initToggles : function() {
@@ -389,6 +391,97 @@ var WPNavMenuHandler = function ($) {
 			});
 		},
 		
+		initTabManager : function() {
+			var fixed = $('.nav-tabs-wrapper'),
+				fluid = fixed.children('.nav-tabs'),
+				active = fluid.children('.nav-tab-active'),
+				tabs = fluid.children('.nav-tab'),
+				tabsWidth = 0,
+				fixedRight, fixedLeft,
+				arrowLeft, arrowRight
+				resizing = false;
+			
+			function resetMenuTabs() {
+				fixedLeft = fixed.offset().left;
+				fixedRight = fixedLeft + fixed.width();
+				active.makeTabVisible();
+			}
+			
+			$.fn.extend({
+				makeTabVisible : function() {
+					var t = this.eq(0),
+						left = t.offset().left,
+						right = left + t.outerWidth();
+					if( right > fixedRight )
+						fluid.animate({ 'margin-left' :  "+=" + (fixedRight - right) + 'px', }, 'fast');
+					else if ( left < fixedLeft )
+						fluid.animate({ 'margin-left' :  "-=" + (left - fixedLeft) + 'px', }, 'fast');
+					return t;
+				},
+				isTabVisible : function() {
+					var t = this.eq(0),
+						left = t.offset().left,
+						right = left + t.outerWidth();
+					return ( right <= fixedRight && left >= fixedLeft ) ? true : false;
+				}
+			});
+			
+			// Build tab navigation
+			arrowLeft = $('<div class="nav-tabs-arrow nav-tabs-arrow-left"><a>&laquo;</a></div>');
+			arrowRight = $('<div class="nav-tabs-arrow nav-tabs-arrow-right"><a>&raquo;</a></div>');
+			// Attach to the document
+			fixed.wrap('<div class="nav-tabs-nav"/>').parent().prepend( arrowLeft ).append( arrowRight );
+			
+			// Set up right margin
+			tabs.each(function(){
+				tabsWidth += $(this).outerWidth(true);
+			});
+			fluid.css('margin-right', (-1 * tabsWidth) + 'px');
+			
+			// Set the menu tabs
+			resetMenuTabs();
+			// Make sure the tabs reset on resize
+			$(window).resize(function() {
+				if( resizing ) return;
+				resizing = true;
+				setTimeout(function(){ 
+					resetMenuTabs();
+					resizing = false;
+				}, 1000);
+			});
+			
+			// Build arrow functions			
+			$.each([{
+					arrow : arrowLeft,
+					next : "next",
+					last : "first",
+					operator : "+=",
+				},{
+					arrow : arrowRight,
+					next : "prev",
+					last : "last",
+					operator : "-=",
+				}], function(){
+				var that = this;
+				this.arrow.mousedown(function(){
+					var last = tabs[that.last](),
+						fn = function() {
+							if( ! last.isTabVisible() )
+								fluid.animate({ 'margin-left' :  that.operator + '90px', }, 300, "linear", fn);
+						};
+						fn();
+				}).mouseup(function(){
+					var tab, next;
+					fluid.stop(true);
+					tab = tabs[that.last]();
+					while( (next = tab[that.next]()) && next.length && ! next.isTabVisible() ) {
+						tab = next;
+					}
+					tab.makeTabVisible();
+				});
+			});
+		},
+
 		/**
 		 * Set up quick-search input fields' events.
 		 *

wp-admin/nav-menus.php

@@ -362,6 +362,7 @@ require_once( 'admin-header.php' );
 					<input class="button-secondary" name="select_menu" type="submit" value="<?php esc_attr_e('Select'); ?>" />
 				</form>
 			</div>
+			<div class="nav-tabs-wrapper">
 			<div class="nav-tabs">
 				<?php 
 				foreach( (array) $nav_menus as $_nav_menu ) :
@@ -394,6 +395,7 @@ require_once( 'admin-header.php' );
 						echo ' nav-tab-active';
 				?>"><?php printf( '<abbr title="%s">+</abbr>', esc_html__( 'Add menu' ) ); ?></a>
 			</div>
+			</div>
 			<div class="menu-edit">
 				<form id="update-nav-menu" action="<?php echo admin_url( 'nav-menus.php' ); ?>" method="post" enctype="multipart/form-data">
 					<div id="nav-menu-header">

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, '20100502a' );
+		$scripts->add( 'nav-menu', "/wp-admin/js/nav-menu$suffix.js", false, '20100503' );
 		$scripts->localize( 'nav-menu', 'navMenuL10n', array(
 			'custom' => _x('Custom', 'menu nav item type'),
 			'thickbox' => _x('Edit Menu Item', 'Thickbox Title'),
@@ -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(), '20100501b' );
+	$styles->add( 'nav-menu', "/wp-admin/css/nav-menu$suffix.css", array(), '20100503' );
 
 	foreach ( $rtl_styles as $rtl_style ) {
 		$styles->add_data( $rtl_style, 'rtl', true );