Closed mar10#21 : 'action' option

Author: mar10

CHANGELOG.md

@@ -1,4 +1,6 @@
-# 1.0.1 / Unreleased
+# 1.1.0 / 2013-06-30
+
+* [FEATURE] Added `action` option for menu entries.
 
 # 1.0.0 / 2013-06-12
 

README.md

@@ -43,7 +43,6 @@ $("#container").contextmenu({
 	delegate: ".hasmenu",
 	menu: [
 		{title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy"},
-		{title: "Paste", cmd: "paste", disabled: true },
 		{title: "----"},
 		{title: "More", children: [
 			{title: "Sub 1", cmd: "sub1"},
@@ -56,6 +55,22 @@ $("#container").contextmenu({
 });
 ```
 
+
+Instead of handling all menu commands in the `select` event, it is also possible
+to attach callbacks to single menu entries using the `action` property:
+```js
+$(document).contextmenu({
+    delegate: ".hasmenu",
+    menu: [
+        {title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy", action: function(event, ui){
+                alert("Copy " + ui.target.text());
+             }
+         },
+        ...
+});
+```
+
+
 To attach menus to *all* elements on the page that have `class="hasmenu"`,
 we use `document` as context:
 ```js

jquery.ui-contextmenu.js

@@ -18,7 +18,7 @@
 
 
 	$.widget("moogle.contextmenu", {
-		version: "1.0.0",
+		version: "1.1.0",
 		options: {
 			delegate: null,       // selector
 			hide: { effect: "fadeOut", duration: "fast"},
@@ -126,12 +126,20 @@
 					create: $.proxy(this.options.createMenu, this),
 					focus: $.proxy(this.options.focus, this),
 					select: $.proxy(function(event, ui){
-						var isParent = (ui.item.has(">a[aria-haspopup='true']").length > 0);
-						ui.cmd = normCommand(ui.item.find(">a").attr("href"));
+						// User selected a menu entry
+						var retval,
+							isParent = (ui.item.has(">a[aria-haspopup='true']").length > 0),
+							$a = ui.item.find(">a"),
+							actionHandler = $a.data("actionHandler");
+						ui.cmd = normCommand($a.attr("href"));
 						ui.target = $(this.currentTarget);
 						// ignore clicks, if they only open a sub-menu
 						if( !isParent || !this.options.ignoreParentSelect){
-							if( this._trigger.call(this, "select", event, ui) !== false ){
+							retval = this._trigger.call(this, "select", event, ui);
+							if( actionHandler ){
+								retval = actionHandler.call(this, event, ui);
+							}
+							if( retval !== false ){
 								this._closeMenu.call(this);
 							}
 							event.preventDefault();
@@ -289,6 +297,9 @@ $.extend($.moogle.contextmenu, {
 				text: "" + entry.title,
 				href: "#" + normCommand(entry.cmd)
 			}).appendTo($parentLi);
+			if( $.isFunction(entry.action) ){
+				$a.data("actionHandler", entry.action);
+			}
 			if(entry.uiIcon){
 				$a.append($("<span class='ui-icon'>").addClass(entry.uiIcon));
 			}

jquery.ui-contextmenu.min.js

@@ -1,6 +1,6 @@
 {
 	"name": "ui-contextmenu",
-	"version": "1.0.0",
+	"version": "1.1.0",
 
 	"title": "jQuery UI context menu plugin",
 	"description": "Turn a jQuery UI Menu widget into a context menu.",

package.json

@@ -87,7 +87,7 @@ var th = new TestHelpers(),
 		{title: "----"},
 		{title: "More", children: [
 			{title: "Sub Item 1", cmd: "sub1"},
-			{title: "Sub Item 2", cmd: "sub2"}
+			{title: "Sub Item 2", cmd: "sub2" }
 			]}
 		],
 	$ = jQuery;
@@ -318,4 +318,60 @@ asyncTest("UL menu", function(){
 });
 
 
+// ****************************************************************************
+
+
+module("'action' option", lifecycle);
+
+asyncTest("Array menu", function(){
+	var $ctx, $popup,
+		menu  = [
+		   {title: "Cut", cmd: "cut", uiIcon: "ui-icon-scissors",
+			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" );
+			}
+		   },
+		   {title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy"},
+		   {title: "Paste", cmd: "paste", uiIcon: "ui-icon-clipboard", disabled: true }
+		   ];
+
+	expect(5);
+
+	$("#container").contextmenu({
+		delegate: ".hasmenu",
+		menu: menu,
+		open: function(event){
+			log("open");
+			setTimeout(function(){
+				click($popup, 0);
+			}, 10);
+		},
+		select: function(event, ui){
+			var t = ui.item ? $(ui.item).find("a:first").attr("href") : ui.item;
+			log("select(" + t + ")");
+			equal( ui.cmd, "cut", "select: ui.cmd is set" );
+			equal( ui.target.text(), "AAA", "select: ui.target is set" );
+		},
+		close: function(event){
+			log("close");
+		}
+	});
+
+   $ctx = $(":moogle-contextmenu");
+   $popup = $ctx.contextmenu("getMenu");
+
+   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);
+	});
+
+
 });

test/tests.js

@@ -1,6 +1,6 @@
 {
 	"name": "ui-contextmenu",
-	"version": "1.0.0",
+	"version": "1.1.0",
 
 	"title": "jQuery UI context menu plugin",
 	"description": "Turn a jQuery UI Menu widget into a context menu.",