A simplification of the last ui hovering improvement.

This commit is contained in:
Nicolas Stepien 2013-02-14 15:38:53 +01:00
parent 4af24cc60d
commit 76d352f972
3 changed files with 16 additions and 23 deletions

View File

@ -522,27 +522,23 @@
return localStorage.setItem("" + g.NAMESPACE + this.id + ".position", this.style.cssText); return localStorage.setItem("" + g.NAMESPACE + this.id + ".position", this.style.cssText);
}; };
hoverstart = function(_arg) { hoverstart = function(_arg) {
var asap, asapTest, cb, el, endEvents, event, initialEvent, o, root, _i, _len, _ref; var asap, asapTest, cb, el, endEvents, event, latestEvent, o, root, _i, _len, _ref;
root = _arg.root, el = _arg.el, initialEvent = _arg.initialEvent, endEvents = _arg.endEvents, asapTest = _arg.asapTest, cb = _arg.cb; root = _arg.root, el = _arg.el, latestEvent = _arg.latestEvent, endEvents = _arg.endEvents, asapTest = _arg.asapTest, cb = _arg.cb;
o = { o = {
root: root, root: root,
el: el, el: el,
style: el.style, style: el.style,
cb: cb, cb: cb,
endEvents: endEvents.split(' '), endEvents: endEvents.split(' '),
mousemove: function(e) { latestEvent: latestEvent,
return initialEvent = e;
},
clientHeight: doc.clientHeight, clientHeight: doc.clientHeight,
clientWidth: doc.clientWidth clientWidth: doc.clientWidth
}; };
o.hover = hover.bind(o); o.hover = hover.bind(o);
o.hoverend = hoverend.bind(o); o.hoverend = hoverend.bind(o);
root.addEventListener('mousemove', o.mousemove, false);
asap = function() { asap = function() {
if (asapTest()) { if (asapTest()) {
root.removeEventListener('mousemove', o.mousemove, false); return o.hover(o.latestEvent);
return o.hover(initialEvent);
} else { } else {
return o.timeout = setTimeout(asap, 25); return o.timeout = setTimeout(asap, 25);
} }
@ -557,6 +553,7 @@
}; };
hover = function(e) { hover = function(e) {
var clientX, clientY, height, left, right, style, top; var clientX, clientY, height, left, right, style, top;
this.latestEvent = e;
height = this.el.offsetHeight; height = this.el.offsetHeight;
clientX = e.clientX, clientY = e.clientY; clientX = e.clientX, clientY = e.clientY;
top = clientY - 120; top = clientY - 120;
@ -582,7 +579,6 @@
this.root.removeEventListener(event, this.hoverend, false); this.root.removeEventListener(event, this.hoverend, false);
} }
this.root.removeEventListener('mousemove', this.hover, false); this.root.removeEventListener('mousemove', this.hover, false);
this.root.removeEventListener('mousemove', this.mousemove, false);
clearTimeout(this.timeout); clearTimeout(this.timeout);
if (this.cb) { if (this.cb) {
return this.cb.call(this); return this.cb.call(this);
@ -2942,7 +2938,7 @@
UI.hover({ UI.hover({
root: this, root: this,
el: qp, el: qp,
initialEvent: e, latestEvent: e,
endEvents: 'mouseout click', endEvents: 'mouseout click',
cb: QuotePreview.mouseout, cb: QuotePreview.mouseout,
asapTest: function() { asapTest: function() {
@ -3758,7 +3754,7 @@
UI.hover({ UI.hover({
root: this, root: this,
el: el, el: el,
initialEvent: e, latestEvent: e,
endEvents: 'mouseout click', endEvents: 'mouseout click',
asapTest: function() { asapTest: function() {
return el.naturalHeight; return el.naturalHeight;

View File

@ -286,26 +286,23 @@ UI = (->
d.removeEventListener 'mouseup', @up, false d.removeEventListener 'mouseup', @up, false
localStorage.setItem "#{g.NAMESPACE}#{@id}.position", @style.cssText localStorage.setItem "#{g.NAMESPACE}#{@id}.position", @style.cssText
hoverstart = ({root, el, initialEvent, endEvents, asapTest, cb}) -> hoverstart = ({root, el, latestEvent, endEvents, asapTest, cb}) ->
o = { o = {
root: root root: root
el: el el: el
style: el.style style: el.style
cb: cb cb: cb
endEvents: endEvents.split ' ' endEvents: endEvents.split ' '
mousemove: (e) -> initialEvent = e latestEvent: latestEvent
clientHeight: doc.clientHeight clientHeight: doc.clientHeight
clientWidth: doc.clientWidth clientWidth: doc.clientWidth
} }
o.hover = hover.bind o o.hover = hover.bind o
o.hoverend = hoverend.bind o o.hoverend = hoverend.bind o
# Set position once content is loaded.
root.addEventListener 'mousemove', o.mousemove, false
asap = -> asap = ->
if asapTest() if asapTest()
root.removeEventListener 'mousemove', o.mousemove, false o.hover o.latestEvent
o.hover initialEvent
else else
o.timeout = setTimeout asap, 25 o.timeout = setTimeout asap, 25
asap() asap()
@ -314,6 +311,7 @@ UI = (->
root.addEventListener event, o.hoverend, false root.addEventListener event, o.hoverend, false
root.addEventListener 'mousemove', o.hover, false root.addEventListener 'mousemove', o.hover, false
hover = (e) -> hover = (e) ->
@latestEvent = e
height = @el.offsetHeight height = @el.offsetHeight
{clientX, clientY} = e {clientX, clientY} = e
@ -340,9 +338,8 @@ UI = (->
hoverend = -> hoverend = ->
@el.parentNode.removeChild @el @el.parentNode.removeChild @el
for event in @endEvents for event in @endEvents
@root.removeEventListener event, @hoverend, false @root.removeEventListener event, @hoverend, false
@root.removeEventListener 'mousemove', @hover, false @root.removeEventListener 'mousemove', @hover, false
@root.removeEventListener 'mousemove', @mousemove, false
clearTimeout @timeout clearTimeout @timeout
@cb.call @ if @cb @cb.call @ if @cb

View File

@ -1768,7 +1768,7 @@ QuotePreview =
UI.hover UI.hover
root: @ root: @
el: qp el: qp
initialEvent: e latestEvent: e
endEvents: 'mouseout click' endEvents: 'mouseout click'
cb: QuotePreview.mouseout cb: QuotePreview.mouseout
asapTest: -> qp.firstElementChild asapTest: -> qp.firstElementChild
@ -2313,7 +2313,7 @@ ImageHover =
UI.hover UI.hover
root: @ root: @
el: el el: el
initialEvent: e latestEvent: e
endEvents: 'mouseout click' endEvents: 'mouseout click'
asapTest: -> el.naturalHeight asapTest: -> el.naturalHeight
$.on el, 'error', ImageHover.error $.on el, 'error', ImageHover.error