Skip to content
This repository was archived by the owner on Aug 14, 2021. It is now read-only.

Commit 479e964

Browse files
committed
Merge pull request #61 from gvas/support-for-jquery-ui-1.11
Support for jquery ui 1.11
2 parents 578ab14 + c4e7d52 commit 479e964

10 files changed

+226
-102
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@
44
npm-debug.log
55
.sizecache.json
66
sauce_connect.log
7+
sc_*.log

Gruntfile.coffee

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,18 +40,20 @@ module.exports = (grunt) ->
4040
jshintrc: ".jshintrc"
4141

4242
qunit:
43-
all: ["test/index.html"]
43+
all: ["test/index.html", "test/index-jquery-ui-1-11.html"]
4444

4545
"saucelabs-qunit":
4646
all:
4747
options:
48-
urls: ["http://localhost:9999/test/index.html"]
48+
urls: [
49+
"http://localhost:9999/test/index.html",
50+
"http://localhost:9999/test/index-jquery-ui-1-11.html"
51+
]
4952

5053
# username: process.env.SAUCE_USERNAME,
5154
# key: process.env.SAUCE_ACCESS_KEY,
52-
tunnelTimeout: 5
5355
build: process.env.TRAVIS_JOB_ID
54-
concurrency: 3
56+
throttled: 10
5557
browsers: [
5658
{ browserName: "chrome", platform: "Windows 7" }
5759
{ browserName: "firefox", platform: "Windows 7" }

README.md

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -95,18 +95,19 @@ $(document).contextmenu({
9595
});
9696
```
9797

98-
We also have to provide some HTML markup that defines the context menu
99-
structure (see [jQueryUI menu] for details):
98+
We also have to provide some HTML markup that defines the context menu structure, see
99+
[jQueryUI menu] for details. jQuery UI 1.11 removed the requirement to use anchors in menu
100+
items, so the `<a>` tags should be omitted:
100101

101102
```html
102103
<ul id="options" class="ui-helper-hidden">
103-
<li><a href="#copy"><span class="ui-icon ui-icon-copy"></span>Copy</a>
104-
<li class="ui-state-disabled"><a href="#paste">Paste</a>
104+
<li data-command="copy"><a href="#"><span class="ui-icon ui-icon-copy"></span>Copy</a>
105+
<li data-command="paste" class="ui-state-disabled"><a href="#">Paste</a>
105106
<li>----
106107
<li><a>More</a>
107108
<ul>
108-
<li><a href="#sub1">Sub 1</a>
109-
<li><a href="#sub2">Sub 2</a>
109+
<li data-command="sub1"><a href="#">Sub 1</a>
110+
<li data-command="sub2"><a href="#">Sub 2</a>
110111
</ul>
111112
</ul>
112113
```

demo/index.html

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,9 @@
88
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
99
<script src="http://code.jquery.com/jquery-1.7.js" type="text/javascript"></script>
1010
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js" type="text/javascript"></script>
11-
-->
11+
-->
1212
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
1313
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
14-
1514
<!-- Some custom library to enable 'taphold' events -->
1615
<script src="jquery-taphold/taphold.js" type="text/javascript"></script>
1716

@@ -217,20 +216,20 @@ <h3>Sample 2</h3>
217216
</div>
218217

219218
<ul id="options" style="display: none;">
220-
<li><a href="#action1"><span class="ui-icon custom-icon-firefox"></span>Action 1</a>
221-
<li><a href="#action2"><span class="ui-icon ui-icon-heart"></span>Action 2</a>
222-
<li class="ui-state-disabled"><a href="#action3">Action 3</a>
219+
<li data-command="action1"><a href="#"><span class="ui-icon custom-icon-firefox"></span>Action 1</a>
220+
<li data-command="action2"><a href="#"><span class="ui-icon ui-icon-heart"></span>Action 2</a>
221+
<li data-command="action3" class="ui-state-disabled"><a href="#">Action 3</a>
223222
<li>----
224223
<li><a>Extra</a>
225224
<ul>
226-
<li><a href="#action4">sub4</a>
227-
<li><a href="#action5">sub5</a>
225+
<li data-command="action4"><a href="#">sub4</a>
226+
<li data-command="action5"><a href="#">sub5</a>
228227
</ul>
229228
</ul>
230229

231230
<ul id="options2" class="ui-helper-hidden">
232-
<li><a href="#action2"><span class="ui-icon ui-icon-heart"></span>Action 2</a>
233-
<li class="ui-state-disabled"><a href="#action3">Action 3</a>
231+
<li data-command="action2"><a href="#action2"><span class="ui-icon ui-icon-heart"></span>Action 2</a>
232+
<li data-command="action3" class="ui-state-disabled"><a href="#">Action 3</a>
234233
</ul>
235234

236235
<h3>Sample 3</h3>

jquery.ui-contextmenu.js

Lines changed: 105 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,8 @@
99
*/
1010
;(function($, window, document, undefined) {
1111
"use strict";
12-
var supportSelectstart = "onselectstart" in document.createElement("div");
13-
14-
/** Return command without leading '#' (default to ""). */
15-
function normCommand(cmd){
16-
return (cmd && cmd.match(/^#/)) ? cmd.substring(1) : (cmd || "");
17-
}
18-
12+
var supportSelectstart = "onselectstart" in document.createElement("div"),
13+
match, uiVersion;
1914

2015
$.widget("moogle.contextmenu", {
2116
version: "1.4.0-1",
@@ -141,10 +136,9 @@
141136
select: $.proxy(function(event, ui){
142137
// User selected a menu entry
143138
var retval,
144-
isParent = (ui.item.has(">a[aria-haspopup='true']").length > 0),
145-
$a = ui.item.find(">a"),
146-
actionHandler = $a.data("actionHandler");
147-
ui.cmd = normCommand($a.attr("href"));
139+
isParent = $.moogle.contextmenu.isMenu(ui.item),
140+
actionHandler = ui.item.data("actionHandler");
141+
ui.cmd = ui.item.attr("data-command");
148142
ui.target = $(this.currentTarget);
149143
// ignore clicks, if they only open a sub-menu
150144
if( !isParent || !this.options.ignoreParentSelect){
@@ -252,10 +246,9 @@
252246
}
253247
$.Widget.prototype._setOption.apply(this, arguments);
254248
},
255-
/** Return ui-menu entry (<A> or <LI> tag). */
256-
_getMenuEntry: function(cmd, wantLi){
257-
var $entry = this.$menu.find("li a[href=#" + normCommand(cmd) + "]");
258-
return wantLi ? $entry.closest("li") : $entry;
249+
/** Return ui-menu entry (<LI> tag). */
250+
_getMenuEntry: function(cmd){
251+
return this.$menu.find("li[data-command=" + cmd + "]");
259252
},
260253
/** Close context menu. */
261254
close: function(){
@@ -265,7 +258,7 @@
265258
},
266259
/** Enable or disable the menu command. */
267260
enableEntry: function(cmd, flag){
268-
this._getMenuEntry(cmd, true).toggleClass("ui-state-disabled", (flag === false));
261+
this._getMenuEntry(cmd).toggleClass("ui-state-disabled", (flag === false));
269262
},
270263
/** Return Menu element (UL). */
271264
getMenu: function(){
@@ -291,66 +284,26 @@
291284
},
292285
/** Redefine menu entry (title or all of it). */
293286
setEntry: function(cmd, titleOrData){
294-
var $parent,
295-
$entry = this._getMenuEntry(cmd, false);
287+
var $entry = this._getMenuEntry(cmd);
296288

297289
if(typeof titleOrData === "string"){
298-
if( $entry.children("span").length){
299-
// Replace <a> text without removing <span> child
300-
$entry
301-
.contents()
302-
.filter(function(){ return this.nodeType === 3; })
303-
.first()
304-
.replaceWith(titleOrData);
305-
}else{
306-
// <a> tag only contains text (above code doesn't work here)
307-
$entry.text(titleOrData);
308-
}
290+
$.moogle.contextmenu.updateTitle($entry, titleOrData);
309291
}else{
310-
$parent = $entry.closest("li").empty();
292+
$entry.empty();
311293
titleOrData.cmd = titleOrData.cmd || cmd;
312-
$.moogle.contextmenu.createEntryMarkup(titleOrData, $parent);
294+
$.moogle.contextmenu.createEntryMarkup(titleOrData, $entry);
313295
}
314296
},
315297
/** Show or hide the menu command. */
316298
showEntry: function(cmd, flag){
317-
this._getMenuEntry(cmd, true).toggle(flag !== false);
299+
this._getMenuEntry(cmd).toggle(flag !== false);
318300
}
319301
});
320302

321303
/*
322304
* Global functions
323305
*/
324306
$.extend($.moogle.contextmenu, {
325-
/** Convert a menu description into a into a <li> content. */
326-
createEntryMarkup: function(entry, $parentLi){
327-
var $a = null;
328-
329-
// if(entry.title.match(/^---/)){
330-
if( !/[^\-\u2014\u2013\s]/.test( entry.title ) ){
331-
// hyphen, em dash, en dash: separator as defined by UI Menu 1.10
332-
$parentLi.text(entry.title);
333-
}else{
334-
$a = $("<a/>", {
335-
// text: "" + entry.title,
336-
html: "" + entry.title, // allow to pass HTML markup
337-
href: "#" + normCommand(entry.cmd)
338-
}).appendTo($parentLi);
339-
if( $.isFunction(entry.action) ){
340-
$a.data("actionHandler", entry.action);
341-
}
342-
if(entry.uiIcon){
343-
$a.append($("<span class='ui-icon' />").addClass(entry.uiIcon));
344-
}
345-
if(entry.disabled){
346-
$parentLi.addClass("ui-state-disabled");
347-
}
348-
if($.isPlainObject(entry.data)){
349-
$a.data(entry.data);
350-
}
351-
}
352-
return $a;
353-
},
354307
/** Convert a nested array of command objects into a <ul> structure. */
355308
createMenuMarkup: function(options, $parentUl){
356309
var i, menu, $ul, $li;
@@ -369,7 +322,98 @@ $.extend($.moogle.contextmenu, {
369322
}
370323
}
371324
return $parentUl;
325+
},
326+
/** Replaces the value of elem's first text node child*/
327+
replaceFirstTextNodeChild: function(elem, text) {
328+
elem
329+
.contents()
330+
.filter(function(){ return this.nodeType === 3; })
331+
.first()
332+
.replaceWith(text);
372333
}
373334
});
374335

336+
match = $.ui.menu.version.match(/^(\d)\.(\d+)/);
337+
338+
uiVersion = {
339+
major: parseInt(match[1], 10),
340+
minor: parseInt(match[2], 10)
341+
};
342+
343+
if ( uiVersion.major < 2 && uiVersion.minor < 11 ) {
344+
$.extend($.moogle.contextmenu, {
345+
/** Convert a menu description into a into a <li> content. */
346+
createEntryMarkup: function(entry, $parentLi){
347+
var $a = null;
348+
349+
// if(entry.title.match(/^---/)){
350+
if( !/[^\-\u2014\u2013\s]/.test( entry.title ) ){
351+
// hyphen, em dash, en dash: separator as defined by UI Menu 1.10
352+
$parentLi.text(entry.title);
353+
}else{
354+
$parentLi.attr("data-command", entry.cmd);
355+
$a = $("<a/>", {
356+
html: "" + entry.title, // allow to pass HTML markup
357+
href: "#"
358+
}).appendTo($parentLi);
359+
if( $.isFunction(entry.action) ){
360+
$parentLi.data("actionHandler", entry.action);
361+
}
362+
if(entry.uiIcon){
363+
$a.append($("<span class='ui-icon' />").addClass(entry.uiIcon));
364+
}
365+
if(entry.disabled){
366+
$parentLi.addClass("ui-state-disabled");
367+
}
368+
if($.isPlainObject(entry.data)){
369+
$a.data(entry.data);
370+
}
371+
}
372+
},
373+
/** Returns true if the menu item has child menu items */
374+
isMenu: function(item) {
375+
return item.has(">a[aria-haspopup='true']").length > 0;
376+
},
377+
/** Updates the menu item's title */
378+
updateTitle: function(item, title) {
379+
$.moogle.contextmenu.replaceFirstTextNodeChild($("a", item), title);
380+
}
381+
});
382+
} else {
383+
$.extend($.moogle.contextmenu, {
384+
/** Convert a menu description into a into a <li> content. */
385+
createEntryMarkup: function(entry, $parentLi){
386+
if( !/[^\-\u2014\u2013\s]/.test( entry.title ) ){
387+
$parentLi.text(entry.title);
388+
} else {
389+
$parentLi
390+
.attr("data-command", entry.cmd)
391+
.html("" + entry.title);
392+
if( $.isFunction(entry.action) ) {
393+
$parentLi.data("actionHandler", entry.action);
394+
}
395+
if( entry.uiIcon ) {
396+
$parentLi
397+
.append($("<span class='ui-icon' />")
398+
.addClass(entry.uiIcon));
399+
}
400+
if( entry.disabled ) {
401+
$parentLi.addClass("ui-state-disabled");
402+
}
403+
if( $.isPlainObject(entry.data) ) {
404+
$parentLi.data(entry.data);
405+
}
406+
}
407+
},
408+
/** Returns true if the menu item has child menu items */
409+
isMenu: function(item) {
410+
return item.is("[aria-haspopup='true']");
411+
},
412+
/** Updates the menu item's title */
413+
updateTitle: function(item, title) {
414+
$.moogle.contextmenu.replaceFirstTextNodeChild(item, title);
415+
}
416+
});
417+
}
418+
375419
}(jQuery, window, document));

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
"grunt-contrib-qunit": "~0.2.0",
4545
"grunt-contrib-uglify": "~0.2.0",
4646
"grunt-exec": "~0.4.0",
47-
"grunt-saucelabs": "~4.1.2",
47+
"grunt-saucelabs": "~8.1.0",
4848
"grunt-contrib-watch": "~0.5.3",
4949
"grunt-yabs": "0.0.7"
5050
},

test/index-jquery-ui-1-11.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jquery.ui-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.1.min.js"></script>
8+
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
9+
<script src="http://code.jquery.com/qunit/qunit-1.10.0.js"></script>
10+
<script src="../jquery.ui-contextmenu.js"></script>
11+
<script src="tests.js"></script>
12+
</head>
13+
<body>
14+
<h1 id="qunit-header">jquery.ui-contextmenu Test Suite for jQuery UI >= 1.11.0</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>
19+
<hr>
20+
<h3>Sample Markup</h3>
21+
<div id="container">
22+
<span class="hasmenu">AAA</span>
23+
<span class="hasmenu">BBB</span>
24+
<span class="hasmenu">CCC</span>
25+
</div>
26+
27+
<!-- This element will be copied as #sampleMenu for every test: -->
28+
29+
<ul id="sampleMenuTemplate" style="display: none;">
30+
<li data-command="cut"><span class="ui-icon ui-icon-scissors"></span>Cut
31+
<li data-command="copy"><span class="ui-icon ui-icon-copy"></span>Copy
32+
<li data-command="paste" class="ui-state-disabled ui-icon-clipboard">Paste
33+
<li>----
34+
<li>More
35+
<ul>
36+
<li data-command="sub1">Sub Item 1
37+
<li data-command="sub2">Sub Item 2
38+
</ul>
39+
</ul>
40+
</body>
41+
</html>

test/index.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8">
55
<title>jquery.ui-contextmenu Test Suite</title>
66
<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>
7+
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
88
<!--
99
<script src="jquery-ui.js"></script>
1010
-->
@@ -30,14 +30,14 @@ <h3>Sample Markup</h3>
3030
<!-- This element will be copied as #sampleMenu for every test: -->
3131

3232
<ul id="sampleMenuTemplate" style="display: none;">
33-
<li><a href="#cut"><span class="ui-icon ui-icon-scissors"></span>Cut</a>
34-
<li><a href="#copy"><span class="ui-icon ui-icon-copy"></span>Copy</a>
35-
<li class="ui-state-disabled ui-icon-clipboard"><a href="#paste">Paste</a>
33+
<li data-command="cut"><a href="#"><span class="ui-icon ui-icon-scissors"></span>Cut</a>
34+
<li data-command="copy"><a href="#"><span class="ui-icon ui-icon-copy"></span>Copy</a>
35+
<li data-command="paste" class="ui-state-disabled ui-icon-clipboard"><a href="#">Paste</a>
3636
<li>----
3737
<li><a>More</a>
3838
<ul>
39-
<li><a href="#sub1">Sub Item 1</a>
40-
<li><a href="#sub2">Sub Item 2</a>
39+
<li data-command="sub1"><a href="#">Sub Item 1</a>
40+
<li data-command="sub2"><a href="#">Sub Item 2</a>
4141
</ul>
4242
</ul>
4343
</body>

0 commit comments

Comments
 (0)