From 42fdba68b8586972b11515b0a39da2a3020f7ef7 Mon Sep 17 00:00:00 2001 From: Rolux Date: Fri, 5 Feb 2010 20:29:24 +0530 Subject: [PATCH] some menu scrolling --- build/js/ox.ui.js | 66 ++++++++++++++++++++++++++-------------------- demos/test/menu.js | 15 ++++++++++- 2 files changed, 51 insertions(+), 30 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 41a197d..7b93612 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -458,6 +458,7 @@ requires $(function() { $document.keydown(keydown); + $document.keypress(keydown); }); function keydown(event) { var key, @@ -1757,9 +1758,9 @@ requires "OxMenu Ox" + Ox.toTitleCase(self.options.side) + " Ox" + Ox.toTitleCase(self.options.size) ), - itemHeight = options.size == "small" ? 12 : (options.size == "medium" ? 16 : 20), - scrollSpeed = 1, - $item; + itemHeight = self.options.size == "small" ? 12 : (self.options.size == "medium" ? 16 : 20), + scrollSpeed = 1, // fixme: should this be self.scrollSpeed? + $item; // fixme: used? // construct that.items = []; @@ -1835,7 +1836,8 @@ requires } function constructScrollbar(direction) { - var interval; + var interval, + speed = direction == "up" ? -1 : 1; return $("
", { "class": "OxScrollbar Ox" + Ox.toTitleCase(direction), html: oxui.symbols["triangle_" + direction], @@ -1858,9 +1860,9 @@ requires }); } } - scrollMenu(direction == "up" ? -1 : 1); + scrollMenu(speed); interval = setInterval(function() { - scrollMenu(direction == "up" ? -1 : 1); + scrollMenu(speed); }, 100); }, mouseleave: function() { @@ -1918,22 +1920,17 @@ requires if (top <= min) { top = min; that.$scrollbars.down.hide().trigger("mouseleave"); - that.$container.css({ - height: (containerHeight + itemHeight) + "px" - }); - that.$items[that.$items.length - 1].trigger("mouseover"); + that.$container.height(containerHeight + itemHeight); + that.items[that.items.length - 1].trigger("mouseover"); } else if (top >= max - itemHeight) { top = max; that.$scrollbars.up.hide().trigger("mouseleave"); - that.$container.css({ - height: (containerHeight + itemHeight) + "px" - }); - that.$items[0].trigger("mouseover"); + that.$container.height(containerHeight + itemHeight); + that.items[0].trigger("mouseover"); } that.$content.css({ top: top + "px" }); - } function selectNextItem() { @@ -1994,12 +1991,19 @@ requires that.hideMenu = function() { Ox.print("hideMenu") $.each(that.submenus, function(i, submenu) { - if (!submenu.is(":hidden")) { + if (submenu.is(":visible")) { submenu.hideMenu(); return false; } }); // fixme: scroll menu back up! + if (that.$scrollbars.up.is(":visible")) { + that.$content.css({ + top: "0px" + }); + that.$scrollbars.up.hide(); + that.$container.height(that.$container.height() + itemHeight); + } that.hide(); if (self.options.selected > -1) { that.items[self.options.selected].trigger("mouseleave"); @@ -2028,12 +2032,14 @@ requires height = self.options.element.outerHeight(), left = offset.left + self.options.offset.left + (self.options.side == "bottom" ? 0 : width), top = offset.top + self.options.offset.top + (self.options.side == "bottom" ? height : 0), - maxHeight = Math.floor(($window.height() - top - 12) / itemHeight) * itemHeight; + menuHeight = that.outerHeight(), + maxHeight = Math.floor($window.height() - top - 16); + Ox.print("height", height, "maxHeight", maxHeight); that.css({ left: left + "px", top: top + "px" }).show(); - if (height > maxHeight) { + if (menuHeight > maxHeight) { that.$container.height(maxHeight - itemHeight); that.$scrollbars.down.show(); } @@ -2133,23 +2139,25 @@ requires ); function click() { - if (!that.hasClass("OxDisabled") && !self.options.items.length) { + if (!that.hasClass("OxDisabled")) { self.options.menu.hideMenu(); if (self.options.menu.options("parent")) { self.options.menu.options("parent").hideMenu(); } - if (self.options.checked !== null && (!self.options.group || !self.options.checked)) { - that.options({ - checked: !self.options.checked + if (!self.options.items.length) { + if (self.options.checked !== null && (!self.options.group || !self.options.checked)) { + that.options({ + checked: !self.options.checked + }); + } + if (self.options.title.length == 2) { + that.toggleTitle(); + } + Ox.Event.trigger("OxClickMenu", { + id: self.options.id, + value: self.options.title // fixme: value or title? }); } - if (self.options.title.length == 2) { - that.toggleTitle(); - } - Ox.Event.trigger("OxClickMenu", { - id: self.options.id, - value: self.options.title // fixme: value or title? - }); } } diff --git a/demos/test/menu.js b/demos/test/menu.js index 823e6e0..46de27a 100644 --- a/demos/test/menu.js +++ b/demos/test/menu.js @@ -97,7 +97,20 @@ $(function() { title: "Twelfth" }, ], - title: "Even More", + title: "Even More" + }, + {}, + { + id: "foo", + title: "Foo" + }, + { + id: "bar", + title: "Bar" + }, + { + id: "baz", + title: "Baz" } ] });