Merge branch 'master' into tooltip

author: jzaefferer <joern.zaefferer@gmail.com> 2010-03-26 12:45:32 -0400
committer: jzaefferer <joern.zaefferer@gmail.com> 2010-03-26 12:45:32 -0400
commit: f1933142e485ceaaef9ef52e56abb9f43eaaad2d (patch)
tree: 3b70640ecf55aa40bee9c3c9946268792e39ba30 /tests/visual
parent: e8f397bc145ffd9de4441a269e0d45c5fe1fa9cf (diff)
parent: 6d9caf1e230b7b9a4291a8e3525eefad2f08b6f8 (diff)
download: jquery-ui-f1933142e485ceaaef9ef52e56abb9f43eaaad2d.tar.gz
jquery-ui-f1933142e485ceaaef9ef52e56abb9f43eaaad2d.zip
4 files changed, 493 insertions, 13 deletions
diff --git a/tests/visual/menu/drilldown.html b/tests/visual/menu/drilldown.html
index 78b8cf9f2..a97d8322c 100644
--- a/tests/visual/menu/drilldown.html
+++ b/tests/visual/menu/drilldown.html
@@ -14,7 +14,7 @@
 		$.widget("ui.drilldown", {
 			_init: function() {
 				var self = this;
-				this.active = this.element;
+				this.active = this.element.find(">ul").attr("tabindex", 0);
 				
 				// hide submenus and create indicator icons
 				this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>').end().filter(":first").show();	
@@ -84,17 +84,21 @@
 					parent.parent().removeData("submenu");
 					submenu = submenu.data("submenu");
 				};
+			},
+			
+			widget: function() {
+				return this.element.find(">ul");
 			}
 		});
 		
-		var nestedmenu = $("#drilldown").drilldown({
+		var drilldown = $("#drilldown").drilldown({
 			selected: function(event, ui) {
 				$("#log").append("<div>Selected " + ui.item.text() + "</div>");
 			}
 		});
 		
-		$().keydown(function(event) {
-			var menu = nestedmenu.data("drilldown").active.data("menu");
+		drilldown.drilldown("widget").keydown(function(event) {
+			var menu = drilldown.data("drilldown").active.data("menu");
 			if (menu.widget().is(":hidden"))
 				return;
 			event.stopPropagation();
@@ -109,10 +113,10 @@
 				menu.previous();
 				break;
 			case $.ui.keyCode.LEFT:
-				nestedmenu.nestedmenu("up");
+				drilldown.drilldown("up");
 				break;
 			case $.ui.keyCode.RIGHT:
-				nestedmenu.nestedmenu("down");
+				drilldown.drilldown("down");
 				break;
 			case $.ui.keyCode.DOWN:
 				menu.next();
@@ -121,11 +125,11 @@
 			case $.ui.keyCode.ENTER:
 			case $.ui.keyCode.TAB:
 				menu.select();
-				nestedmenu.nestedmenu("hide");
+				drilldown.drilldown("hide");
 				event.preventDefault();
 				break;
 			case $.ui.keyCode.ESCAPE:
-				nestedmenu.nestedmenu("hide");
+				drilldown.drilldown("hide");
 				break;
 			default:
 				clearTimeout(menu.filterTimer);
diff --git a/tests/visual/menu/drilldown2.html b/tests/visual/menu/drilldown2.html
new file mode 100644
index 000000000..0c18c3679
--- /dev/null
+++ b/tests/visual/menu/drilldown2.html
@@ -0,0 +1,235 @@
+<!doctype html>
+<html>
+<head>
+	<title>Menu Visual Test: Default</title>
+	<link rel="stylesheet" href="../visual.css" type="text/css" />
+	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
+	<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
+	<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.button.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
+	<script type="text/javascript">
+	$(function() {
+		$.widget("ui.drilldown", {
+			_init: function() {
+				var self = this;
+				this.active = this.element.find(">ul").attr("tabindex", 0);
+				
+				// hide submenus and create indicator icons
+				this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>').end().filter(":first").show();	
+				
+				this.element.find("ul").menu({
+					focus: function(event, ui) {
+						self.activeItem = ui.item;
+					},
+					selected: function(event, ui) {
+						if (this != self.active[0]) {
+							return;
+						}
+						var nested = $(">ul", ui.item);
+						if (nested.length) {
+							self._open(nested);
+						} else {
+							self.element.find("h3").text(ui.item.text());
+							self.options.selected.apply(this, arguments);
+						}
+					}
+				});
+				
+				this.back = this.element.children(":last").button({
+					icons: {
+						primary: "ui-icon-carat-1-w"
+					}
+				}).click(function() {
+					self.up();
+					return false;
+				}).hide();
+			},
+			
+			_open: function(submenu) {
+				this.active = submenu.show().css({
+					top: 0,
+					left: 0
+				}).position({
+					my: "left top",
+					at: "left top",
+					of: this.widget()
+				});
+				this.back.show();
+			},
+			
+			up: function() {
+				if (this.active.parent()[0] == this.element[0]) {
+					return;
+				}
+				this.active.hide();
+				this.active = this.active.parent().parent().show();
+				if (!this.active.parent().parent().is(":ui-menu")) {
+					this.back.hide();
+				}
+			},
+			
+			down: function(event) {
+				var nested = this.activeItem.find(">ul");
+				if (nested.length) {
+					this._open(nested);
+					nested.menu("activate", event, nested.children(":first"))
+				}
+			},
+			
+			show: function() {
+			},
+			
+			hide: function() {
+			},
+			
+			widget: function() {
+				return this.element.find(">ul");
+			}
+		});
+		
+		var drilldown = $("#drilldown").drilldown({
+			selected: function(event, ui) {
+				$("#log").append("<div>Selected " + ui.item.text() + "</div>");
+			}
+		});
+		
+		drilldown.drilldown("widget").keydown(function(event) {
+			var menu = drilldown.data("drilldown").active.data("menu");
+			if (menu.widget().is(":hidden"))
+				return;
+			event.stopPropagation();
+			switch (event.keyCode) {
+			case $.ui.keyCode.PAGE_UP:
+				menu.previousPage();
+				break;
+			case $.ui.keyCode.PAGE_DOWN:
+				menu.nextPage();
+				break;
+			case $.ui.keyCode.UP:
+				menu.previous();
+				break;
+			case $.ui.keyCode.LEFT:
+				drilldown.drilldown("up");
+				break;
+			case $.ui.keyCode.RIGHT:
+				drilldown.drilldown("down");
+				break;
+			case $.ui.keyCode.DOWN:
+				menu.next();
+				event.preventDefault();
+				break;
+			case $.ui.keyCode.ENTER:
+			case $.ui.keyCode.TAB:
+				menu.select();
+				drilldown.drilldown("hide");
+				event.preventDefault();
+				break;
+			case $.ui.keyCode.ESCAPE:
+				drilldown.drilldown("hide", event);
+				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>
+	<style>
+		body { font-size:62.5%; }
+		.ui-menu { width: 200px; height: 170px; }
+		.ui-menu .ui-menu { position: absolute; }
+		.ui-menu .ui-icon { float: right; }
+	</style>
+</head>
+<body>
+	
+<div id="drilldown">
+	<h3>Make a selection...</h3>
+	<ul>
+		<li>
+			<a href="#">Amsterdam</a>
+			<ul>
+				<li><a href="#">Aberdeen</a></li>
+				<li><a href="#">Ada</a></li>
+				<li>
+					<a href="#">Adamsville</a>
+					<ul>
+						<li><a href="#">Anaheim</a></li>
+						<li>
+							<a href="#">Cologne</a>
+							<ul>
+								<li><a href="#">Mberdeen</a></li>
+								<li><a href="#">Mda</a></li>
+								<li><a href="#">Mdamsville</a></li>
+								<li><a href="#">Mddyston</a></li>
+								<li><a href="#">Mmesville</a></li>
+							</ul>
+						</li>
+						<li><a href="#">Frankfurt</a></li>
+					</ul>
+				</li>
+				<li><a href="#">Addyston</a></li>
+				<li><a href="#">Amesville</a></li>
+			</ul>
+		</li>
+		<li><a href="#">Anaheim</a></li>
+		<li><a href="#">Cologne</a></li>
+		<li><a href="#">Frankfurt</a></li>
+		<li>
+			<a href="#">Magdeburg</a>
+			<ul>
+				<li><a href="#">Mberdeen</a></li>
+				<li><a href="#">Mda</a></li>
+				<li><a href="#">Mdamsville</a></li>
+				<li><a href="#">Mddyston</a></li>
+				<li><a href="#">Mmesville</a></li>
+			</ul>
+		</li>
+		<li><a href="#">Munich</a></li>
+		<li><a href="#">Utrecht</a></li>
+		<li><a href="#">Zurich</a></li>
+	</ul>
+	<a href="#">Go back</a>
+</div>
+
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
+	Log:
+	<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
+</div>
+
+</body>
+</html>
diff --git a/tests/visual/menu/nested.html b/tests/visual/menu/nested.html
index a332e2440..96a0379d3 100644
--- a/tests/visual/menu/nested.html
+++ b/tests/visual/menu/nested.html
@@ -106,11 +106,16 @@
 		$("button").click(function(event) {
 			// TODO required to prevent the click handler below from handling this event
 			event.stopPropagation();
-			nestedmenu.nestedmenu("show").position({
-				my: "left top",
-				at: "right top",
-				of: event.pageX > 0 ? event : this
-			});
+			nestedmenu.nestedmenu("show")
+				.css({
+					top: 0,
+					left: 0
+				})
+				.position({
+					my: "left top",
+					at: "right top",
+					of: this
+				});
 			$(document).one("click", function() {
 				nestedmenu.nestedmenu("hide");
 			})
diff --git a/tests/visual/menu/nested2.html b/tests/visual/menu/nested2.html
new file mode 100644
index 000000000..063b946c7
--- /dev/null
+++ b/tests/visual/menu/nested2.html
@@ -0,0 +1,236 @@
+<!doctype html>
+<html>
+<head>
+	<title>Menu Visual Test: Default</title>
+	<link rel="stylesheet" href="../visual.css" type="text/css" />
+	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
+	<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
+	<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.autocomplete.js"></script>
+	<script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.1.js"></script>
+	<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
+	<script type="text/javascript">
+	$(function() {
+		$.fn.themeswitcher && $('<div/>').css({
+			position: "absolute",
+			right: 10,
+			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({
+					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();
+			}
+			
+		});
+		
+		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>
+	<style>
+		body { font-size:62.5%; }
+		.ui-menu { width: 200px; position: absolute; }
+		.ui-menu .ui-icon { float: right; }
+	</style>
+</head>
+<body>
+	
+<button>Show context menu</button>
+<br/>
+<select>
+	<option>some option with some text</option>
+</select>
+
+<ul id="menu">
+	<li>
+		<a href="#">Amsterdam</a>
+		<ul>
+			<li><a href="#">Aberdeen</a></li>
+			<li><a href="#">Ada</a></li>
+			<li>
+				<a href="#">Adamsville</a>
+				<ul>
+					<li><a href="#">Anaheim</a></li>
+					<li>
+						<a href="#">Cologne</a>
+						<ul>
+							<li><a href="#">Mberdeen</a></li>
+							<li><a href="#">Mda</a></li>
+							<li><a href="#">Mdamsville</a></li>
+							<li><a href="#">Mddyston</a></li>
+							<li><a href="#">Mmesville</a></li>
+						</ul>
+					</li>
+					<li><a href="#">Frankfurt</a></li>
+				</ul>
+			</li>
+			<li><a href="#">Addyston</a></li>
+			<li><a href="#">Amesville</a></li>
+		</ul>
+	</li>
+	<li><a href="#">Anaheim</a></li>
+	<li><a href="#">Cologne</a></li>
+	<li><a href="#">Frankfurt</a></li>
+	<li>
+		<a href="#">Magdeburg</a>
+		<ul>
+			<li><a href="#">Mberdeen</a></li>
+			<li><a href="#">Mda</a></li>
+			<li><a href="#">Mdamsville</a></li>
+			<li><a href="#">Mddyston</a></li>
+			<li><a href="#">Mmesville</a></li>
+		</ul>
+	</li>
+	<li><a href="#">Munich</a></li>
+	<li><a href="#">Utrecht</a></li>
+	<li><a href="#">Zurich</a></li>
+</ul>
+
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
+	Log:
+	<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
+</div>
+
+</body>
+</html>
author	jzaefferer <joern.zaefferer@gmail.com>	2010-03-26 12:45:32 -0400
committer	jzaefferer <joern.zaefferer@gmail.com>	2010-03-26 12:45:32 -0400
commit	f1933142e485ceaaef9ef52e56abb9f43eaaad2d (patch)
tree	3b70640ecf55aa40bee9c3c9946268792e39ba30 /tests/visual
parent	e8f397bc145ffd9de4441a269e0d45c5fe1fa9cf (diff)
parent	6d9caf1e230b7b9a4291a8e3525eefad2f08b6f8 (diff)
download	jquery-ui-f1933142e485ceaaef9ef52e56abb9f43eaaad2d.tar.gz jquery-ui-f1933142e485ceaaef9ef52e56abb9f43eaaad2d.zip