Menu: Overhauled nested menu via flyoutmenu.js backported from Michael

Lang's fork. Changed key input handling by setting focus to menu,
getting rid of input option.

1 files changed, 19 insertions, 136 deletions

diff --git a/tests/visual/menu/nested.html b/tests/visual/menu/nested.html
index 2508c55c4..8240689df 100644
--- a/tests/visual/menu/nested.html
+++ b/tests/visual/menu/nested.html
@@ -9,8 +9,11 @@
 	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
 	<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
 	<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
-	<script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.1.js"></script>
+	<script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.js"></script>
+	<script type="text/javascript" src="flyoutmenu.js"></script>
+	<!--
 	<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
+	-->
 	<script type="text/javascript">
 	$(function() {
 		$.fn.themeswitcher && $('<div/>').css({
@@ -19,73 +22,14 @@
 			top: 10
 		}).appendTo(document.body).themeswitcher();
 		
-		$.widget("ui.nestedmenu", {
-			_init: function() {
-				var self = this;
-				this.active = this.element;
-				
-				// hide submenus and create indicator icons
-				this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>');	
-				
-				this.element.find("ul").andSelf().menu({
-					// disable built-in key handling
-					input: $(),
-					select: this.options.select,
-					focus: function(event, ui) {
-						self.active = ui.item.parent();
-						self.activeItem = ui.item;
-						ui.item.parent().find("ul").hide();
-						var nested = $(">ul", ui.item);
-						if (nested.length && /^mouse/.test(event.originalEvent.type)) {
-							self._open(nested);
-						}
-					}
-				})
-			},
-			
-			_open: function(submenu) {
-				submenu.show().css({
-					top: 0,
-					left: 0
-				}).position({
-					my: "left top",
-					at: "right top",
-					of: this.activeItem
-				});
-			},
-			
-			up: function(event) {
-				this.active = this.active.menu("deactivate").hide().parent().parent();
-				this.activeItem = this.active.data("menu").active;
-			},
-			
-			down: function(event) {
-				var submenu = $(">ul", this.activeItem);
-				this._open(submenu, this.activeItem);
-				submenu.menu("activate", event, submenu.children(":first"));
-			},
-			
-			show: function() {
-				this.active = this.element;
-				this.element.show();
-			},
-			
-			hide: function() {
-				this.element.find("ul").andSelf().menu("deactivate").hide();
-			}
-			
-		});
+		var menu = $("#menu");
 		
-		var nestedmenu = $("#menu").nestedmenu({
-			select: function(event, ui) {
-				$("#log").append("<div>Selected " + ui.item.text() + "</div>");
-			}
-		}).hide();
-		
-		$("button").click(function(event) {
+		var button = $("button").click(function(event) {
 			// TODO required to prevent the click handler below from handling this event
 			event.stopPropagation();
-			nestedmenu.nestedmenu("show")
+			menu.flyoutmenu("show")
+				//.attr("tabIndex", 0)
+				.focus()
 				.css({
 					top: 0,
 					left: 0
@@ -96,78 +40,17 @@
 					of: this
 				});
 			$(document).one("click", function() {
-				nestedmenu.nestedmenu("hide");
-			})
-		}).keydown(function(event) {
-			var menu = nestedmenu.data("nestedmenu").active.data("menu");
-			if (menu.widget().is(":hidden"))
-				return;
-			event.stopPropagation();
-			switch (event.keyCode) {
-			case $.ui.keyCode.PAGE_UP:
-				menu.previousPage(event);
-				break;
-			case $.ui.keyCode.PAGE_DOWN:
-				menu.nextPage(event);
-				break;
-			case $.ui.keyCode.UP:
-				menu.previous(event);
-				break;
-			case $.ui.keyCode.LEFT:
-				nestedmenu.nestedmenu("up", event);
-				break;
-			case $.ui.keyCode.RIGHT:
-				nestedmenu.nestedmenu("down", event);
-				break;
-			case $.ui.keyCode.DOWN:
-				menu.next(event);
-				event.preventDefault();
-				break;
-			case $.ui.keyCode.ENTER:
-			case $.ui.keyCode.TAB:
-				menu.select();
-				nestedmenu.nestedmenu("hide");
-				event.preventDefault();
-				break;
-			case $.ui.keyCode.ESCAPE:
-				nestedmenu.nestedmenu("hide");
-				break;
-			default:
-				clearTimeout(menu.filterTimer);
-				var prev = menu.previousFilter || "";
-				var character = String.fromCharCode(event.keyCode);
-				var skip = false;
-				if (character == prev) {
-					skip = true;
-				} else {
-					character = prev + character;
-				}
-				
-				var match = menu.widget().children("li").filter(function() {
-					return new RegExp("^" + character, "i").test($("a", this).text());
-				});
-				var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match;
-				if (!match.length) {
-					character = String.fromCharCode(event.keyCode);
-					match = menu.widget().children("li").filter(function() {
-						return new RegExp("^" + character, "i").test($(this).text());
-					});
-				}
-				if (match.length) {
-					menu.activate(event, match);
-					if (match.length > 1) {
-						menu.previousFilter = character;
-						menu.filterTimer = setTimeout(function() {
-							delete menu.previousFilter;
-						}, 1000);
-					} else {
-						delete menu.previousFilter;
-					}
-				} else {
-					delete menu.previousFilter;
-				}
-			}
+				menu.flyoutmenu("hide");
+			});
 		});
+
+		menu.flyoutmenu({
+			//input: button,
+			select: function(event, ui) {
+				$("#log").append("<div>Selected " + ui.item.children("a").text() + "</div>");
+				button.focus();
+			}
+		}).hide();
 	});
 	</script>
 	<style>