r3371 committed - autocomplete and menu: first attempt a paging

r3371 committed - autocomplete and menu: first attempt a paging


Revision: 3371
Author: joern.zaefferer
Date: Sat Oct 17 05:04:47 2009
Log: autocomplete and menu: first attempt a paging
http://code.google.com/p/jquery-ui/source/detail?r=3371
Modified:
/branches/dev/tests/visual/menu/default.html
/branches/dev/ui/jquery.ui.autocomplete.js
/branches/dev/ui/jquery.ui.menu.js
=======================================
--- /branches/dev/tests/visual/menu/default.html    Sat Sep 26 04:12:14 2009
+++ /branches/dev/tests/visual/menu/default.html    Sat Oct 17 05:04:47 2009
@@ -17,10 +17,14 @@
            top: 10
        }).appendTo(document.body).themeswitcher();
-        $("#menu1, #menu2").menu({
+        var menus = $("#menu1, #menu2").menu({
            selected: function(event, ui) {
                $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
            }
+        });
+
+        $("#controls button").click(function() {
+            menus.menu(this.id);
        });
    });
    </script>
@@ -29,6 +33,13 @@
    </style>
</head>
<body>
+
+<div id="controls">
+    <button id="next">Next</button>
+    <button id="previous">Previous</button>
+    <button id="nextPage">Next Page</button>
+    <button id="previousPage">Previous Page</button>
+</div>
<ul id="menu1">
    <li><a href="#">Aberdeen</a></li>
=======================================
--- /branches/dev/ui/jquery.ui.autocomplete.js    Tue Sep 29 15:49:34 2009
+++ /branches/dev/ui/jquery.ui.autocomplete.js    Sat Oct 17 05:04:47 2009
@@ -21,11 +21,17 @@
        // keyup is triggered only once when hold down, keypress multiple times
        .keypress(function(event) {
            switch(event.keyCode) {
+            case $.ui.keyCode.PAGE_UP:
+                self.move("previousPage");
+                break;
+            case $.ui.keyCode.PAGE_DOWN:
+                self.move("nextPage");
+                break;
            case $.ui.keyCode.UP:
-                self.focusUp();
+                self.move("previous");
                break;
            case $.ui.keyCode.DOWN:
-                self.focusDown();
+                self.move("next");
                break;
            case $.ui.keyCode.ENTER:
                self.select();
@@ -160,20 +166,12 @@
        });
    },
-    focusUp: function() {
+    move: function(direction) {
        if (!this.menu) {
            this.search();
            return;
        }
-        this.menu.menu("previous");
-    },
-
-    focusDown: function() {
-        if (!this.menu) {
-            this.search();
-            return;
-        }
-        this.menu.menu("next");
+        this.menu.menu(direction);
    },
    select: function() {
=======================================
--- /branches/dev/ui/jquery.ui.menu.js    Tue Sep 29 15:36:34 2009
+++ /branches/dev/ui/jquery.ui.menu.js    Sat Oct 17 05:04:47 2009
@@ -42,30 +42,54 @@
    },
    next: function() {
+        this.move("next", "li:first");
+    },
+
+    previous: function() {
+        this.move("prev", "li:last");
+    },
+
+    move: function(direction, edge) {
        if (!this.activeitem) {
-            this.activate(this.element.children("li:first").children("a"));
+            this.activate(this.element.children(edge).children("a"));
            return;
        }
        this.deactivate(this.activeitem);
-        var next = this.activeitem.parent().next();
+        var next = this.activeitem.parent()[direction]();
        if (next.length) {
            this.activate(next.children("a"));
        } else {
-            this.activate(this.element.children("li:first").children("a"));
-        }
+            this.activate(this.element.children(edge).children("a"));
+        }
+
+        /* scroll when necessary; need to adapt this code...
+        var offset = 0;
+        listItems.slice(0, active).each(function() {
+            offset += this.offsetHeight;
+        });
+        if ((offset + activeItem[0].offsetHeight - list.scrollTop()) >
list[0].clientHeight) {
+            list.scrollTop(offset + activeItem[0].offsetHeight -
list.innerHeight());
+        } else if (offset < list.scrollTop()) {
+            list.scrollTop(offset);
+        }
+        */
    },
-    previous: function() {
-        if (!this.activeitem) {
-            this.activate(this.element.children("li:last").children("a"));
-            return;
-        }
-        this.deactivate(this.activeitem);
-        var prev = this.activeitem.parent().prev();
-        if (prev.length) {
-            this.activate(prev.children("a"));
-        } else {
-            this.activate(this.element.children("li:last").children("a"));
+    nextPage: function() {
+        // TODO calculate pagesize
+        var pagesize = 8;
+        for (var i = 0; i < pagesize; i++) {
+            // TODO prevent triggering a focus event multiple times
+            this.move("next", "li:first");
+        }
+    },
+
+    previousPage: function() {
+        // TODO calculate pagesize
+        var pagesize = 8;
+        for (var i = 0; i < pagesize; i++) {
+            // TODO prevent triggering a focus event multiple times
+            this.move("prev", "li:last");
        }
    },