Implemented menu/nested2 visual test, implementation doesn't rip DOM apart, way simpl...

diff --git a/tests/visual/menu/nested2.html b/tests/visual/menu/nested2.html
index 7bd494647b2052a8b161610df3211a39474407f3..063b946c7b322e863eb9141eac2913a6d7d7cb2a 100644 (file)
--- 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>