From f8091f761cf3705087efc90cc09f74e5f83744bb Mon Sep 17 00:00:00 2001
From: jzaefferer <joern.zaefferer@gmail.com>
Date: Tue, 22 Feb 2011 15:14:12 +0100
Subject: [PATCH] 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.

---
 tests/visual/menu/flyoutmenu.js | 22 +++-----
 tests/visual/menu/menubar.html  | 64 ++++++++++-------------
 tests/visual/menu/menubar.js    | 93 +++++++++++++++++++++++++++++++++
 3 files changed, 129 insertions(+), 50 deletions(-)
 create mode 100644 tests/visual/menu/menubar.js

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));