Skip to content

Commit d2cb771

Browse files
mar10mar10
committed
Tabfix and worked on tabhold
1 parent 7f6c9e7 commit d2cb771

File tree

3 files changed

+129
-82
lines changed

3 files changed

+129
-82
lines changed

‎jquery.contextmenu.js

Lines changed: 73 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,33 @@
1414
$menu = $(menu);
1515
return $menu.data("ui-menu") || $menu.data("menu");
1616
}
17+
18+
var startTime, endTime;
19+
var gbMove = false;
20+
21+
window.addEventListener('touchstart',function(event) {
22+
startTime = new Date().getTime();
23+
gbMove = false;
24+
alert('tap hold s event');
25+
}, false);
26+
27+
window.addEventListener('touchmove',function(event) {
28+
gbMove = true;
29+
}, false);
30+
31+
window.addEventListener('touchend',function(event) {
32+
endTime = new Date().getTime();
33+
if(!gbMove && (endTime-startTime)/1000 > 2)
34+
alert('tap hold event');
35+
}, false);
36+
1737
$.widget("ui.contextmenu", {
1838
version: "0.0.1",
1939
options: {
2040
delegate: "[data-menu]", // selector
2141
ignoreParentSelect: true, // Don't trigger 'select' for sub-menu parents
2242
menu: null, // selector or jQuery or a function returning such
23-
taphold: 2000, // open menu after 2000 ms long touch
43+
taphold: 800, // open menu after 2000 ms long touch
2444
// Events:
2545
beforeOpen: $.noop, // menu about to open; return `false` to prevent opening
2646
blur: $.noop, // menu option lost focus
@@ -32,32 +52,59 @@
3252
select: $.noop // menu option was selected; return `false` to prevent closing
3353
},
3454
_create: function () {
55+
var self = this;
3556
this.element.delegate(this.options.delegate, "contextmenu.contextmenu", $.proxy(this._openMenu, this));
3657
// emulate a 'taphold' event
37-
/*
38-
this.element.delegate(this.options.delegate, "mousedown.contextmenu", $.proxy(function(event, ui){
39-
var self = this;
40-
console.log("Event ", event.type, this.timer);
41-
if(this.timer){
42-
console.log(" clear " + this.timer);
43-
clearTimeout(this.timer);
44-
this.timer = null;
45-
}
46-
this.timer = setTimeout(function(){
47-
console.log("Timeout ", event.type, self.timer);
48-
self.open.call(self, $(event.target));
49-
self.timer = null;
58+
var tapStartHandler = function(event){
59+
console.log("Event ", event.type, this.tapTimer);
60+
tapClearHandler(event);
61+
this.tapTimer = setTimeout(function(){
62+
console.log("Timeout ", event.type, this.tapTimer, event.target);
63+
alert("Timeout " + event.type + this.tapTimer + " " + $(event.target).text());
64+
this.open.call(this, $(event.target));
65+
this.tapTimer = null;
5066
}, this.options.taphold);
51-
console.log("Event started ", event.type, this.timer);
52-
}, this));
53-
this.element.delegate(this.options.delegate, "mouseup.contextmenu", $.proxy(function(){
54-
if(this.timer){
55-
console.log("Event ", event.type, "clear" + this.timer);
56-
clearTimeout(this.timer);
57-
this.timer = null;
67+
console.log("Event started ", event.type, this.tapTimer);
68+
};
69+
var tapClearHandler = function(event){
70+
if(this.tapTimer){
71+
console.log("clear " + this.tapTimer);
72+
clearTimeout(this.tapTimer);
73+
this.tapTimer = null;
74+
}
75+
};
76+
var tapEndHandler = function(event){
77+
if(this.tapTimer){
78+
tapClearHandler(event);
79+
return false;
5880
}
59-
}, this));
60-
*/
81+
};
82+
this.element
83+
.delegate(this.options.delegate, "touchstart.contextmenu", $.proxy(tapStartHandler, this))
84+
.delegate(this.options.delegate, "touchend.contextmenu", $.proxy(tapEndHandler, this))
85+
.delegate(this.options.delegate, "touchmove.contextmenu", $.proxy(tapClearHandler, this));
86+
// this.element.delegate(this.options.delegate, "touchstart.contextmenu", $.proxy(function(event, ui){
87+
// var self = this;
88+
// console.log("Event ", event.type, this.tapTimer);
89+
// if(this.tapTimer){
90+
// console.log(" clear " + this.tapTimer);
91+
// clearTimeout(this.tapTimer);
92+
// this.tapTimer = null;
93+
// }
94+
// this.tapTimer = setTimeout(function(){
95+
// console.log("Timeout ", event.type, self.tapTimer);
96+
// self.open.call(self, $(event.target));
97+
// self.tapTimer = null;
98+
// }, this.options.taphold);
99+
// console.log("Event started ", event.type, this.tapTimer);
100+
// }, this));
101+
// this.element.delegate(this.options.delegate, "touchend.contextmenu", $.proxy(function(){
102+
// if(this.tapTimer){
103+
// console.log("Event ", event.type, "clear" + this.tapTimer);
104+
// clearTimeout(this.tapTimer);
105+
// this.tapTimer = null;
106+
// }
107+
// }, this));
61108
this._trigger("init");
62109
},
63110
/** Return menu jQuery object. */
@@ -140,9 +187,9 @@
140187
_closeMenu: function(){
141188
var self = this,
142189
$menu = this._getMenu();
143-
if(this.timer){
144-
clearTimeout(this.timer);
145-
this.timer = null;
190+
if(this.tapTimer){
191+
clearTimeout(this.tapTimer);
192+
this.tapTimer = null;
146193
}
147194
$menu.fadeOut(function() {
148195
self._trigger("close");

‎sample-widget.html

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,22 @@
33
<head>
44
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
55
<title>jquery.contextmenu.js - Demo</title>
6-
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
6+
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
77
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script>
88
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js" type="text/javascript"></script>
99

10-
<script src="jquery.contextmenu.js" type="text/javascript"></script>
10+
<script src="jquery.contextmenu.js" type="text/javascript"></script>
1111

1212
<style type="text/css">
1313
body{
14-
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
15-
font-size: 62.5%;
14+
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
15+
font-size: 62.5%;
1616
}
1717
.hasmenu{
18-
border: 1px solid #008;
19-
margin: 3px;
20-
padding: 2px;
21-
width: 30px;
18+
border: 1px solid #008;
19+
margin: 3px;
20+
padding: 2px;
21+
width: 30px;
2222
}
2323
</style>
2424

@@ -36,49 +36,49 @@
3636
blur: function(event, ui) {
3737
$("#info").text("");
3838
},
39-
beforeOpen: function(event) {
40-
alert("beforeopen on " + $(event.relatedTarget).text());
41-
},
42-
open: function(event, ui) {
39+
beforeOpen: function(event) {
40+
// alert("beforeopen on " + $(event.relatedTarget).text());
41+
},
42+
open: function(event, ui) {
4343
// alert("open on " + $(event.relatedTarget).text());
44-
},
45-
select: function(event, ui) {
46-
var menuId = ui.item.find(">a").attr("href");
47-
alert("select " + menuId + " on " + $(event.relatedTarget).text());
48-
}
44+
},
45+
select: function(event, ui) {
46+
var menuId = ui.item.find(">a").attr("href");
47+
alert("select " + menuId + " on " + $(event.relatedTarget).text());
48+
}
49+
});
50+
51+
$("#triggerPopup").click(function(){
52+
// Trigger popup menu on the first target element
53+
$("#container").contextmenu("open", $(".hasmenu:first"));
4954
});
50-
51-
$("#triggerPopup").click(function(){
52-
// Trigger popup menu on the first target element
53-
$("#container").contextmenu("open", $(".hasmenu:first"));
54-
});
5555
});
5656
</script>
5757
</head>
5858

5959
<body class="example">
6060
<h1>jquery.contextmenu.js</h1>
61-
61+
6262
<p><a href="https://github.com/mar10/jquery-contextmenu">Project site</a></p>
6363

64-
<div id="container">
65-
<div class="hasmenu">AAA</div>
66-
<div class="hasmenu">BBB</div>
67-
<div class="hasmenu">CCC</div>
68-
</div>
69-
70-
<ul id="options" class="ui-helper-hidden">
71-
<li><a href="#action1">Action 1</a>
72-
<li><a href="#action2"><span class="ui-icon ui-icon-heart"></span>Action 2</a>
73-
<li class="ui-state-disabled"><a href="#action3">Action 3</a>
74-
<li>----
75-
<li><a>Extra</a>
76-
<ul>
77-
<li><a href="#action4">sub4</a>
78-
<li><a href="#action5">sub5</a>
79-
</ul>
80-
</ul>
81-
82-
<button id="triggerPopup">Trigger popup</button>
64+
<div id="container">
65+
<div class="hasmenu">AAA</div>
66+
<div class="hasmenu">BBB</div>
67+
<div class="hasmenu">CCC</div>
68+
</div>
69+
70+
<ul id="options" class="ui-helper-hidden">
71+
<li><a href="#action1">Action 1</a>
72+
<li><a href="#action2"><span class="ui-icon ui-icon-heart"></span>Action 2</a>
73+
<li class="ui-state-disabled"><a href="#action3">Action 3</a>
74+
<li>----
75+
<li><a>Extra</a>
76+
<ul>
77+
<li><a href="#action4">sub4</a>
78+
<li><a href="#action5">sub5</a>
79+
</ul>
80+
</ul>
81+
82+
<button id="triggerPopup">Trigger popup</button>
8383
</body>
8484
</html>

‎test/index.html

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<meta charset="utf-8">
5-
<title>jquery.contextmenu Test Suite</title>
6-
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.10.0.css">
7-
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
8-
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
9-
<script src="http://code.jquery.com/qunit/qunit-1.10.0.js"></script>
10-
<script src="../jquery.contextmenu.js"></script>
11-
<script src="tests.js"></script>
4+
<meta charset="utf-8">
5+
<title>jquery.contextmenu Test Suite</title>
6+
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.10.0.css">
7+
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
8+
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
9+
<script src="http://code.jquery.com/qunit/qunit-1.10.0.js"></script>
10+
<script src="../jquery.contextmenu.js"></script>
11+
<script src="tests.js"></script>
1212
</head>
1313
<body>
14-
<h1 id="qunit-header">jquery.contextmenu Test Suite</h1>
15-
<h2 id="qunit-banner"></h2>
16-
<div id="qunit-testrunner-toolbar"></div>
17-
<h2 id="qunit-userAgent"></h2>
18-
<ol id="qunit-tests"></ol>
14+
<h1 id="qunit-header">jquery.contextmenu Test Suite</h1>
15+
<h2 id="qunit-banner"></h2>
16+
<div id="qunit-testrunner-toolbar"></div>
17+
<h2 id="qunit-userAgent"></h2>
18+
<ol id="qunit-tests"></ol>
1919
</body>
20-
</html>
20+
</html>

0 commit comments

Comments
 (0)