An initial version of mouse wheel support has now been committed to svn trunk in [1386]. It differs from the provided patch in a number of API-incompatible ways:
o New property MochiKit.Signal.Event.mouse().wheel contains the numerical mouse wheel offset. o The wheel offset number is inverted, i.e. positive for scrolling down and negative for scrolling up. Seemed more logical to use the Mozilla numbers to me. Docs and tests have been updated. Try it out here: http://mochikit.com/examples/mouse_events/index.html http://mochikit.com/tests/index.html I've only been able to test in FF3 under Linux, so any further testing would be much appreciated. Reply with any bugs found here and I'll try to take a look at them asap. Cheers, /Per On Thu, Jun 12, 2008 at 1:25 AM, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote: > > Ah magic numbers don't you love them :) > > The following link points to a blog entry that goes into detail > about normalising the mouse wheel event so that it can be used > cross browser without going insane. > > http://blog.paranoidferret.com/index.php/2007/10/31/javascript-tutorial-the-scroll-wheel/ > > Most of what I did just stems from that but has been made to be > friendly with MochiKit. > > On Jun 3, 5:39 pm, "Per Cederberg" <[EMAIL PROTECTED]> wrote: >> Thanks! I'll apply this patch shortly to the svn repository. It will >> be committed in parts, separating the actual mouse wheel stuff from >> code fixing other issues in signal(), etc. >> >> One question though. I see that the Mozilla "event.details" value is >> considered equivalent to "-event.wheelDelta / 40". But where does this >> magic number 40 come from? I see from MSDN that wheelDelta is always >> returned in multiples of 120. Is this just assuming that a wheel event >> always scrolls 3 lines? >> >> Cheers, >> >> /Per >> >> On Tue, Jun 3, 2008 at 8:55 AM, [EMAIL PROTECTED] >> >> <[EMAIL PROTECTED]> wrote: >> >> > Below is a patch for adding mousewheel handling to mochikit. It has >> > been made against SVN 1383. >> >> > It contains changes to Signal.js and some demo pages that end up in >> > examples. >> >> > My main need for this is to try and suppress the scrolling of a page >> > after the contents of a div have been fully scrolled. The example >> > manages to do this for FF but fails in IE if you scroll quickly >> > enough. If anybody has any ideas on how to make this work reliably in >> > IE I'd love to hear about it. >> >> > This patch makes no attempt at making all of the signal handling late >> > bound (as mentioned in by Per in a previous message), it just >> > refactors Signal.connect a bit to create custom handlers for mouse >> > wheel events and for the existing mouseenter/leave stuff. >> >> > - Sim >> >> > diff -r 3354b0497e7a MochiKit/Signal.js >> > --- a/MochiKit/Signal.js Fri May 30 12:43:36 2008 +1000 >> > +++ b/MochiKit/Signal.js Tue Jun 03 16:45:16 2008 +1000 >> > @@ -63,7 +63,7 @@ >> > str += '}'; >> > } >> > } >> > - if (this.type() == 'mouseover' || this.type() == 'mouseout' >> > || >> > + if (this.type() == 'mouseover' || this.type() == 'mouseout' >> > || >> > this.type() == 'mouseenter' || this.type() == >> > 'mouseleave') { >> > str += ', relatedTarget(): ' + >> > repr(this.relatedTarget()); >> > } >> > @@ -94,6 +94,13 @@ >> > /** @id MochiKit.Signal.Event.prototype.target */ >> > target: function () { >> > return this._event.target || this._event.srcElement; >> > + }, >> > + >> > + wheelData: function() { >> > + if (! this._wheelData) { >> > + this._wheelData = this._event.detail ? this._event.detail * >> > -1 : this._event.wheelDelta / 40; >> > + } >> > + return this._wheelData; >> > }, >> >> > _relatedTarget: null, >> > @@ -516,10 +523,10 @@ >> > if (sig === 'onload' || sig === 'onunload') { >> > return function (nativeEvent) { >> > obj[func].apply(obj, [new E(src, nativeEvent)]); >> > - >> > + >> > var ident = new MochiKit.Signal.Ident({ >> > source: src, signal: sig, objOrFunc: obj, >> > funcOrStr: func}); >> > - >> > + >> > MochiKit.Signal._disconnect(ident); >> > }; >> > } else { >> > @@ -531,10 +538,10 @@ >> > if (sig === 'onload' || sig === 'onunload') { >> > return function (nativeEvent) { >> > func.apply(obj, [new E(src, nativeEvent)]); >> > - >> > + >> > var ident = new MochiKit.Signal.Ident({ >> > source: src, signal: sig, objOrFunc: func}); >> > - >> > + >> > MochiKit.Signal._disconnect(ident); >> > }; >> > } else { >> > @@ -576,6 +583,69 @@ >> > }; >> > }, >> >> > + _makeMouseEnterListener: function(self,src, sig, func, obj) { >> > + var listener = self._mouseEnterListener(src, sig.substr(2), >> > func, obj); >> > + self._addEventListener(src, >> > + (sig === "onmouseenter") ? >> > "onmouseover" : "onmouseout", >> > + listener ); >> > + return listener; >> > + }, >> > + >> > + _mouseWheelListener: function (src, sig, func, obj) { >> > + var E = MochiKit.Signal.Event; >> > + >> > + // return a closure that smooths over the differences between >> > browsers >> > + return function (nativeEvent) { >> > + var e = new E(src, nativeEvent); >> > + e.type = function () { return sig; }; >> > + >> > + // let the connected function deal with it >> > + if (typeof(func) == "string") { >> > + return obj[func].apply(obj, [e]); >> > + } else { >> > + return func.apply(obj, [e]); >> > + } >> > + }; >> > + }, >> > + >> > + _makeMouseWheelListener: function (self,src,sig,func,obj) { >> > + var listener = self._mouseWheelListener(src, sig.substr(2), >> > func, obj); >> > + >> > + // takes care of IE, Opera, etc >> > + self._addEventListener(src, "onmousewheel", listener ); >> > + >> > + // Mozilla has a totally different name >> > + if (src.addEventListener) { >> > + src.addEventListener("DOMMouseScroll", listener, false); >> > + } >> > + return listener; >> > + }, >> > + >> > + _addEventListener: function(src, sig, listener) { >> > + if (src.addEventListener) { >> > + src.addEventListener(sig.substr(2), listener, false); >> > + } else if (src.attachEvent) { >> > + src.attachEvent(sig, listener); // useCapture unsupported >> > + } >> > + }, >> > + >> > + _makeDOMListener: function(self, src, sig, func, obj) { >> > + // simulated mouse event for those browsers that need it >> > + if ((sig === "onmouseenter" || sig === "onmouseleave") >> > + && !self._browserAlreadyHasMouseEnterAndLeave()) { >> > + return self._makeMouseEnterListener(self,src,sig,func,obj); >> > + } >> > + // special mouse wheel handling >> > + else if (sig === "onmousewheel") { >> > + return self._makeMouseWheelListener(self,src,sig,func,obj); >> > + } >> > + >> > + // default dom listener >> > + var listener = self._listener(src, sig, func, obj, true); >> > + self._addEventListener(src, sig, listener ); >> > + return listener; >> > + }, >> > + >> > _getDestPair: function (objOrFunc, funcOrStr) { >> > var obj = null; >> > var func = null; >> > @@ -613,32 +683,17 @@ >> > obj = src; >> > } >> >> > - var isDOM = !!(src.addEventListener || src.attachEvent); >> > - if (isDOM && (sig === "onmouseenter" || sig === >> > "onmouseleave") >> > - && !self._browserAlreadyHasMouseEnterAndLeave()) { >> > - var listener = self._mouseEnterListener(src, >> > sig.substr(2), func, obj); >> > - if (sig === "onmouseenter") { >> > - sig = "onmouseover"; >> > - } else { >> > - sig = "onmouseout"; >> > - } >> > - } else { >> > - var listener = self._listener(src, sig, func, obj, >> > isDOM); >> > - } >> > - >> > - if (src.addEventListener) { >> > - src.addEventListener(sig.substr(2), listener, false); >> > - } else if (src.attachEvent) { >> > - src.attachEvent(sig, listener); // useCapture unsupported >> > - } >> > + var isDOM = !!(sig.substr(0,2) === "on" && >> > (src.addEventListener || src.attachEvent)); >> > + var listener = isDOM ? self._makeDOMListener(self, src, sig, >> > func, obj) : >> > + self._listener(src, sig, func, obj, false); >> >> > var ident = new MochiKit.Signal.Ident({ >> > - source: src, >> > - signal: sig, >> > - listener: listener, >> > - isDOM: isDOM, >> > - objOrFunc: objOrFunc, >> > - funcOrStr: funcOrStr, >> > + source: src, >> > + signal: sig, >> > + listener: listener, >> > + isDOM: isDOM, >> > + objOrFunc: objOrFunc, >> > + funcOrStr: funcOrStr, >> > connected: true >> > }); >> > self._observers.push(ident); >> > diff -r 3354b0497e7a examples/mousewheel_events/index.html >> > --- /dev/null Thu Jan 01 00:00:00 1970 +0000 >> > +++ b/examples/mousewheel_events/index.html Tue Jun 03 16:45:16 2008 >> > +1000 >> > @@ -0,0 +1,85 @@ >> > +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" >> > + "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";> >> > +<html xmlns="http://www.w3.org/1999/xhtml";> >> > +<head> >> > + <title>Mouse Wheel Events with MochiKit</title> >> > + <link href="mousewheel_events.css" rel="stylesheet" type="text/ >> > css" /> >> > + <script type="text/javascript" src="../../MochiKit/MochiKit.js"></ >> > script> >> > + <script type="text/javascript" src="mousewheel_events.js"></ >> > script> >> > +</head> >> > +<body> >> > + <h1> >> > + Mouse Wheel Events with MochiKit >> > + </h1> >> > + <p> >> > + For a detailed description of what happens under the hood, >> > check out >> > + <a href="mousewheel_events.js" class="view- >> > source">mousewheel_events.js</a>. >> > + </p> >> > + >> > + <p> >> > + View Source: [ >> > + <a href="index.html" class="view-source">index.html</a> | >> > + <a href="mousewheel_events.js" class="view- >> > source">mousewheel_events.js</a> | >> > + <a href="mousewheel_events.css" class="view- >> > source">mousewheel_events.css</a> >> > + ] >> > + </p> >> > + >> > + <div id="show-wheeldata" class="scroll-box">Scroll In Me: <span >> > id="show-wheeldata-ouput">0</span> (-3 for down, 3 for up)</div> >> > + >> > + <div id="scroll-page" class="scroll-box" style="height : 100px; >> > overflow : scroll;"> >> > + Scroll Me and then the page scrolls! <br /> >> > + Scroll Me and then the page scrolls! <br /> >> > + Scroll Me and then the page scrolls! <br /> >> > + Scroll Me and then the page scrolls! <br /> >> > + Scroll Me and then the page scrolls! <br /> >> > + Scroll Me and then the page scrolls! <br /> >> > + Scroll Me and then the page scrolls! <br /> >> > + Scroll Me and then the page scrolls! <br /> >> > + Scroll Me and then the page scrolls! <br /> >> > + Scroll Me and then the page scrolls! <br /> >> > + Scroll Me and then the page scrolls! <br /> >> > + Scroll Me and then the page scrolls! <br /> >> > + Scroll Me and then the page scrolls! <br /> >> > + Scroll Me and then the page scrolls! <br /> >> > + Scroll Me and then the page scrolls! <br /> >> > + Scroll Me and then the page scrolls! <br /> >> > + Scroll Me and then the page scrolls! <br /> >> > + Scroll Me and >> >> ... >> >> read more ยป > > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "MochiKit" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/mochikit?hl=en -~----------~----~----~----~------~----~------~--~---
