Menu: Overhauled menubar, again starting with Michael Lang's fork. Added

working keyboard navigation, including nested menus. Still need to
properly style the menu buttons, e.g. highlight the button of the
currently open menu.

3 files changed, 129 insertions, 50 deletions

diff --git a/tests/visual/menu/flyoutmenu.js b/tests/visual/menu/flyoutmenu.js
index 8534c9462..54ee8bb67 100644
--- a/tests/visual/menu/flyoutmenu.js
+++ b/tests/visual/menu/flyoutmenu.js
@@ -34,14 +34,17 @@ $.widget("ui.flyoutmenu", {
 		}).keydown(function(event) {
 			if (self.element.is(":hidden")) 
 				return;
-			event.stopPropagation();
 			switch (event.keyCode) {
 			case $.ui.keyCode.LEFT:
-				self.left(event);
+				if (self.left(event)) {
+					event.stopImmediatePropagation();
+				}
 				event.preventDefault();
 				break;
 			case $.ui.keyCode.RIGHT:
-				self.right(event);
+				if (self.right(event)) {
+					event.stopImmediatePropagation();
+				} 
 				event.preventDefault();
 				break;
 			case $.ui.keyCode.ESCAPE:
@@ -98,22 +101,18 @@ $.widget("ui.flyoutmenu", {
 			at: "right top",
 			of: this.activeItem
 		});
-		$(document).one("click", function() {
-			//clicking outside menu flyouts should close all flyouts
-			//$(document).find(".ui-menu-flyout").hide();
-		})
 	},
 	_select: function(event) {
 		event.stopPropagation();
 		// TODO make _select cancelable?
 		this._trigger( "select", event, { item: this.activeItem } );
-		//this.activate(event, this.element.children("li").first());
 		this.hide();
 	},
 	left: function(event) {
 		var newItem = this.activeItem.parents("li").first();
 		if (newItem.length) {
 			this.activate(event, newItem);
+			return true;
 		}
 	},
 	right: function(event) {
@@ -121,6 +120,7 @@ $.widget("ui.flyoutmenu", {
 		if (newItem.length) {
 			this._open(newItem.parent());
 			this.activate(event, newItem);
+			return true;
 		}
 	},
 	activate: function(event, item) {
@@ -135,12 +135,6 @@ $.widget("ui.flyoutmenu", {
 	show: function() {
 		this.active = this.element;
 		this.element.show();
-		if (this.element.hasClass("ui-menu-flyout")) {
-			$(document).one("click", function() {
-				//clicking outside menu flyouts should close all flyouts
-				//$(document).find(".ui-menu-flyout").hide();
-			})
-		}
 	},
 	hide: function() {
 		this.activeItem = this.element.children("li").first();
diff --git a/tests/visual/menu/menubar.html b/tests/visual/menu/menubar.html
index d1fc58fa7..c49abb2da 100644
--- a/tests/visual/menu/menubar.html
+++ b/tests/visual/menu/menubar.html
@@ -10,7 +10,11 @@
 	<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
 	<script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
 	<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
+	<script type="text/javascript" src="flyoutmenu.js"></script>
+	<script type="text/javascript" src="menubar.js"></script>
+	<!--
 	<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
+	-->
 	<script type="text/javascript">
 	$(function() {
 		$.fn.themeswitcher && $('<div/>').css({
@@ -19,45 +23,24 @@
 			top: 10
 		}).appendTo(document.body).themeswitcher();
 		
-		$(".menubar").children("a")
-			.button()
-			.click(function() {
-				var button = $(this);
-				var menu = button.next();
-				if (menu.is(":visible")) {
-					menu.hide();
-					return false;
-				}
-				menu.parent().find(".ui-menu").not(menu).hide();
-				menu.show().css({ left:0, top: 0 }).position({
-					my: "left top",
-					at: "left bottom",
-					of: button
-				});
-				$(document).bind("click.menubar", function(event) {
-					if ($(event.target).closest(".ui-menu")[0] == menu[0]) {
-						return;
-					}
-					$(this).unbind(".menubar");
-					menu.hide();
-				});
-				return false;
-			})
-			.each(function() {
-				$(this).next().hide().menu({
-					input: $(this),
-					select: function(event, ui) {
-						$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
-					}
-				});
-			});
-
+		$(".menubar").menubar({
+			select: function(event, ui) {
+				$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
+				ui.item.parents("ul:last").prev().focus()
+			}
+		});
 	});
 	</script>
 	<style>
 		body { font-size:62.5%; }
-		.ui-menu { width: 200px; }
-		.menubar .ui-menu { position: absolute; }
+		.ui-menu { width: 200px; position: absolute; outline: none; }
+		.ui-menu .ui-icon { float: right; }
+		.ui-menu li.ui-state-disabled {
+			font-weight: bold;
+			padding: .0em .4em;
+			margin: .4em 0 .2em;
+			line-height: 1.5;
+		}
 	</style>
 </head>
 <body>
@@ -66,6 +49,7 @@
 	<a href="#">File</a>
 	<ul>
 		<li><a href="#">Open...</a></li>
+		<li class="ui-state-disabled">Open recent...</li>
 		<li><a href="#">Save</a></li>
 		<li><a href="#">Save as...</a></li>
 		<li><a href="#">Close</a></li>
@@ -75,12 +59,20 @@
 	<ul>
 		<li><a href="#">Copy</a></li>
 		<li><a href="#">Cut</a></li>
-		<li><a href="#">Paste</a></li>
+		<li class="ui-state-disabled">Paste</li>
 	</ul>
 	<a href="#">View</a>
 	<ul>
 		<li><a href="#">Fullscreen</a></li>
 		<li><a href="#">Fit into view</a></li>
+		<li>
+			<a href="#">Encoding</a>
+			<ul>
+				<li><a href="#">Auto-detect</a></li>
+				<li><a href="#">UTF-8</a></li>
+				<li><a href="#">UTF-16</a></li>
+			</ul>
+		</li>
 		<li><a href="#">Customize...</a></li>
 	</ul>
 </div>
diff --git a/tests/visual/menu/menubar.js b/tests/visual/menu/menubar.js
new file mode 100644
index 000000000..a6bf636e0
--- /dev/null
+++ b/tests/visual/menu/menubar.js
@@ -0,0 +1,93 @@
+/*
+ * jQuery UI flyout menu
+ *   - written for jQuery UI 1.9 milestone 2 using the widget factory
+ *
+ * Copyright (c) 2010 Michael Lang, http://nexul.com/
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ */
+(function($) {
+
+$.widget("ui.menubar", {
+	_create: function() {
+		var self = this;
+		var items = this.element.children("button, a");
+		items.next("ul").each(function(i, elm) {
+			$(elm).flyoutmenu({
+				select: self.options.select
+			}).hide().addClass("ui-menu-flyout").keydown(function(event) {
+				var menu = $(this);
+				if (menu.is(":hidden")) 
+					return;
+				event.stopPropagation();
+				switch (event.keyCode) {
+				case $.ui.keyCode.LEFT:
+					self.left(event);
+					event.preventDefault();
+					break;
+				case $.ui.keyCode.RIGHT:
+					self.right(event);
+					event.preventDefault();
+					break;
+				case $.ui.keyCode.TAB:
+					self[ event.shiftKey ? "left" : "right" ]( event );
+					event.preventDefault();
+					break;
+				};
+			});
+		});
+		items.each(function() {
+			var input = $(this),
+				menu = input.next("ul");
+			input.bind("click focus mouseenter", function(event) {
+				if (menu.length && (!/^mouse/.test(event.type) || self.active && self.active.is(":visible") )) {
+					self._open(event, menu);
+				}
+				event.preventDefault();
+				event.stopPropagation();
+			}).button({
+				icons: {
+					secondary: menu.length ? 'ui-icon-triangle-1-s' : ''
+				}
+			});
+		});
+		$(document).click(function() {
+			!$(event.target).closest(".ui-menubar").length && items.next("ul").hide();
+		});
+	},
+	
+	_open: function(event, menu) {
+		this.active && this.active.flyoutmenu("hide");
+		this.active = menu.flyoutmenu("show").css({
+			position: "absolute",
+			top: 0,
+			left: 0
+		}).position({
+			my: "left top",
+			at: "left bottom",
+			offset: "0 -1",
+			of: menu.prev()
+		}).focus();
+	},
+	
+	left: function(event) {
+		var prev = this.active.prevAll( ".ui-menu-flyout" ).eq( 0 );
+		if (prev.length) {
+			this._open(event, prev);
+		} else {
+			this._open(event, this.element.children(".ui-menu-flyout:last"));
+		}
+	},
+	
+	right: function(event) {
+		var next =  this.active.nextAll( ".ui-menu-flyout" ).eq( 0 );
+		if (next.length) {
+			this._open(event, next);
+		} else {
+			this._open(event, this.element.children(".ui-menu-flyout:first"));
+		}
+	}
+});
+
+}(jQuery));