3 // Parameters: |
3 // Parameters: |
4 // elementId: id string of the element |
4 // elementId: id string of the element |
5 // callback: the function to be called when the long-press fires |
5 // callback: the function to be called when the long-press fires |
6 // mouseDownCallback: the function to be called on mouse-down |
6 // mouseDownCallback: the function to be called on mouse-down |
7 // Example: |
7 // Example: |
8 // <javascript ...> |
8 // <javascript ...> |
9 // new LongPress("btnId", function(el) { alert("hello"); }); |
9 // new LongPress("btnId", function(el) { alert("hello"); }); |
10 // </javascript> |
10 // </javascript> |
11 // ... |
11 // ... |
12 // <img id="btnId" ... /> |
12 // <img id="btnId" ... /> |
13 // |
13 // |
|
14 var gInitialX = 0; |
|
15 var gInitialY = 0; |
|
16 |
14 function LongPress(elementId, callback, mouseDownCallback) { |
17 function LongPress(elementId, callback, mouseDownCallback) { |
15 this.el = document.getElementById(elementId); |
18 this.el = document.getElementById(elementId); |
16 this.callback = callback; |
19 this.callback = callback; |
17 this.initialX = 0; |
20 this.initialX = 0; |
18 this.initialY = 0; |
21 this.initialY = 0; |
19 this.mouseDownCallback = mouseDownCallback; |
22 this.mouseDownCallback = mouseDownCallback; |
20 |
23 |
21 if(!this.el) { |
24 if (!this.el) { |
22 window.app.debug("LongPress: element " + elementId + " not found"); |
25 //window.app.debug("LongPress: element " + elementId + " not found"); |
23 return; |
26 return; |
24 } |
27 } |
25 |
28 |
26 this.onTimerFired = function() { |
29 this.onTimerFired = function() { |
27 window.app.debug("onTimerFired"); |
30 //window.app.debug("onTimerFired"); |
28 this.callback(this.el); |
31 this.callback(this.el); |
29 this.cancelTimer(); |
32 this.cancelTimer(); |
30 this.unregisterMouseMove(); |
33 this.unregisterMouseMove(); |
31 } |
34 } |
32 |
35 |
33 this.startTimer = function() { |
36 this.startTimer = function() { |
34 this.cancelTimer(); |
37 this.cancelTimer(); |
35 this.timer = window.setTimeout(createDelegate(this, this.onTimerFired), 1000); |
38 this.timer = window.setTimeout(createDelegate(this, this.onTimerFired), 250); |
36 } |
39 } |
37 |
40 |
38 this.cancelTimer = function() { |
41 this.cancelTimer = function() { |
39 if(this.timer) { |
42 if (this.timer) { |
40 window.clearTimeout(this.timer); |
43 window.clearTimeout(this.timer); |
41 this.timer = null; |
44 this.timer = null; |
42 } |
45 } |
43 } |
46 } |
44 |
47 |
45 // Stop tracking mouse movements. |
48 // Stop tracking mouse movements. |
46 this.unregisterMouseMove= function() { |
49 this.unregisterMouseMove= function() { |
47 this.el.onmousemove = null; |
50 this.el.onmousemove = null; |
48 } |
51 } |
49 |
52 |
|
53 // Stop tracking mouse out. |
|
54 this.unregisterMouseOut= function() { |
|
55 this.el.onmouseout = null; |
|
56 } |
|
57 |
50 this.cancel = function() { |
58 this.cancel = function() { |
51 //window.app.debug("cancel"); |
59 //window.app.debug("cancel"); |
52 this.cancelTimer(); |
60 this.cancelTimer(); |
|
61 this.unregisterMouseOut(); |
53 this.unregisterMouseMove(); |
62 this.unregisterMouseMove(); |
54 } |
63 } |
55 |
64 |
56 // If the mouse has moved too much it's not considered a long press, so cancel. |
65 // If the mouse has moved too much it's not considered a long press, so cancel. |
57 this.onMouseMove = function() { |
66 this.onMouseMove = function() { |
58 //window.app.debug("LongPress::onMouseMove " + this + " event=" + window.event + |
67 //window.app.debug("LongPress::onMouseMove " + this + " event=" + window.event + |
59 // " " + window.event.clientX + "," + window.event.clientY); |
68 // " " + window.event.clientX + "," + window.event.clientY); |
60 if(Math.abs(this.initialX - window.event.clientX) > 4 || |
69 if (Math.abs(this.initialX - window.event.clientX) > 16 || |
61 Math.abs(this.initialY - window.event.clientY) > 4) { |
70 Math.abs(this.initialY - window.event.clientY) > 16) { |
62 this.cancel(); |
71 this.cancel(); |
63 } |
72 } |
64 } |
73 } |
65 |
74 |
66 // Start tracking the mouse and save the initial mouse coords. |
75 // Start tracking the mouse and save the initial mouse coords. |
67 this.onMouseDown = function() { |
76 this.onMouseDown = function() { |
68 window.app.debug("LongPress::onMouseDown " + this); |
77 //window.app.debug("LongPress::onMouseDown " + this); |
69 this.isDown = true; |
78 this.isDown = true; |
70 this.initialX = window.event.clientX; |
79 this.initialX = window.event.clientX; |
71 this.initialY = window.event.clientY; |
80 this.initialY = window.event.clientY; |
|
81 gInitialX = window.event.clientX; |
|
82 gInitialY = window.event.clientY; |
|
83 this.el.onmouseout = this.cancel.bind(this); |
72 this.el.onmousemove = this.onMouseMove.bind(this); |
84 this.el.onmousemove = this.onMouseMove.bind(this); |
73 this.startTimer(); |
85 this.startTimer(); |
74 if(this.mouseDownCallback != undefined) |
86 if (this.mouseDownCallback != undefined) |
75 this.mouseDownCallback(this); |
87 this.mouseDownCallback(this); |
76 } |
88 } |
77 |
89 |
78 this.el.onmousedown = this.onMouseDown.bind(this); |
90 this.el.onmousedown = this.onMouseDown.bind(this); |
79 |
91 |
80 // Cancel tracking on mouse up and out events, ie. not a long press. |
92 // Cancel tracking on mouse up and out events, ie. not a long press. |
81 this.el.onmouseup = this.cancel.bind(this); |
93 this.el.onmouseup = this.cancel.bind(this); |
82 this.el.onmouseout = this.cancel.bind(this); |
|
83 } |
94 } |