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

Ox.Element: add custom mousewheel event

Browse source
This commit is contained in:
rolux 2013-12-04 23:44:07 +01:00
parent 9ea8e0352d
commit 56c5998668
1 changed files with 44 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
source/Ox.UI/js/Core/Element.js
View file

@ -66,6 +66,12 @@ Ox.Element <f> Basic UI element object
on mouseleave or mouseup (this fires like a key that is being on mouseleave or mouseup (this fires like a key that is being
pressed and held, and is useful for buttons like scrollbars arrows pressed and held, and is useful for buttons like scrollbars arrows
that need to react to both clicking and holding) that need to react to both clicking and holding)
mousewheel <!> mousewheel
Fires on mousewheel scroll or trackpad swipe
deltaFactor <n> Original delta = normalized delta * delta factor
deltaX <n> Normalized horizontal scroll delta in px
deltaY <n> Vertical scroll delta in px
* <*> Original event properties
singleclick <!> singleclick singleclick <!> singleclick
Fires 250 ms after mouseup, if there was no subsequent mousedown Fires 250 ms after mouseup, if there was no subsequent mousedown
(this is useful if one wants to listen for both singleclicks and (this is useful if one wants to listen for both singleclicks and
@ -87,7 +93,10 @@ Ox.Element = function(options, self) {
// create public object // create public object
var that = new Ox.JQueryElement($(self.options.element || '<div>')) var that = new Ox.JQueryElement($(self.options.element || '<div>'))
.addClass('OxElement') .addClass('OxElement')
.on({mousedown: mousedown}); .on({
mousedown: mousedown,
mousewheel: mousewheel
});
if (self.options.element == '<iframe>') { if (self.options.element == '<iframe>') {
that.on('load', function() { that.on('load', function() {
@ -220,6 +229,40 @@ Ox.Element = function(options, self) {
that.$tooltip.options({title: self.options.tooltip(e)}).show(e); that.$tooltip.options({title: self.options.tooltip(e)}).show(e);
} }
function mousewheel(e) {
// see https://github.com/brandonaaron/jquery-mousewheel/blob/master/jquery.mousewheel.js
e = e.originalEvent;
var absDelta,
deltaX = 'deltaX' in e ? e.deltaX
: 'wheelDeltaX' in e ? -e.wheelDeltaX
: 0,
deltaY = 'deltaY' in e ? -e.deltaY
: 'wheelDeltaY' in e ? e.wheelDeltaY
: 'wheelDelta' in e ? e.wheelDelta
: 0;
// Firefox < 17
if ('axis' in e && e.axis === e.HORIZONTAL_AXIS) {
deltaX = -deltaY;
deltaY = 0;
}
Ox.print('MOUSEWHEEL', e, deltaX, deltaY)
if (deltaX || deltaY) {
absDelta = Math.max(Math.abs(deltaY), Math.abs(deltaX));
if (!self._deltaFactor || self._deltaFactor > absDelta) {
self._deltaFactor = absDelta;
}
that.triggerEvent('mousewheel', Ox.extend(e, {
deltaFactor: self._deltaFactor,
deltaX: Ox.trunc(deltaX / self._deltaFactor),
deltaY: Ox.trunc(deltaY / self._deltaFactor)
}));
clearTimeout(self._deltaTimeout)
self._deltaTimeout = setTimeout(function() {
self._deltaFactor = null;
}, 200);
}
}
// TODO: in other widgets, use this, // TODO: in other widgets, use this,
// rather than some self.$tooltip that // rather than some self.$tooltip that
// will not get garbage collected // will not get garbage collected