Merge pull request #83 from skateman/icon-background

Add support for the iconBackground property

Author: skateman

README.md

@@ -130,6 +130,7 @@ If you want to do more, here's the full node specification
   color: "#000000",
   backColor: "#FFFFFF",
   iconColor: "#FFFFFF",
+  iconBackground: "#000000",
   selectable: true,
   checkable: true,
   state: {
@@ -203,6 +204,11 @@ The background color used on a given node, overrides global color option.
 
 The color used on a given node's icon.
 
+#### iconBackground
+`String` `Optional`
+
+The color used under a given node's background icon.
+
 #### lazyLoad
 `Boolean` `Default: false`
 

src/css/bootstrap-treeview.css

@@ -26,18 +26,19 @@
 	margin-right: 10px;
 }
 
+
 .treeview span.icon {
-	width: 12px;
-	margin-right: 5px;
+  width: 12px;
+  margin-right: 5px;
 }
 
 .treeview .node-disabled {
-	color: silver;
-	cursor: not-allowed;
+  color: silver;
+  cursor: not-allowed;
 }
 
 .treeview .node-hidden {
-	display: none;
+  display: none;
 }
 
 .treeview span.image {
@@ -50,3 +51,8 @@
   margin-right: 5px;
   line-height: 1em;
 }
+
+.treeview span.icon.node-icon-background {
+  padding: 2px 2px 2px 2px;
+  width: calc(1em + 4px);
+}

src/js/bootstrap-treeview.js

@@ -1018,10 +1018,12 @@
 	// Add node icon
 	Tree.prototype._addIcon = function (node) {
 		if (this._options.showIcon && !(this._options.showImage && node.image)) {
-			node.$el
-				.append(this._template.icon.node.clone()
-					.addClass(node.icon || this._options.nodeIcon)
-				);
+			var icon = this._template.icon.node.clone().addClass(node.icon || this._options.nodeIcon);
+			if (node.iconBackground) {
+				icon.addClass('node-icon-background');
+			}
+
+			node.$el.append(icon);
 		}
 	}
 
@@ -1162,6 +1164,11 @@
 				var innerStyle = 'color:' + node.iconColor + ';';
 				style += '.node-' + this._elementId + '[data-nodeId="' + node.nodeId + '"] .node-icon{' + innerStyle + '}';
 			}
+
+			if (node.iconBackground) {
+				var innerStyle = 'background:' + node.iconBackground + ';';
+				style += '.node-' + this._elementId + '[data-nodeId="' + node.nodeId + '"] .node-icon{' + innerStyle + '}';
+			}
 		}, this));
 
 		return this._css + style;