-
Notifications
You must be signed in to change notification settings - Fork 6
/
jquery.hoverIntent.js
145 lines (130 loc) · 5.69 KB
/
jquery.hoverIntent.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
/**
* huyz: butchered it for g+me
*
* hoverIntent is similar to jQuery's built-in "hover" function except that
* instead of firing the onMouseOver event immediately, hoverIntent checks
* to see if the user's mouse has slowed down (beneath the sensitivity
* threshold) before firing the onMouseOver event.
*
* hoverIntent r6 // 2011.02.26 // jQuery 1.5.1+
* <http://cherne.net/brian/resources/jquery.hoverIntent.html>
*
* hoverIntent is currently available for use in all personal or commercial
* projects under both MIT and GPL licenses. This means that you can choose
* the license that best suits your project, and use it accordingly.
*
* // basic usage (just like .hover) receives onMouseOver and onMouseOut functions
* $("ul li").hoverIntent( showNav , hideNav );
*
* // advanced usage receives configuration object only
* $("ul li").hoverIntent({
* sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)
* interval: 100, // number = milliseconds of polling interval
* handlerIn: showNav, // function = onMouseOver callback (required)
* delayIn: 0, // number = milliseconds delay before onMouseOver function call
* handlerOut: hideNav, // function = onMouseOut callback (required)
* delayOut: 0 // number = milliseconds delay before onMouseOut function call
* });
*
* @param f onMouseOver function || An object with configuration options
* @param g onMouseOut function || Nothing (use configuration options object)
* @author Brian Cherne brian(at)cherne(dot)net
*/
(function($) {
$.fn.hoverIntent = function(f,g) {
// default configuration options
var cfg = {
sensitivity: 7,
interval: 100,
timeoutIn: 0,
timeoutOut: 0
};
// Backwards-compatibility of options
if (! g) {
if ('timeout' in f) { f['delayOut'] = f['timeout']; }
if ('over' in f) { f['handlerIn'] = f['over']; }
if ('out' in f) { f['handlerOut'] = f['out']; }
}
// override configuration options with user supplied object
cfg = $.extend(cfg, g ? { handlerIn: f, handlerOut: g } : f );
// instantiate variables
// cX, cY = current X and Y position of mouse, updated by mousemove event
// pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
var cX, cY, pX, pY;
var currentEvent;
// A private function for getting mouse position
var track = function(ev) {
currentEvent = ev;
cX = ev.pageX;
cY = ev.pageY;
};
// A private function for comparing current and previous mouse position
var compare = function(ev,ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
// compare mouse positions to see if they've crossed the threshold
if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
$(ob).unbind("mousemove",track);
// huyz 2011-08-20
// We want the current mouse position, not the entry point.
// Not sure what other things in the event are different, but we don't care for G+me
ob.hoverIntent_t = setTimeout( function(){delayOver(/*ev*/ currentEvent, ob);} , cfg.delayIn );
// huyz 2011-08-13
// Call any immediateHandlerIn if applicable
if (cfg.immediateHandlerIn)
cfg.immediateHandlerIn.call(ob, ev);
} else {
// set previous coordinates for next time
pX = cX; pY = cY;
// use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
}
};
// A private function for delaying the mouseOver function
var delayOver = function(ev,ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
// set hoverIntent state to true (so mouseOut can be called)
ob.hoverIntent_s = 1;
return cfg.handlerIn.apply(ob,[ev]);
};
// A private function for delaying the mouseOut function
var delayOut = function(ev,ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
ob.hoverIntent_s = 0;
return cfg.handlerOut.apply(ob,[ev]);
};
// A private function for handling mouse 'hovering'
var handleHover = function(e) {
// copy objects to be passed into t (required for event object to be passed in IE)
var ev = jQuery.extend({},e);
var ob = this;
// if e.type == "mouseenter"
if (e.type == "mouseenter") {
// cancel hoverIntent timer if it exists
if (ob.hoverIntent_t) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
//ob.hoverIntent_s = 0;
}
// set "previous" X and Y position based on initial entry point
pX = ev.pageX; pY = ev.pageY;
// update "current" X and Y position based on mousemove
$(ob).bind("mousemove",track);
// start polling interval (self-calling timeout) to compare mouse coordinates over time
ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );
// else e.type == "mouseleave"
} else { // unbind expensive mousemove event
// cancel hoverIntent timer if it exists
if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }
$(ob).unbind("mousemove",track);
// if hoverIntent state is true, then call the mouseOut function after the specified delay
ob.hoverIntent_t = setTimeout( function(){delayOut(ev,ob);} , cfg.delayOut );
// huyz 2011-08-13
// Call any immediateHandlerOut if applicable
if (cfg.immediateHandlerOut)
cfg.immediateHandlerOut.call(ob, ev);
}
};
// bind the function to the two event listeners
return this.bind('mouseenter',handleHover).bind('mouseleave',handleHover);
};
})(jQuery);
// vim:set ts=4: