- ` element or definition list (i.e.
+ * Define menus from `
- action -
-
- Type:
Function, default: n.a.
- Optional callback that will be executed when the entry is selected. -
- - addClass -
-
- Type:
String, default:""
- Additional class name(s) to be added to the entries <li> element. - Separate multiple class names with a space.
- Custom CSS may be applied like.ui-menu .my-class { color: red; }. -
- - cmd -
-
- Type:
String, default:""
- Optional identifier associated with the menu entry. - It can later be accessed in the select event asui.cmd. -
- - data -
-
- Type:
Object, default:{}
- Optional hash of additional properties that will be added to the entry's - data attribute.
- It can later be accessed in the select event asui.item.data(). -
- - disabled -
-
- Type:
Boolean, default:false
- Pass true to disable the entry. -
- - title -
-
- Type:
String, default:""
- The displayed name of the menu entry. Use dashes ("---") to - define a separator. -
- - uiIcon -
-
- Type:
String, default: ""
- If defined, an icon is added to the menu entry. For example passing -"ui-icon-copy"will generate this element: -<span class='ui-icon ui-icon-copy' />.
- See also <Icon Overview. -
- - Copy -
- Paste -
- ---- -
- More
-
-
-
- Sub 1 -
- Sub 2 -
- - Copy - ... -
- addClass -
-
- Type:
String, - default:"ui-contextmenu"
- This class is added to the outer ul element. -
- - autoFocus -
-
- Type:
Boolean, - default:false
- Set keyboard focus to first menu entry on open. -
- - autoTrigger -
-
- Type:
Boolean, - default:true
- Set `false` to prevent opening on a browser's `contextmenu` event, which is - normally triggered by a mouse rightclick.
- The menu can still be opened by calling the `open()` method. -
- - delegate -
-
- Type:
String
- A selector to filter the elements that trigger the context menu. -
- - hide -
-
- Type:
Boolean | Number | String | Object, - default:{ effect: "fadeOut", duration: "fast" }
- Effect applied when hiding the popup.
- See sample - for possible option values. -
- - ignoreParentSelect -
-
- Type:
Boolean, default:true
- Iftrue, a click on a menu item that contains a sub-menu, will - not trigger theselectevent. -
- - menu -
-
- Type:
Object[] | String | jQuery
- jQuery object or selector of HTML markup that - defines the context menu structure (see - jQueryUI menu for details). - - If an array of objects is passed, it will be used to generate - such markup on the fly. -
- - position -
-
- Type:
Object | Function,
- default:{my: "left top", at: "center", of: event, collision: "fit"}
- Define position where popup opens. A simple position may be passed.
- Also a function may be specified, to recalculate position every time:
-- $("#container").contextmenu({ - position: function(event, ui){ - return {my: "left top", at: "left bottom", of: ui.target}; - }, ...-
- - preventContextMenuForPopup -
-
- Type:
Boolean, default:false
- Prevent that a right click inside an open popup menu will open the browser's - system context menu. -
- - preventSelect -
-
- Type:
Boolean, default:false
- Prevent accidental text selection of potential menu targets on doubleclick - or drag. -
- - show -
-
- Type:
Boolean | Number | String | Object, - default:{ effect: "slideDown", duration: "fast"}
- Effect applied when showing the popup.
- See sample - for possible option values. -
- - taphold -
-
- Type:
Boolean, default:false
- Open menu on taphold events, - which is especially useful for touch devices (but may require external - plugins to generatetapholdevents). -
- - tooltip -
-
- Type:
String, optional
- Add atitleattribute to the menu markup, which will be displayed - as tooltip by most browser (or external plugins). -
- - uiMenuOptions -
-
- Type:
Object, default:{}
- Custom options passed to UI Menu, when the widget is created.
- Especially useful to tweak the position of submenus. -
- - close() -
-
- Close context menu if open.
- Call like$(...).contextmenu("close");. -
- - enableEntry(cmd, flag) -
-
- Enable or disable the entry. `flag` defaults to `true`
- Call like$(...).contextmenu("enableEntry", "paste", false);. -
- - getMenu() -
-
- Return the jQuery object for the menu's
ULelement. -
- - isOpen() -
- - Return true if popup is visible. - -
- open(target[, extraData]) -
-
- Open context menu on a specific target (target (as a jQuery object) must match the options.delegate filter).
- Call like$(...).contextmenu("open", $(target)[, extraData]);. - Optional `extraData` will be available in event handlers asui.extraData. -
- - replaceMenu(menu) -
-
- Replace the whole menu definition.
- Call like$(...).contextmenu("replaceMenu", "#menu2");. - or$(...).contextmenu("replaceMenu", [{title: "aaa"}, {title: "bbb"}, ...]);. -
- - setEntry(cmd, data) -
-
- Redefine menu entry (title or all of it).
- `data` may be a title string or a menu definition object.
- Call like$(...).contextmenu("setEntry", "paste", "Paste link");. -
- - showEntry(cmd, flag) -
-
- Show or hide the entry. `flag` defaults to `true`
- Call like$(...).contextmenu("showEntry", "paste", false);. -
- - beforeOpen(event, ui) -
-
- Triggered just before the popup menu is opened.
- Returnfalseto prevent opening.
- This is also a good place to modify the menu (i.e. hiding, disabling, or - renaming entries, or replace the menu altogether). -
- - blur(event, ui) -
- - Triggered when the menu loses focus (original jQuery UI Menu event). - -
- close(event) -
- - Triggered when the menu is closed. - -
- create(event, ui) -
- - Triggered when the contextmenu widget is created. - -
- createMenu(event, ui) -
- - Triggered when the popup menu is created (original jQuery UI Menu `create` event). - -
- focus(event, ui) -
- - Triggered when a menu gains focus or when any menu item is activated (original jQuery UI Menu event). - -
- open(event) -
- - Triggered when the menu is opened. - -
- select(event, ui) -
-
- Triggered when a menu item is selected.
-ui.cmdcontains the command id. - Returnfalseto prevent closing the menu. -
- - Initialized using a command-array. +
- Entry 'More - Sub1' uses the callback syntax. +
- The menu is modified in the `beforeOpen` event (disabling an renaming entries). +
- `preventSelect: true` prevents accidential selection of the menu + targets (i.e. 'AAA') when double-clicking or dragging the mouse. +
- `taphold: true` enables long-press to open the menu (useful on + tablet computers). +
- Ctrl+Click or two-finger-click on the touchpad also works (MacBook). +
- Initialized by hidden <ul> element. +
- Use custom show/hide effects. +
- Define custom position for initial popup. +
- Define custom position for submenus. +
- Action 2 +
- Action 3 +
- Initialized using a command-array. +
- Entry 'More - Sub1' uses the callback syntax. +
- The menu is modified in the `beforeOpen` event (disabling an renaming entries). +
- `preventSelect: true` prevents accidential selection of the menu + targets (i.e. 'AAA') when double-clicking or dragging the mouse. +
- `taphold: true` enables long-press to open the menu (useful on + tablet computers). +
- Ctrl+Click or two-finger-click on the touchpad also works (MacBook). +
- Initialized by hidden <ul> element. +
- Use custom show/hide effects. +
- Define custom position for initial popup. +
- Define custom position for submenus. +
- Action 2 +
- Action 3 +
- Initialized using a command-array. -
- Entry 'More - Sub1' uses the callback syntax. -
- The menu is modified in the `beforeOpen` event (disabling an renaming entries). -
- `preventSelect: true` prevents accidential selection of the menu - targets (i.e. 'AAA') when double-clicking or dragging the mouse. -
- `taphold: true` enables long-press to open the menu (useful on - tablet computers). -
- Ctrl+Click or two-finger-click on the touchpad also works (MacBook). -
- Initialized by hidden <ul> element. -
- Use custom show/hide effects. -
- Define custom position for initial popup. -
- Define custom position for submenus. -
- Action 2 -
- Action 3 -
- Action 2 -
- Action 3 -
- ` element or definition list (i.e.
`[{title: "Paste", cmd: "paste"}, ...]`).
* Themable using [jQuery ThemeRoller](http://jqueryui.com/themeroller/).
* Supports delegation (i.e. can be bound to elements that don't exist at the
@@ -26,24 +31,33 @@ See also the [Change Log](https://github.com/mar10/jquery-ui-contextmenu/blob/ma
[Live demo page](http://wwwendt.de/tech/demo/jquery-contextmenu/demo/):
[  ](http://wwwendt.de/tech/demo/jquery-contextmenu/demo/ "Live demo") +See also the unit tests and live examples + +**More:** + + * Play with [jsFiddle](http://jsfiddle.net/mar10/6o3u8a88/) or + [Plunker](http://plnkr.co/edit/Bbcoqy?p=preview) + * Run the [unit tests](http://rawgit.com/mar10/jquery-ui-contextmenu/master/test/index.html). + -## Tutorial +## Getting Started First, include dependencies: -* jQuery 1.7+ (1.10 or later recommended) -* jQuery UI 1.9+ (at least core, widget, menu), 1.11+ recommended +* jQuery 1.7+ (3.x or later recommended) +* jQuery UI 1.9+ (at least core, widget, menu), 1.12+ recommended * One of the ThemeRoller CSS themes or a custom one -* jquery.ui-contextmenu.js (also available as CDN on - [jsdelivr](http://www.jsdelivr.com/#!jquery.ui-contextmenu) - or [cdnjs](https://cdnjs.com/libraries/jquery.ui-contextmenu)) +* jquery.ui-contextmenu.js (also available as CDN on + [](https://www.jsdelivr.com/package/npm/ui-contextmenu), + [cdnjs](https://cdnjs.com/libraries/jquery.ui-contextmenu), or + [UNPKG](https://unpkg.com/ui-contextmenu@latest/jquery.ui-contextmenu.min.js)) +for example ```html - - - + + + ``` @@ -76,453 +90,18 @@ $("#container").contextmenu({ }); ``` -The `delegate` option defines a CSS selector, which is evaluated for all -elements inside the context element (`#container` in our example).
-In order to attach menus to *all* matching elements on the page that have -`class="hasmenu"`, we may use `document` as context: -```js -$(document).contextmenu({ - delegate: ".hasmenu", - ... -}); -``` -**Note:** only one contextmenu widget instance can be bound to one element. - -The `menu` options may contain a (nested) array of entry defiitions. -Following a list of available properties: -
-
-
- ` element
-
-In this case `menu` must point to the markup:
-
-```js
-$(document).contextmenu({
- delegate: ".hasmenu",
- menu: "#options",
- select: function(event, ui) {
- ...
- }
-});
-```
-We also have to provide some HTML markup that defines the context menu structure,
-see [jQueryUI menu] for details:
-
-```html
-
-
-
-
-
-
-
-
-
-
-
jquery.ui-contextmenu.js
+ + + + +
+
+
+
+ Sample 1
+-
+
Right-click in an element to open the context menu:
+
+
+
+
+
+
+ Sample 2
+-
+
+
+
+
+
+
+
+
+ -
+
Sample 3
+Open context menu using $("#container").contextmenu("open", $(".hasmenu:first")) and close after 2 sec.:
+
+
diff --git a/demo/index-1-12.html b/demo/index-1-12.html
new file mode 100644
index 0000000..307d5a0
--- /dev/null
+++ b/demo/index-1-12.html
@@ -0,0 +1,282 @@
+
+
+
+
+ jquery.ui-contextmenu.js
+ + + + +Sample 1
+-
+
Right-click in an element to open the context menu:
+
+
+
+
+
+
+ Sample 2
+-
+
+
+
+
+
+
+
+
+ -
+
Sample 3
+Open context menu using $("#container").contextmenu("open", $(".hasmenu:first")) and close after 2 sec.:
+
+
diff --git a/demo/index.html b/demo/index.html
index 14479d2..bb94230 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -2,250 +2,32 @@
- jquery.ui-contextmenu.js
+ -- Demo with jQuery UI 1.11 +
-
-
-
-
- Sample 1
--
-
Right-click in an element to open the context menu:
-
-
-
-
-
-
- Sample 2
--
-
-
-
-
-
-
-
-
- -
-
Sample 3
-Open context menu using $("#container").contextmenu("open", $(".hasmenu:first")) and close after 2 sec.:
diff --git a/demo/index_local.html b/demo/index_local.html
index 9618080..307089a 100644
--- a/demo/index_local.html
+++ b/demo/index_local.html
@@ -3,38 +3,22 @@
| Id | -File Name | -
|---|---|
| 1 | -Record 1 | -
| 2 | -Record 2 | -
Triage jquery.ui-contextmenu.js
- -Right-click in an element to open the context menu:
-
-
-
-
-
-
-
-
- -
-
jquery.ui-contextmenu Test Suite for jQuery UI 1.11+
+ + + ++
Sample Markup
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test/test-jquery-1.12-ui-1.12.html b/test/test-jquery-1.12-ui-1.12.html
new file mode 100644
index 0000000..f317313
--- /dev/null
+++ b/test/test-jquery-1.12-ui-1.12.html
@@ -0,0 +1,44 @@
+
+
+
+
+ jquery.ui-contextmenu Test Suite for jQuery UI 1.12+
+ + + ++
Sample Markup
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test/index-jquery-ui-1-10.html b/test/test-jquery-1.9-ui-1.10.html
similarity index 78%
rename from test/index-jquery-ui-1-10.html
rename to test/test-jquery-1.9-ui-1.10.html
index 1896c79..90de77a 100644
--- a/test/index-jquery-ui-1-10.html
+++ b/test/test-jquery-1.9-ui-1.10.html
@@ -3,13 +3,12 @@
jquery.ui-contextmenu Test Suite for jQuery UI 1.12+ / jQuery 3.0
+ + + ++
Sample Markup
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test/tests.js b/test/tests.js
index 27f97fd..da98756 100644
--- a/test/tests.js
+++ b/test/tests.js
@@ -2,7 +2,7 @@
// asyncTest,deepEqual,equal,expect,module,notDeepEqual,notEqual,notStrictEqual,
// ok,QUnit,raises,start,stop,strictEqual,test
- /*globals asyncTest,equal,expect,module,ok,QUnit,start,test */
+ /*globals QUnit */
/**
* Tools inspired by https://github.com/jquery/jquery-ui/blob/master/tests/unit/menu/
@@ -18,11 +18,25 @@ function TestHelpers() {
minor: parseInt(match[2], 10)
},
uiVersionBefore11 = ( uiVersion.major < 2 && uiVersion.minor < 11 ),
+ uiVersionBefore12 = ( uiVersion.major < 2 && uiVersion.minor < 12 ),
findEntry = function( menu, indexOrCommand ) {
if ( typeof indexOrCommand === "number" ) {
return menu.children( ":eq(" + indexOrCommand + ")" );
}
return menu.find("li[data-command=" + indexOrCommand + "]");
+ },
+ findEntryInner = function( menu, indexOrCommand ) {
+ if ( uiVersionBefore11 ) {
+ // jQuery UI <= 1.10 used `` tags
+ return findEntry(menu, indexOrCommand).find( "a:first" );
+ } else if ( uiVersionBefore12 ) {
+ // jQuery UI == 1.11 prefered to avoid `` tags
+ return findEntry(menu, indexOrCommand);
+ } else {
+ // jQuery UI 1.12+ introduced `` wrappers
+ return findEntry(menu, indexOrCommand).find( ">div:first" );
+ // return findEntry(menu, indexOrCommand).children( ".ui-menu-item-wrapper" );
+ }
};
return {
@@ -44,32 +58,21 @@ function TestHelpers() {
},
entryEvent: function( menu, item, type ) {
lastItem = item;
- if ( uiVersionBefore11 ) {
- findEntry(menu, item).find( "a:first" ).trigger( type );
- } else {
- findEntry(menu, item).trigger( type );
- }
+ findEntryInner(menu, item).trigger( type );
},
click: function( menu, item ) {
lastItem = item;
- if ( uiVersionBefore11 ) {
- findEntry(menu, item).find( "a:first" ).trigger( "click" );
- } else {
- findEntry(menu, item).trigger( "click" );
- }
+ // console.log("click", menu, item, findEntryInner(menu, item));
+ findEntryInner(menu, item).trigger( "click" );
},
entry: findEntry,
entryTitle: function( menu, item ) {
// return the plain text (without sub-elements)
- if ( uiVersionBefore11 ) {
- return findEntry(menu, item).find( "a:first" ).contents().filter(function() {
+ var ei = findEntryInner(menu, item);
+ if ( !ei || !ei.length ) { return null; }
+ return ei.contents().filter(function() {
return this.nodeType === 3;
})[0].nodeValue;
- } else {
- return findEntry(menu, item).contents().filter(function() {
- return this.nodeType === 3;
- })[0].nodeValue;
- }
}
};
}
@@ -85,6 +88,7 @@ jQuery(document).ready(function() {
QUnit.config.requireExpects = true;
var th = new TestHelpers(),
+ $ = jQuery,
log = th.log,
logOutput = th.logOutput,
click = th.click,
@@ -112,7 +116,6 @@ var th = new TestHelpers(),
{ title: "Sub Item 2", cmd: "sub2" }
] }
],
- $ = jQuery,
sauceLabsLog = [];
// SauceLabs integration
@@ -147,22 +150,22 @@ QUnit.done(function(testResults) {
//---------------------------------------------------------------------------
-module("prototype", lifecycle);
+QUnit.module("prototype", lifecycle);
-test("globals", function() {
- expect(2);
- ok( !!$.moogle.contextmenu, "exists in ui namnespace");
- ok( !!$.moogle.contextmenu.version, "has version number");
+QUnit.test("globals", function(assert) {
+ assert.expect(2);
+ assert.ok( !!$.moogle.contextmenu, "exists in ui namnespace");
+ assert.ok( !!$.moogle.contextmenu.version, "has version number");
});
// ---------------------------------------------------------------------------
-module("create", lifecycle);
+QUnit.module("create", lifecycle);
-function _createTest(menu) {
+function _createTest(menu, assert) {
var $ctx;
- expect(5);
+ assert.expect(5);
log( "constructor");
$("#container").contextmenu({
@@ -178,38 +181,39 @@ function _createTest(menu) {
});
log( "afterConstructor");
$ctx = $(":moogle-contextmenu");
- equal( $ctx.length, 1, "widget created");
+ assert.equal( $ctx.length, 1, "widget created");
// equal( $("#sampleMenu").hasClass( "ui-contextmenu" ), true,
// "Class set to menu definition");
- equal( $("head style.moogle-contextmenu-style").length, 1, "global stylesheet created");
+ assert.equal( $("head style.moogle-contextmenu-style").length, 1, "global stylesheet created");
$ctx.contextmenu("destroy");
- equal( $(":moogle-contextmenu").length, 0, "widget destroyed");
+ assert.equal( $(":moogle-contextmenu").length, 0, "widget destroyed");
// equal( $("#sampleMenu").hasClass("ui-contextmenu"), false,
// "Class removed from menu definition");
- equal( $("head style.moogle-contextmenu-style").length, 0, "global stylesheet removed");
+ assert.equal( $("head style.moogle-contextmenu-style").length, 0, "global stylesheet removed");
- equal(logOutput(), "constructor,createMenu,create,afterConstructor",
+ assert.equal(logOutput(), "constructor,createMenu,create,afterConstructor",
"Event sequence OK." );
}
-test("create from UL", function() {
- _createTest("ul#sampleMenu");
+QUnit.test("create from UL", function(assert) {
+ _createTest("ul#sampleMenu", assert);
});
-test("create from array", function() {
- _createTest(SAMPLE_MENU);
+QUnit.test("create from array", function(assert) {
+ _createTest(SAMPLE_MENU, assert);
});
//---------------------------------------------------------------------------
-module("open", lifecycle);
+QUnit.module("open", lifecycle);
-function _openTest(menu) {
- var $ctx, $popup;
+function _openTest(menu, assert) {
+ var $ctx, $popup,
+ done = assert.async();
- expect(19);
+ assert.expect(19);
$("#container").contextmenu({
delegate: ".hasmenu",
@@ -217,18 +221,18 @@ function _openTest(menu) {
beforeOpen: function(event, ui) {
log("beforeOpen");
- equal( event.type, "contextmenubeforeopen",
+ assert.equal( event.type, "contextmenubeforeopen",
"beforeOpen: Got contextmenubeforeopen event" );
- equal( ui.target.text(), "AAA",
+ assert.equal( ui.target.text(), "AAA",
"beforeOpen: ui.target is set" );
- ok( $popup.is(":hidden"),
+ assert.ok( $popup.is(":hidden"),
"beforeOpen: Menu is hidden" );
- ok( !entry($popup, 0).hasClass("ui-state-disabled"),
+ assert.ok( !entry($popup, 0).hasClass("ui-state-disabled"),
"beforeOpen: Entry 0 is enabled" );
- ok( entry($popup, 2).hasClass("ui-state-disabled"),
+ assert.ok( entry($popup, 2).hasClass("ui-state-disabled"),
"beforeOpen: Entry 2 is disabled" );
- ok($ctx.contextmenu("isOpen"), "isOpen() false in beforeOpen event");
+ assert.ok($ctx.contextmenu("isOpen"), "isOpen() false in beforeOpen event");
$("#container").contextmenu("enableEntry", "cut", false);
$("#container").contextmenu("showEntry", "copy", false);
@@ -236,61 +240,62 @@ function _openTest(menu) {
open: function(event) {
log("open");
- ok( $popup.is(":visible"),
+ assert.ok( $popup.is(":visible"),
"open: Menu is visible" );
- ok( $popup.hasClass("ui-contextmenu"),
+ assert.ok( $popup.hasClass("ui-contextmenu"),
"Class removed from menu definition");
- ok( entry($popup, 2).hasClass("ui-state-disabled"),
+ assert.ok( entry($popup, 2).hasClass("ui-state-disabled"),
"open: Entry is disabled" );
- ok( $ctx.contextmenu("isOpen"),
+ assert.ok( $ctx.contextmenu("isOpen"),
"isOpen() true in open event");
- ok( entry($popup, 0).is(":visible"),
+ assert.ok( entry($popup, 0).is(":visible"),
"beforeOpen: Entry 0 is visible" );
- ok( entry($popup, 0).hasClass("ui-state-disabled"),
+ assert.ok( entry($popup, 0).hasClass("ui-state-disabled"),
"beforeOpen: Entry 0 is disabled: enableEntry(false) worked" );
- ok( entry($popup, 1).is(":hidden"),
+ assert.ok( entry($popup, 1).is(":hidden"),
"beforeOpen: Entry 1 is hidden: showEntry(false) worked" );
- ok( !entry($popup, 1).hasClass("ui-state-disabled"),
+ assert.ok( !entry($popup, 1).hasClass("ui-state-disabled"),
"beforeOpen: Entry 1 is enabled" );
- equal(logOutput(), "open(),beforeOpen,after open(),open",
+ assert.equal(logOutput(), "open(),beforeOpen,after open(),open",
"Event sequence OK.");
- start();
+ done();
}
});
$ctx = $(":moogle-contextmenu");
$popup = $ctx.contextmenu("getMenu");
- ok($popup, "getMenu() works");
- ok(!$ctx.contextmenu("isOpen"), "menu initially closed");
+ assert.ok($popup, "getMenu() works");
+ assert.ok(!$ctx.contextmenu("isOpen"), "menu initially closed");
- equal( $ctx.length, 1, "widget created");
- ok($popup.is(":hidden"), "Menu is hidden");
+ assert.equal( $ctx.length, 1, "widget created");
+ assert.ok($popup.is(":hidden"), "Menu is hidden");
log("open()");
$ctx.contextmenu("open", $("span.hasmenu:first"));
log("after open()");
}
-asyncTest("UL menu", function() {
- _openTest("ul#sampleMenu");
+QUnit.test("UL menu", function(assert) {
+ _openTest("ul#sampleMenu", assert);
});
-asyncTest("Array menu", function() {
- _openTest(SAMPLE_MENU);
+QUnit.test("Array menu", function(assert) {
+ _openTest(SAMPLE_MENU, assert);
});
//---------------------------------------------------------------------------
-module("click event sequence", lifecycle);
+QUnit.module("click event sequence", lifecycle);
-function _clickTest(menu) {
- var $ctx, $popup;
+function _clickTest(menu, assert) {
+ var $ctx, $popup,
+ done = assert.async();
- expect(3);
+ assert.expect(13);
$("#container").contextmenu({
delegate: ".hasmenu",
@@ -299,6 +304,9 @@ function _clickTest(menu) {
// hide: false,
beforeOpen: function(event, ui) {
log("beforeOpen(" + ui.target.text() + ")");
+ assert.equal( ui.target.text(), "AAA", "beforeOpen: ui.target is set" );
+ assert.equal( ui.extraData.foo, "bar", "beforeOpen: ui.extraData is set" );
+ ui.extraData.helloFromBO = true;
},
create: function(event, ui) {
log("create");
@@ -306,7 +314,7 @@ function _clickTest(menu) {
createMenu: function(event, ui) {
log("createMenu");
},
- /*TODO: Seems that focus gets called twice in Safary, but nod PhantomJS */
+ /*TODO: Seems that focus gets called twice in Safary, but not PhantomJS */
// focus: function(event, ui) {
// var t = ui.item ? $(ui.item).find("a:first").attr("href") : ui.item;
// log("focus(" + t + ")");
@@ -324,18 +332,30 @@ function _clickTest(menu) {
// window.console.log("select");
var t = ui.item ? $(ui.item).attr("data-command") : ui.item;
log("select(" + t + ")");
- equal( ui.cmd, "cut", "select: ui.cmd is set" );
- equal( ui.target.text(), "AAA", "select: ui.target is set" );
+ assert.equal( ui.cmd, "cut", "select: ui.cmd is set" );
+ assert.equal( ui.target.text(), "AAA", "select: ui.target is set" );
+ assert.equal( ui.extraData.foo, "bar", "select: ui.extraData is set" );
+ assert.equal( ui.extraData.helloFromBO, true, "select: ui.extraData is maintained" );
},
- open: function(event) {
+ open: function(event, ui) {
log("open");
+ assert.equal( ui.target.text(), "AAA", "open: ui.target is set" );
+ assert.equal( ui.extraData.foo, "bar", "open: ui.extraData is set" );
+ assert.equal( ui.extraData.helloFromBO, true, "open: ui.extraData is maintained" );
setTimeout(function() {
entryEvent($popup, 0, "mouseenter");
click($popup, 0);
}, 10);
},
- close: function(event) {
+ close: function(event, ui) {
log("close");
+ assert.equal( ui.target.text(), "AAA", "close: ui.target is set" );
+ assert.equal( ui.extraData.foo, "bar", "close: ui.extraData is set" );
+ assert.equal( ui.extraData.helloFromBO, true, "close: ui.extraData is maintained" );
+ assert.equal(logOutput(),
+ "createMenu,create,open(),beforeOpen(AAA),after open(),open,select(cut),close",
+ "Event sequence OK.");
+ done();
}
});
@@ -343,48 +363,42 @@ function _clickTest(menu) {
$popup = $ctx.contextmenu("getMenu");
log("open()");
- $ctx.contextmenu("open", $("span.hasmenu:first"));
+ $ctx.contextmenu("open", $("span.hasmenu:first"), { foo: "bar" });
log("after open()");
-
- setTimeout(function() {
- // TODO: why is focus() called twice?
- equal(logOutput(),
- "createMenu,create,open(),beforeOpen(AAA),after open(),open,select(cut),close",
- "Event sequence OK.");
- start();
- }, 1000);
}
-asyncTest("Array menu", function() {
- _clickTest(SAMPLE_MENU);
+QUnit.test("Array menu", function(assert) {
+ _clickTest(SAMPLE_MENU, assert);
});
-asyncTest("UL menu", function() {
- _clickTest("ul#sampleMenu");
+QUnit.test("UL menu", function(assert) {
+ _clickTest("ul#sampleMenu", assert);
});
// ****************************************************************************
-module("'action' option", lifecycle);
+QUnit.module("Dynmic options", lifecycle);
-asyncTest("Array menu", function() {
+QUnit.test("'action' option", function(assert) {
var $ctx, $popup,
menu = [
- { title: "Cut", cmd: "cut", uiIcon: "ui-icon-scissors",
- data: { foo: "bar" }, addClass: "custom-class-1",
- action: function(event, ui) {
- log("cut action");
- equal( ui.cmd, "cut", "action: ui.cmd is set" );
- equal( ui.target.text(), "AAA", "action: ui.target is set" );
- equal( ui.item.data().foo, "bar", "action: ui.item.data() is set" );
- ok( ui.item.hasClass("custom-class-1"), "action: addClass property works" );
- }
- },
- { title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy" },
- { title: "Paste", cmd: "paste", uiIcon: "ui-icon-clipboard", disabled: true }
- ];
+ { title: "Cut", cmd: "cut", uiIcon: "ui-icon-scissors",
+ data: { foo: "bar" }, addClass: "custom-class-1",
+ action: function(event, ui) {
+ log("cut action");
+ assert.equal( ui.cmd, "cut", "action: ui.cmd is set" );
+ assert.equal( ui.target.text(), "AAA", "action: ui.target is set" );
+ assert.equal( ui.item.data().foo, "bar", "action: ui.item.data() is set" );
+ assert.ok( ui.item.hasClass("custom-class-1"),
+ "action: addClass property works" );
+ }
+ },
+ { title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy" },
+ { title: "Paste", cmd: "paste", uiIcon: "ui-icon-clipboard", disabled: true }
+ ],
+ done = assert.async();
- expect(9);
+ assert.expect(9);
$("#container").contextmenu({
delegate: ".hasmenu",
@@ -398,13 +412,17 @@ asyncTest("Array menu", function() {
select: function(event, ui) {
var t = ui.item ? $(ui.item).attr("data-command") : ui.item;
log("select(" + t + ")");
- equal( ui.cmd, "cut", "select: ui.cmd is set" );
- equal( ui.target.text(), "AAA", "select: ui.target is set" );
- equal( ui.item.data().foo, "bar", "ui.item.data() is set" );
- ok( ui.item.hasClass("custom-class-1"), "addClass property works" );
+ assert.equal( ui.cmd, "cut", "select: ui.cmd is set" );
+ assert.equal( ui.target.text(), "AAA", "select: ui.target is set" );
+ assert.equal( ui.item.data().foo, "bar", "ui.item.data() is set" );
+ assert.ok( ui.item.hasClass("custom-class-1"), "addClass property works" );
},
close: function(event) {
log("close");
+ assert.equal(logOutput(),
+ "open(),after open(),open,select(cut),cut action,close",
+ "Event sequence OK.");
+ done();
}
});
@@ -414,27 +432,106 @@ asyncTest("Array menu", function() {
log("open()");
$ctx.contextmenu("open", $("span.hasmenu:first"));
log("after open()");
+});
- setTimeout(function() {
- equal(logOutput(), "open(),after open(),open,select(cut),cut action,close",
- "Event sequence OK.");
- start();
- }, 500);
+QUnit.test("'tooltip' / 'disabled' options", function(assert) {
+ var $ctx, $popup,
+ menu = [ {
+ title: "Cut", cmd: "cut", tooltip: function(event, ui) {
+ log("tooltip(cut)");
+ assert.equal( ui.cmd, "cut", "ui.cmd is set" );
+ assert.equal( ui.target.text(), "AAA", "ui.target is set" );
+ assert.equal( ui.item.text(), "Cut", "ui.item is set" );
+ return "dynamic tt";
+ }
+ },
+ { title: "Copy", cmd: "copy", tooltip: "static tt" },
+ { title: "Paste", cmd: "paste", disabled: true },
+ { title: "Delete", cmd: "delete", disabled: function(event, ui) {
+ log("disabled(delete)");
+ return false;
+ }
+ },
+ { title: "Edit", cmd: "edit", disabled: function(event, ui) {
+ log("disabled(edit)");
+ return true; }
+ },
+ { title: "Hidden", cmd: "hidden", disabled: function(event, ui) {
+ log("disabled(hidden)");
+ return "hide";
+ }
+ }
+ ],
+ done = assert.async();
+
+ assert.expect(12);
+
+ $("#container").contextmenu({
+ delegate: ".hasmenu",
+ menu: menu,
+ open: function(event) {
+ log("open");
+ assert.equal(entry($popup, "cut").attr("title"), "dynamic tt",
+ "tooltip callback result was used");
+ assert.equal(entry($popup, "copy").attr("title"), "static tt",
+ "static tooltip value was used");
+
+ assert.equal(entry($popup, "paste").hasClass("ui-state-disabled"), true,
+ "static disabled value was used");
+ assert.equal(entry($popup, "delete").hasClass("ui-state-disabled"), false,
+ "dynamic disabled value 'false' was used");
+ assert.ok(entry($popup, "delete").is(":visible"),
+ "dynamic disabled value 'false' does not hide");
+ assert.equal(entry($popup, "paste").hasClass("ui-state-disabled"), true,
+ "dynamic disabled value 'true' was used");
+ assert.ok(entry($popup, "delete").is(":visible"),
+ "dynamic disabled value 'true' does not hide");
+ assert.ok(entry($popup, "hidden").is(":hidden"),
+ "dynamic disabled value 'hide' was used");
+
+ // Click s.th. to close the menu
+ setTimeout(function() {
+ click($popup, 0);
+ }, 10);
+ },
+ close: function(event) {
+ log("close");
+ assert.equal(logOutput(),
+ "open(),tooltip(cut),disabled(delete),disabled(edit),disabled(hidden)," +
+ "after open(),open,close",
+ "Event sequence OK.");
+ done();
+ }
+ });
+
+ $ctx = $(":moogle-contextmenu");
+ $popup = $ctx.contextmenu("getMenu");
+
+ log("open()");
+ $ctx.contextmenu("open", $("span.hasmenu:first"));
+ log("after open()");
});
// ****************************************************************************
-module("'beforeOpen' event", lifecycle);
+QUnit.module("'beforeOpen' event", lifecycle);
-asyncTest("modify on open", function() {
+QUnit.test("modify on open", function(assert) {
var $ctx, $popup,
menu = [
- { title: "Cut", cmd: "cut", uiIcon: "ui-icon-scissors" },
- { title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy" },
- { title: "Paste", cmd: "paste", uiIcon: "ui-icon-clipboard", disabled: true }
- ];
-
- expect(9);
+ { title: "Entry 1", cmd: "e1", uiIcon: "ui-icon-copy" },
+ { title: "Entry 2", cmd: "e2", uiIcon: "ui-icon-copy" },
+ { title: "Entry 3", cmd: "e3", uiIcon: "ui-icon-copy" },
+ { title: "Entry 4", cmd: "e4", uiIcon: "ui-icon-copy" },
+ { title: "Entry 5", cmd: "e5", uiIcon: "ui-icon-copy" },
+ { title: "Entry 6", cmd: "e6", uiIcon: "ui-icon-copy" },
+ { title: "Entry 7", cmd: "e7", uiIcon: "ui-icon-copy" },
+ { title: "Entry 8", cmd: "e8", uiIcon: "ui-icon-copy" },
+ { title: "Entry 9", cmd: "e9", uiIcon: "ui-icon-copy" }
+ ],
+ done = assert.async();
+
+ assert.expect(29);
$("#container").contextmenu({
delegate: ".hasmenu",
@@ -442,43 +539,119 @@ asyncTest("modify on open", function() {
beforeOpen: function(event, ui) {
log("beforeOpen");
$ctx
- .contextmenu("setEntry", "cut", "Cut - changed")
- .contextmenu("setEntry", "copy", { title: "Copy - changed", cmd: "copy2" })
- .contextmenu("setEntry", "paste", {
- title: "Paste - changed", cmd: "paste",
+ .contextmenu("setTitle", "e1", "Entry 1 - changed")
+ .contextmenu("setEntry", "e2", { uiIcon: "ui-icon-changed" })
+ .contextmenu("setEntry", "e3", {
+ title: "Entry 3 - changed", cmd: "e3",
children: [
- { title: "Sub 1", cmd: "sub_1" },
- { title: "Sub 2", cmd: "sub_2", disabled: true }
+ { title: "Sub 1", cmd: "e3_1" },
+ { title: "Sub 2", cmd: "e3_2", disabled: true }
]
- } );
+ } )
+ .contextmenu("setEntry", "e4", { title: "Entry 4 - changed", cmd: "e4_changed" })
+ .contextmenu("updateEntry", "e5", { uiIcon: "ui-icon-changed" });
},
open: function(event) {
log("open");
- equal(entryTitle($popup, "cut"), "Cut - changed",
- "setEntry(string)");
- equal(entry($popup, "copy").length, 0,
- "setEntry(object) change command id");
- equal(entryTitle($popup, "copy2"), "Copy - changed",
- "setEntry(object) set title");
- equal(entryTitle($popup, "paste"), "Paste - changed",
+ // setTitle()
+ assert.equal(entryTitle($popup, "e1"), "Entry 1 - changed",
+ "setTitle(string) changed title");
+ assert.equal(entry($popup, "e1").find("span.ui-icon").length, 1,
+ "setTitle(string) keeps existing icon");
+
+ // setEntry() with icon
+ assert.equal(entry($popup, "e2").find("span.ui-icon-changed").length, 1,
+ "setEntry() sets icon");
+ assert.equal(entryTitle($popup, "e2"), "undefined",
+ "setEntry() resets title");
+
+ // setEntry() with new sub-elements
+ assert.equal(entryTitle($popup, "e3"), "Entry 3 - changed",
"setEntry(object) set nested title");
- equal(entryTitle($popup, "sub_1"), "Sub 1",
+ assert.ok( !entry($popup, "e3").hasClass("ui-state-disabled"),
+ "setEntry(object) has reset 'disabled' attribute");
+ assert.equal(entryTitle($popup, "e3_1"), "Sub 1",
"setEntry(object) created nested entry");
- ok(entry($popup, "sub_2").hasClass("ui-state-disabled"),
+ assert.ok(entry($popup, "e3_2").hasClass("ui-state-disabled"),
"setEntry(object) created nested disabled entry");
+ // setEntry() with different CMD
+ assert.equal(entry($popup, "e4").length, 0,
+ "setEntry(object) change command id (old is gone)");
+ assert.equal(entry($popup, "e4_changed").length, 1,
+ "setEntry(object) change command id (new is set)");
+ assert.equal(entryTitle($popup, "e4_changed"), "Entry 4 - changed",
+ "setEntry(object) set title");
+
+ // updateEntry() with icon
+ assert.equal(entry($popup, "e5").find("span.ui-icon-changed").length, 1,
+ "updateEntry() sets icon");
+ assert.equal(entryTitle($popup, "e5"), "Entry 5",
+ "updateEntry() keeps title");
+
+ // Some more on-the-fly modifications
+
+ assert.ok( !entry($popup, "e9").is(":hidden"),
+ "Entry 9 is visible" );
+ assert.ok( !entry($popup, "e9").hasClass("ui-state-disabled"),
+ "Entry 9 is enabled" );
+
+ $ctx.contextmenu("enableEntry", "e9", false);
+ assert.ok( entry($popup, "e9").hasClass("ui-state-disabled"),
+ "enableEntry(false)" );
+
+ $ctx.contextmenu("setIcon", "e9", "ui-icon-changed");
+ assert.equal(entry($popup, "e9").find("span.ui-icon-changed").length, 1,
+ "setIcon()");
+
+ $ctx.contextmenu("setTitle", "e9", "Entry 9 - changed");
+ assert.equal(entryTitle($popup, "e9"), "Entry 9 - changed",
+ "setTitle()");
+
+ $ctx.contextmenu("showEntry", "e9", false);
+ assert.ok( entry($popup, "e9").is(":hidden"),
+ "showEntry(false)" );
+
+ // Use updateEntry()
+ $ctx.contextmenu("updateEntry", "e9", {
+ title: "Entry 9 - updated",
+ uiIcon: "ui-icon-updated",
+ tooltip: "tooltip updated",
+ disabled: false,
+ hide: false,
+ data: { foo: "bar" },
+ setClass: "custom-class"
+ });
+ assert.ok( !entry($popup, "e9").hasClass("ui-state-disabled"),
+ "updateEntry(disabled: false)" );
+ assert.equal(entry($popup, "e9").find("span.ui-icon-updated").length, 1,
+ "updateEntry(icon)");
+ assert.ok( !entry($popup, "e9").is(":hidden"),
+ "updateEntry(hide: false)" );
+ assert.equal(entryTitle($popup, "e9"), "Entry 9 - updated",
+ "updateEntry(title)");
+ assert.equal(entry($popup, "e9").attr("title"), "tooltip updated",
+ "updateEntry(tooltip)");
+ assert.equal(entry($popup, "e9").data().foo, "bar",
+ "updateEntry(data)");
+ assert.ok(entry($popup, "e9").is(".ui-menu-item.custom-class"),
+ "updateEntry(setClass)");
+
setTimeout(function() {
- click($popup, "cut");
+ click($popup, "e1");
}, 10);
},
select: function(event, ui) {
var t = ui.item ? $(ui.item).attr("data-command") : ui.item;
log("select(" + t + ")");
- equal( ui.cmd, "cut", "select: ui.cmd is set" );
- equal( ui.target.text(), "AAA", "select: ui.target is set" );
+ assert.equal( ui.cmd, "e1", "select: ui.cmd is set" );
+ assert.equal( ui.target.text(), "AAA", "select: ui.target is set" );
},
close: function(event) {
log("close");
+ assert.equal(logOutput(), "open(),beforeOpen,after open(),open,select(e1),close",
+ "Event sequence OK.");
+ done();
}
});
@@ -488,13 +661,6 @@ asyncTest("modify on open", function() {
log("open()");
$ctx.contextmenu("open", $("span.hasmenu:first"));
log("after open()");
-
- setTimeout(function() {
- equal(logOutput(), "open(),beforeOpen,after open(),open,select(cut),close",
- "Event sequence OK.");
- start();
- }, 500);
-
});
});
diff --git a/test/triage/issue-NNN.html b/test/triage/issue-NNN.html
new file mode 100644
index 0000000..322b60f
--- /dev/null
+++ b/test/triage/issue-NNN.html
@@ -0,0 +1,152 @@
+
+
+
+
+ jquery.ui-contextmenu.js - Demo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
jquery-ui-contextmenu Triage
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ui-contextmenu.jquery.json b/ui-contextmenu.jquery.json
deleted file mode 100644
index 14023f6..0000000
--- a/ui-contextmenu.jquery.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
- "name": "ui-contextmenu",
- "version": "1.10.1-0",
- "title": "jQuery UI context menu plugin",
- "description": "Turn a jQuery UI Menu widget into a contextmenu.",
- "keywords": [
- "context-menu",
- "contextmenu",
- "delegate",
- "jquery-plugin",
- "jquery-ui-menu",
- "menu",
- "navigation",
- "popup",
- "right-click",
- "right-click-menu"
- ],
- "author": {
- "name": "Martin Wendt",
- "email": "jquery@wwwendt.de",
- "url": "http://careers.stackoverflow.com/martin-wendt"
- },
- "repository": {
- "type": "git",
- "url": "https://github.com/mar10/jquery-ui-contextmenu"
- },
- "homepage": "https://github.com/mar10/jquery-ui-contextmenu",
- "demo": "http://wwwendt.de/tech/demo/jquery-contextmenu/demo/",
- "docs": "https://github.com/mar10/jquery-ui-contextmenu/blob/master/README.md",
- "bugs": "https://github.com/mar10/jquery-ui-contextmenu/issues",
- "licenses": [
- {
- "type": "MIT",
- "url": "https://github.com/mar10/jquery-ui-contextmenu/blob/master/MIT-LICENSE.txt"
- }
- ],
- "dependencies": {
- "jquery": ">=1.7",
- "jqueryui": ">=1.9"
- }
-}
\ No newline at end of file