d3-context-menu - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

js/d3-context-menu.js

@@ -23,3 +23,3 @@ (function(root, factory) {
 			noop: function () {},
-			
+
 			/**
@@ -121,3 +121,3 @@ * @param {*} value
 
-				var list = d3.selectAll('.d3-context-menu')
+				var parent = d3.selectAll('.d3-context-menu')
 					.on('contextmenu', function() {
@@ -129,34 +129,5 @@ closeMenu();
 					.append('ul');
-				
-				list.selectAll('li').data(menuItems.bind(element)(data, index)).enter()
-					.append('li')
-					.attr('class', function(d) {
-						var ret = '';
-						if (utils.toFactory(d.divider).bind(element)(data, index)) {
-							ret += ' is-divider';
-						}
-						if (utils.toFactory(d.disabled).bind(element)(data, index)) {
-							ret += ' is-disabled';
-						}
-						if (!d.action) {
-							ret += ' is-header';
-						}
-						return ret;
-					})
-					.html(function(d) {
-						if (utils.toFactory(d.divider).bind(element)(data, index)) {
-							return '<hr>';
-						}
-						if (!d.title) {
-							console.error('No title attribute set. Check the spelling of your options.');
-						}
-						return utils.toFactory(d.title).bind(element)(data, index);
-					})
-					.on('click', function(d, i) {
-						if (utils.toFactory(d.disabled).bind(element)(data, index)) return; // do nothing if disabled
-						if (!d.action) return; // headers have no "action"
-						d.action.bind(element)(data, index);
-						closeMenu();
-					});
 
+				parent.call(createNestedMenu, element);
+
 				// the openCallback allows an action to fire before the menu is displayed
@@ -179,2 +150,45 @@ // an example usage would be closing a tooltip
 				d3.event.stopPropagation();
+
+
+				function createNestedMenu(parent, root, depth = 0) {
+					var resolve = function (value) {
+						return utils.toFactory(value).call(root, data, index);
+					};
+
+					parent.selectAll('li')
+					.data(function (d) {
+							var baseData = depth === 0 ? menuItems : d.children;
+							return resolve(baseData);
+						})
+						.enter()
+						.append('li')
+						.each(function (d) {
+							// get value of each data
+							var isDivider = !!resolve(d.divider);
+							var isDisabled = !!resolve(d.disabled);
+							var hasChildren = !!resolve(d.children);
+							var hasAction = !!d.action;
+							var text = isDivider ? '<hr>' : resolve(d.title);
+
+							var listItem = d3.select(this)
+								.classed('is-divider', isDivider)
+								.classed('is-disabled', isDisabled)
+								.classed('is-header', !hasChildren && !hasAction)
+								.classed('is-parent', hasChildren)
+								.html(text)
+								.on('click', function () {
+									// do nothing if disabled or no action
+									if (isDisabled || !hasAction) return;
+
+									d.action.call(root, data, index);
+									closeMenu();
+								});
+
+							if (hasChildren) {
+								// create children(`next parent`) and call recursive
+								var children = listItem.append('ul').classed('is-children', true);
+								createNestedMenu(children, root, ++depth)
+							}
+						});
+				}
 			};
@@ -181,0 +195,0 @@ };

package.json

 {
   "name": "d3-context-menu",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A plugin for d3.js that allows you to easily use context menus in your visualizations.",
@@ -5,0 +5,0 @@ "main": "js/d3-context-menu.js",

README.md

@@ -67,19 +67,55 @@ # d3-context-menu
 ```
-		var menu = [
+var menu = [
+	{
+		title: 'Header',
+	},
+	{
+		title: 'Normal item',
+		action: function() {}
+	},
+	{
+		divider: true
+	},
+	{
+		title: 'Last item',
+		action: function() {}
+	}
+];
+```
+
+#### Nested Menu
+
+Menus can have Nested Menu. To specify a nested menu, simply add "children" property. Children has item of array.
+
+```
+var menu = [
+	{
+		title: 'Parent',
+		children: [
 			{
-				title: 'Header',
-			},
-			{
-				title: 'Normal item',
-				action: function() {}
-			},
-			{
-				divider: true
-			},
-			{
-				title: 'Last item',
-				action: function() {}
+				title: 'Child',
+				children: [
+					{
+						// header
+						title: 'Grand-Child1'
+					},
+					{
+						// normal
+						title: 'Grand-Child2',
+						action: function() {}
+					},
+					{
+						// divider
+						divider: true
+					},
+					{
+						// disable
+						title: 'Grand-Child3',
+						action: function() {}
+					}
+				]
 			}
-		];
-
+		]
+	},
+];
 ```
@@ -147,3 +183,3 @@
 ```
-	
+
 #### Dynamic menu list
@@ -183,3 +219,3 @@
 ```
-	
+
 #### Deleting Nodes Example
@@ -272,2 +308,5 @@
 
+### What's new in version 1.1.0
+* Nested submenus are now supported
+
 ### What's new in version 1.0.1
@@ -274,0 +313,0 @@ * Default theme styles extracted to their own CSS class (`d3-context-menu-theme`)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Lines of code

302

increased by13.96%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

334

increased by13.22%

Worsened metrics

Total package byte prevSize

21314

decreased by-31.97%

Number of package files

7

decreased by-41.67%

No dependency changes