From 39d02953b3f89cd1cda812097424448fc4ad207c Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Fri, 11 Nov 2011 10:24:49 +0000 Subject: [PATCH] support mousewheel in menus --- source/Ox.UI/js/Menu/Ox.Menu.js | 66 +++++++++++++++++++++------------ 1 file changed, 42 insertions(+), 24 deletions(-) diff --git a/source/Ox.UI/js/Menu/Ox.Menu.js b/source/Ox.UI/js/Menu/Ox.Menu.js index 9d51d377..078a4cf3 100644 --- a/source/Ox.UI/js/Menu/Ox.Menu.js +++ b/source/Ox.UI/js/Menu/Ox.Menu.js @@ -51,10 +51,13 @@ Ox.Menu = function(options, self) { 'OxMenu Ox' + Ox.toTitleCase(self.options.side) + ' Ox' + Ox.toTitleCase(self.options.size) ) - .click(click) - .mouseenter(mouseenter) - .mouseleave(mouseleave) - .mousemove(mousemove) + .bind({ + click: click, + mouseenter: mouseenter, + mouseleave: mouseleave, + mousemove: mousemove, + mousewheel: mousewheel + }) .bindEvent({ key_up: selectPreviousItem, key_down: selectNextItem, @@ -63,11 +66,12 @@ Ox.Menu = function(options, self) { key_escape: hideMenu, key_enter: clickSelectedItem }), - itemHeight = self.options.size == 'small' ? 12 : (self.options.size == 'medium' ? 16 : 20), // menuHeight, - scrollSpeed = 1, $item; // fixme: used? - // fixme: attach all private vars to self + + self.itemHeight = self.options.size == 'small' + ? 12 : self.options.size == 'medium' ? 16 : 20; + self.scrollSpeed = 1; // construct that.items = []; @@ -260,18 +264,19 @@ Ox.Menu = function(options, self) { return false; }, mousedown: function() { - scrollSpeed = 2; + self.scrollSpeed = 2; return false; }, mouseenter: function() { + self.scrollSpeed = 1; var $otherScrollbar = that.$scrollbars[direction == 'up' ? 'down' : 'up']; $(this).addClass('OxSelected'); if ($otherScrollbar.is(':hidden')) { $otherScrollbar.show(); - that.$container.height(that.$container.height() - itemHeight); + that.$container.height(that.$container.height() - self.itemHeight); if (direction == 'down') { that.$content.css({ - top: -itemHeight + 'px' + top: -self.itemHeight + 'px' }); } } @@ -281,11 +286,12 @@ Ox.Menu = function(options, self) { }, 100); }, mouseleave: function() { + self.scrollSpeed = 1; $(this).removeClass('OxSelected'); clearInterval(interval); }, mouseup: function() { - scrollSpeed = 1; + self.scrollSpeed = 1; return false; } }); @@ -369,22 +375,34 @@ Ox.Menu = function(options, self) { } } + function mousewheel(e, delta, deltaX, deltaY) { + var $scrollbar; + if (deltaY && !$(e.target).is('.OxScrollbar')) { + $scrollbar = that.$scrollbars[deltaY < 0 ? 'down' : 'up']; + Ox.loop(0, Math.abs(deltaY), function() { + if ($scrollbar.is(':visible')) { + $scrollbar.trigger('mouseenter').trigger('mouseleave'); + } + }); + } + } + function scrollMenu(speed) { var containerHeight = that.$container.height(), contentHeight = that.$content.height(), top = parseInt(that.$content.css('top')) || 0, - min = containerHeight - contentHeight + itemHeight, + min = containerHeight - contentHeight + self.itemHeight, max = 0; - top += speed * scrollSpeed * -itemHeight; + top += speed * self.scrollSpeed * -self.itemHeight; if (top <= min) { top = min; that.$scrollbars.down.hide().trigger('mouseleave'); - that.$container.height(containerHeight + itemHeight); + that.$container.height(containerHeight + self.itemHeight); that.items[that.items.length - 1].trigger('mouseover'); - } else if (top >= max - itemHeight) { + } else if (top >= max - self.itemHeight) { top = max; that.$scrollbars.up.hide().trigger('mouseleave'); - that.$container.height(containerHeight + itemHeight); + that.$container.height(containerHeight + self.itemHeight); that.items[0].trigger('mouseover'); } that.$content.css({ @@ -401,7 +419,7 @@ Ox.Menu = function(options, self) { if (that.$scrollbars.down.is(':hidden')) { that.$scrollbars.down.show(); } else { - that.$container.height(that.$container.height() + itemHeight); + that.$container.height(that.$container.height() + self.itemHeight); } } } @@ -454,17 +472,17 @@ Ox.Menu = function(options, self) { selected++; } while (that.items[selected].options('disabled')) selectItem(selected); - offset = that.items[selected].offset().top + itemHeight - + offset = that.items[selected].offset().top + self.itemHeight - that.$container.offset().top - that.$container.height(); if (offset > 0) { if (that.$scrollbars.up.is(':hidden')) { that.$scrollbars.up.show(); - that.$container.height(that.$container.height() - itemHeight); - offset += itemHeight; + that.$container.height(that.$container.height() - self.itemHeight); + offset += self.itemHeight; } if (selected == that.items.length - 1) { that.$scrollbars.down.hide(); - that.$container.height(that.$container.height() + itemHeight); + that.$container.height(that.$container.height() + self.itemHeight); } else { that.$content.css({ top: ((parseInt(that.$content.css('top')) || 0) - offset) + 'px' @@ -490,11 +508,11 @@ Ox.Menu = function(options, self) { if (offset < 0) { if (that.$scrollbars.down.is(':hidden')) { that.$scrollbars.down.show(); - that.$container.height(that.$container.height() - itemHeight); + that.$container.height(that.$container.height() - self.itemHeight); } if (selected == 0) { that.$scrollbars.up.hide(); - that.$container.height(that.$container.height() + itemHeight); + that.$container.height(that.$container.height() + self.itemHeight); } that.$content.css({ top: ((parseInt(that.$content.css('top')) || 0) - offset) + 'px' @@ -728,7 +746,7 @@ Ox.Menu = function(options, self) { top: top + 'px' }); if (menuHeight > menuMaxHeight) { - that.$container.height(menuMaxHeight - itemHeight - 8); // margin + that.$container.height(menuMaxHeight - self.itemHeight - 8); // margin that.$scrollbars.down.show(); } else { that.$container.height(menuHeight);