Implemented menu/nested2 visual test, implementation doesn't rip DOM apart, way simpler then original approach

1 files changed, 145 insertions, 19 deletions

diff --git a/tests/visual/menu/nested2.html b/tests/visual/menu/nested2.html
index 7bd494647..063b946c7 100644
--- a/tests/visual/menu/nested2.html
+++ b/tests/visual/menu/nested2.html
@@ -19,25 +19,152 @@
 			top: 10
 		}).appendTo(document.body).themeswitcher();
 		
-		$.fn.position2 = function(options) {
-			return this.css({
-				top: 0,
-				left: 0
-			}).position(options);
-		}
-		var menus = $("#menu").menu().position2({
-			my: "left top",
-			at: "center bottom",
-			of: "button"
-		}).find("ul").menu().hide();
-		var sub1 = menus.filter(":first").show().position2({
-			my: "left top",
-			at: "right center",
-			of: "#menu"
+		$.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({
+					selected: this.options.selected,
+					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();
+			}
+			
 		});
-		sub1.find("ul:first").show().position2({
-			of: sub1,
-			offset: "-10 50"
+		
+		var nestedmenu = $("#menu").nestedmenu({
+			selected: function(event, ui) {
+				$("#log").append("<div>Selected " + ui.item.text() + "</div>");
+			}
+		}).hide();
+		
+		$("button").click(function(event) {
+			// TODO required to prevent the click handler below from handling this event
+			event.stopPropagation();
+			nestedmenu.nestedmenu("show")
+				.css({
+					top: 0,
+					left: 0
+				})
+				.position({
+					my: "left top",
+					at: "right top",
+					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;
+				}
+			}
 		});
 	});
 	</script>
@@ -45,7 +172,6 @@
 		body { font-size:62.5%; }
 		.ui-menu { width: 200px; position: absolute; }
 		.ui-menu .ui-icon { float: right; }
-		ul, li {margin: 0; padding: 0}
 	</style>
 </head>
 <body>