New option addClass

Close mar10#83

Author: mar10

CHANGELOG.md

@@ -1,7 +1,8 @@
 # 1.8.1-0 / Unreleased
-* [FEATURE] Publish on npm Registry.
-* [FEATURE] Publish on cdnjs.
-* [FEATURE] Include a source map file.
+* [FEATURE] Publish on npm Registry
+* [FEATURE] Publish on cdnjs
+* [FEATURE] Include a source map file
+* [FEATURE] New option `addClass`, defaults to "ui-contextmenu"
 
 # 1.8.0 / 2014-11-23
 * [FEATURE] #80 setEntry() supports creating nested menus

README.md

@@ -177,6 +177,12 @@ $(document).contextmenu({
 ## API documentation
 ### Options
 <dl>
+<dt>addClass</dt>
+<dd>
+    Type: <code>String</code>, 
+    default: <code>"ui-contextmenu"</code><br>
+    This class is added to the outer ul element.
+</dd>
 <dt>autoTrigger</dt>
 <dd>
     Type: <code>Boolean</code>, 
@@ -193,7 +199,7 @@ $(document).contextmenu({
 <dt>hide</dt>
 <dd>
     Type: <code> Boolean | Number | String | Object</code>, 
-    default: <code>{ effect: "fadeOut", duration: "fast"}</code><br>
+    default: <code>{ effect: "fadeOut", duration: "fast" }</code><br>
     Effect applied when hiding the popup.<br>
     See <a href="http://api.jqueryui.com/jQuery.widget/#option-show">sample</a> 
     for possible option values.

jquery.ui-contextmenu.js

@@ -27,6 +27,7 @@ var supportSelectstart = "onselectstart" in document.createElement("div"),
 $.widget("moogle.contextmenu", {
 	version: "@VERSION",
 	options: {
+		addClass: "ui-contextmenu",  // Add this class to the outer <ul>
 		autoTrigger: true,    // open menu on browser's `contextmenu` event
 		delegate: null,       // selector
 		hide: { effect: "fadeOut", duration: "fast" },
@@ -111,7 +112,9 @@ $.widget("moogle.contextmenu", {
 	},
 	/** (Re)Create jQuery UI Menu. */
 	_createUiMenu: function(menuDef) {
-		var ct;
+		var ct,
+			opts = this.options;
+
 		// Remove temporary <ul> if any
 		if (this.isOpen()) {
 			// #58: 'replaceMenu' in beforeOpen causing select: to lose ui.target
@@ -120,11 +123,13 @@ $.widget("moogle.contextmenu", {
 			this._closeMenu(true);
 			this.currentTarget = ct;
 		}
-
 		if (this.menuIsTemp) {
 			this.$menu.remove(); // this will also destroy ui.menu
 		} else if (this.$menu) {
-			this.$menu.menu("destroy").hide();
+			this.$menu
+				.menu("destroy")
+				.removeClass(this.options.addClass)
+				.hide();
 		}
 		this.$menu = null;
 		this.menuIsTemp = false;
@@ -143,21 +148,22 @@ $.widget("moogle.contextmenu", {
 		// Create - but hide - the jQuery UI Menu widget
 		this.$menu
 			.hide()
-//				.addClass("moogle-contextmenu")
+			.addClass(opts.addClass)
 			// Create a menu instance that delegates events to our widget
-			.menu($.extend(true, {}, this.options.uiMenuOptions, {
-				blur: $.proxy(this.options.blur, this),
-				create: $.proxy(this.options.createMenu, this),
-				focus: $.proxy(this.options.focus, this),
+			.menu($.extend(true, {}, opts.uiMenuOptions, {
+				blur: $.proxy(opts.blur, this),
+				create: $.proxy(opts.createMenu, this),
+				focus: $.proxy(opts.focus, this),
 				select: $.proxy(function(event, ui) {
 					// User selected a menu entry
 					var retval,
 						isParent = $.moogle.contextmenu.isMenu(ui.item),
 						actionHandler = ui.item.data("actionHandler");
+
 					ui.cmd = ui.item.attr("data-command");
 					ui.target = $(this.currentTarget);
 					// ignore clicks, if they only open a sub-menu
-					if ( !isParent || !this.options.ignoreParentSelect) {
+					if ( !isParent || !opts.ignoreParentSelect) {
 						retval = this._trigger.call(this, "select", event, ui);
 						if ( actionHandler ) {
 							retval = actionHandler.call(this, event, ui);

test/tests.js

@@ -179,14 +179,15 @@ function _createTest(menu) {
 	log( "afterConstructor");
 	$ctx = $(":moogle-contextmenu");
 	equal( $ctx.length, 1, "widget created");
-//    ok($("#sampleMenu").hasClass( "moogle-contextmenu" ), "Class set to menu definition");
+	// equal( $("#sampleMenu").hasClass( "ui-contextmenu" ), true,
+	// 	"Class set to menu definition");
 	equal( $("head style.moogle-contextmenu-style").length, 1, "global stylesheet created");
 
 	$ctx.contextmenu("destroy");
 
 	equal( $(":moogle-contextmenu").length, 0, "widget destroyed");
-//    ok( !$("#sampleMenu").hasClass("moogle-contextmenu"),
-//           "Class removed from menu definition");
+  //   equal( $("#sampleMenu").hasClass("ui-contextmenu"), false,
+		// "Class removed from menu definition");
 	equal( $("head style.moogle-contextmenu-style").length, 0, "global stylesheet removed");
 
 	equal(logOutput(), "constructor,createMenu,create,afterConstructor",
@@ -208,7 +209,7 @@ module("open", lifecycle);
 function _openTest(menu) {
 	var $ctx, $popup;
 
-	expect(18);
+	expect(19);
 
 	$("#container").contextmenu({
 		delegate: ".hasmenu",
@@ -237,6 +238,8 @@ function _openTest(menu) {
 
 			ok( $popup.is(":visible"),
 				"open: Menu is visible" );
+			ok( $popup.hasClass("ui-contextmenu"),
+				"Class removed from menu definition");
 			ok( entry($popup, 2).hasClass("ui-state-disabled"),
 				"open: Entry is disabled" );