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) +
' 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);