0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

support mousewheel in menus

Browse source
This commit is contained in:
rlx 2011-11-11 10:24:49 +00:00
parent 04da8c0994
commit 39d02953b3
1 changed files with 42 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
source/Ox.UI/js/Menu/Ox.Menu.js
View file

@ -51,10 +51,13 @@ Ox.Menu = function(options, self) {
'OxMenu Ox' + Ox.toTitleCase(self.options.side) + 'OxMenu Ox' + Ox.toTitleCase(self.options.side) +
' Ox' + Ox.toTitleCase(self.options.size) ' Ox' + Ox.toTitleCase(self.options.size)
) )
.click(click) .bind({
.mouseenter(mouseenter) click: click,
.mouseleave(mouseleave) mouseenter: mouseenter,
.mousemove(mousemove) mouseleave: mouseleave,
mousemove: mousemove,
mousewheel: mousewheel
})
.bindEvent({ .bindEvent({
key_up: selectPreviousItem, key_up: selectPreviousItem,
key_down: selectNextItem, key_down: selectNextItem,
@ -63,11 +66,12 @@ Ox.Menu = function(options, self) {
key_escape: hideMenu, key_escape: hideMenu,
key_enter: clickSelectedItem key_enter: clickSelectedItem
}), }),
itemHeight = self.options.size == 'small' ? 12 : (self.options.size == 'medium' ? 16 : 20),
// menuHeight, // menuHeight,
scrollSpeed = 1,
$item; // fixme: used? $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 // construct
that.items = []; that.items = [];
@ -260,18 +264,19 @@ Ox.Menu = function(options, self) {
return false; return false;
}, },
mousedown: function() { mousedown: function() {
scrollSpeed = 2; self.scrollSpeed = 2;
return false; return false;
}, },
mouseenter: function() { mouseenter: function() {
self.scrollSpeed = 1;
var $otherScrollbar = that.$scrollbars[direction == 'up' ? 'down' : 'up']; var $otherScrollbar = that.$scrollbars[direction == 'up' ? 'down' : 'up'];
$(this).addClass('OxSelected'); $(this).addClass('OxSelected');
if ($otherScrollbar.is(':hidden')) { if ($otherScrollbar.is(':hidden')) {
$otherScrollbar.show(); $otherScrollbar.show();
that.$container.height(that.$container.height() - itemHeight); that.$container.height(that.$container.height() - self.itemHeight);
if (direction == 'down') { if (direction == 'down') {
that.$content.css({ that.$content.css({
top: -itemHeight + 'px' top: -self.itemHeight + 'px'
}); });
} }
} }
@ -281,11 +286,12 @@ Ox.Menu = function(options, self) {
}, 100); }, 100);
}, },
mouseleave: function() { mouseleave: function() {
self.scrollSpeed = 1;
$(this).removeClass('OxSelected'); $(this).removeClass('OxSelected');
clearInterval(interval); clearInterval(interval);
}, },
mouseup: function() { mouseup: function() {
scrollSpeed = 1; self.scrollSpeed = 1;
return false; 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) { function scrollMenu(speed) {
var containerHeight = that.$container.height(), var containerHeight = that.$container.height(),
contentHeight = that.$content.height(), contentHeight = that.$content.height(),
top = parseInt(that.$content.css('top')) || 0, top = parseInt(that.$content.css('top')) || 0,
min = containerHeight - contentHeight + itemHeight, min = containerHeight - contentHeight + self.itemHeight,
max = 0; max = 0;
top += speed * scrollSpeed * -itemHeight; top += speed * self.scrollSpeed * -self.itemHeight;
if (top <= min) { if (top <= min) {
top = min; top = min;
that.$scrollbars.down.hide().trigger('mouseleave'); 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'); that.items[that.items.length - 1].trigger('mouseover');
} else if (top >= max - itemHeight) { } else if (top >= max - self.itemHeight) {
top = max; top = max;
that.$scrollbars.up.hide().trigger('mouseleave'); that.$scrollbars.up.hide().trigger('mouseleave');
that.$container.height(containerHeight + itemHeight); that.$container.height(containerHeight + self.itemHeight);
that.items[0].trigger('mouseover'); that.items[0].trigger('mouseover');
} }
that.$content.css({ that.$content.css({
@ -401,7 +419,7 @@ Ox.Menu = function(options, self) {
if (that.$scrollbars.down.is(':hidden')) { if (that.$scrollbars.down.is(':hidden')) {
that.$scrollbars.down.show(); that.$scrollbars.down.show();
} else { } 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++; selected++;
} while (that.items[selected].options('disabled')) } while (that.items[selected].options('disabled'))
selectItem(selected); selectItem(selected);
offset = that.items[selected].offset().top + itemHeight - offset = that.items[selected].offset().top + self.itemHeight -
that.$container.offset().top - that.$container.height(); that.$container.offset().top - that.$container.height();
if (offset > 0) { if (offset > 0) {
if (that.$scrollbars.up.is(':hidden')) { if (that.$scrollbars.up.is(':hidden')) {
that.$scrollbars.up.show(); that.$scrollbars.up.show();
that.$container.height(that.$container.height() - itemHeight); that.$container.height(that.$container.height() - self.itemHeight);
offset += itemHeight; offset += self.itemHeight;
} }
if (selected == that.items.length - 1) { if (selected == that.items.length - 1) {
that.$scrollbars.down.hide(); that.$scrollbars.down.hide();
that.$container.height(that.$container.height() + itemHeight); that.$container.height(that.$container.height() + self.itemHeight);
} else { } else {
that.$content.css({ that.$content.css({
top: ((parseInt(that.$content.css('top')) || 0) - offset) + 'px' top: ((parseInt(that.$content.css('top')) || 0) - offset) + 'px'
@ -490,11 +508,11 @@ Ox.Menu = function(options, self) {
if (offset < 0) { if (offset < 0) {
if (that.$scrollbars.down.is(':hidden')) { if (that.$scrollbars.down.is(':hidden')) {
that.$scrollbars.down.show(); that.$scrollbars.down.show();
that.$container.height(that.$container.height() - itemHeight); that.$container.height(that.$container.height() - self.itemHeight);
} }
if (selected == 0) { if (selected == 0) {
that.$scrollbars.up.hide(); that.$scrollbars.up.hide();
that.$container.height(that.$container.height() + itemHeight); that.$container.height(that.$container.height() + self.itemHeight);
} }
that.$content.css({ that.$content.css({
top: ((parseInt(that.$content.css('top')) || 0) - offset) + 'px' top: ((parseInt(that.$content.css('top')) || 0) - offset) + 'px'
@ -728,7 +746,7 @@ Ox.Menu = function(options, self) {
top: top + 'px' top: top + 'px'
}); });
if (menuHeight > menuMaxHeight) { if (menuHeight > menuMaxHeight) {
that.$container.height(menuMaxHeight - itemHeight - 8); // margin that.$container.height(menuMaxHeight - self.itemHeight - 8); // margin
that.$scrollbars.down.show(); that.$scrollbars.down.show();
} else { } else {
that.$container.height(menuHeight); that.$container.height(menuHeight);