Merge branch 'feature/65-reveal-node' into develop

* feature/65-reveal-node:
  Corrected doc on revealNode #65
  Updated search method to optionally reveal results. #65
  Improved revealNode to only render once. #65
  Implemented revealNodes method, updated doc and tests #65

README.md

@@ -476,6 +476,16 @@ Removes the tree view component. Removing attached events, internal attached obj
 $('#tree').treeview('remove');
 ```
 
+#### revealNode(node | nodeId, options)
+
+Reveals a given tree node, expanding the tree from node to root.
+
+```javascript
+$('#tree').treeview('revealNode', [ nodeId, { silent: true } ]);
+```
+
+Triggers `nodeExpanded` event; pass silent to suppress events.
+
 #### search(pattern, options)
 
 Searches the tree view for nodes that match a given string, highlighting them in the tree.  
@@ -484,8 +494,9 @@ Returns an array of matching nodes.
 
 ```javascript
 $('#tree').treeview('search', [ 'Parent', {
-  ignoreCase: true,
-  exactMatch: false
+  ignoreCase: true,     // case insensitive
+  exactMatch: false,    // like or equals
+  revealResults: false, // reveal matching nodes
 }]);
 ```
 

public/index.html

@@ -85,6 +85,12 @@ <h2>Input</h2>
                 Exact Match
               </label>
             </div>
+            <div class="checkbox">
+              <label>
+                <input type="checkbox" class="checkbox" id="chk-reveal-results" value="false">
+                Reveal Results
+              </label>
+            </div>
             <button type="button" class="btn btn-success" id="btn-search">Search</button>
             <button type="button" class="btn btn-default" id="btn-clear-search">Clear</button>
           <!-- </form> -->
@@ -421,7 +427,7 @@ <h2></h2>
           enableLinks: true,
           data: defaultData
         });
-        
+
 
 
         var $searchableTree = $('#treeview-searchable').treeview({
@@ -432,7 +438,8 @@ <h2></h2>
           var pattern = $('#input-search').val();
           var options = {
             ignoreCase: $('#chk-ignore-case').is(':checked'),
-            exactMatch: $('#chk-exact-match').is(':checked')
+            exactMatch: $('#chk-exact-match').is(':checked'),
+            revealResults: $('#chk-reveal-results').is(':checked')
           };
           var results = $searchableTree.treeview('search', [ pattern, options ]);
 

public/js/bootstrap-treeview.js

@@ -70,7 +70,8 @@
 
 	_default.searchOptions = {
 		ignoreCase: true,
-		exactMatch: false
+		exactMatch: false,
+		revealResults: true
 	};
 
 	var Tree = function (element, options) {
@@ -110,6 +111,7 @@
 			expandAll: $.proxy(this.expandAll, this),
 			expandNode: $.proxy(this.expandNode, this),
 			toggleNodeExpanded: $.proxy(this.toggleNodeExpanded, this),
+			revealNode: $.proxy(this.revealNode, this),
 
 			// Search methods
 			search: $.proxy(this.search, this),
@@ -736,6 +738,32 @@
 		}, this));
 	};
 
+	/**
+		Reveals a given tree node, expanding the tree from node to root.
+		@param {Object|Number|Array} identifier - A valid node, node id or array of node identifiers
+		@param {optional Object} options
+	*/
+	Tree.prototype.revealNode = function (identifier, options) {
+		options = $.extend({}, _default.options, options);
+
+		if (!(identifier instanceof Array)) {
+			identifier = [identifier];
+		}
+
+		// Iterate nodes
+		$.each(identifier, $.proxy(function (index, identifier) {
+
+			// Traverse the tree expanding parents from node to root
+			var parentNode = this.getParent(identifier);
+			while (parentNode) {
+				this.setExpandedState(parentNode, true, options);
+				parentNode = this.getParent(parentNode);
+			};
+		}, this));
+
+		this.render();
+	};
+
 	/**
 		Toggles a nodes expanded state; collapsing if expanded, expanding if collapsed.
 		@param {Object|Number} identifier - A valid node or node id
@@ -777,11 +805,22 @@
 			}
 
 			results = this.findNodes(pattern, modifier);
+
+			// Add searchResult property to all matching nodes
+			// This will be used to apply custom styles
+			// and when identifying result to be cleared
 			$.each(results, function (index, node) {
 				node.searchResult = true;
 			})
 
-			this.render();
+			// If revealResults, then render is triggered from revealNode
+			// otherwise we just call render.
+			if (options.revealResults) {
+				this.revealNode(results);
+			}
+			else {
+				this.render();
+			}
 		}
 
 		this.$element.trigger('searchComplete', $.extend(true, {}, results));

src/js/bootstrap-treeview.js

@@ -70,7 +70,8 @@
 
 	_default.searchOptions = {
 		ignoreCase: true,
-		exactMatch: false
+		exactMatch: false,
+		revealResults: true
 	};
 
 	var Tree = function (element, options) {
@@ -110,6 +111,7 @@
 			expandAll: $.proxy(this.expandAll, this),
 			expandNode: $.proxy(this.expandNode, this),
 			toggleNodeExpanded: $.proxy(this.toggleNodeExpanded, this),
+			revealNode: $.proxy(this.revealNode, this),
 
 			// Search methods
 			search: $.proxy(this.search, this),
@@ -736,6 +738,32 @@
 		}, this));
 	};
 
+	/**
+		Reveals a given tree node, expanding the tree from node to root.
+		@param {Object|Number|Array} identifier - A valid node, node id or array of node identifiers
+		@param {optional Object} options
+	*/
+	Tree.prototype.revealNode = function (identifier, options) {
+		options = $.extend({}, _default.options, options);
+
+		if (!(identifier instanceof Array)) {
+			identifier = [identifier];
+		}
+
+		// Iterate nodes
+		$.each(identifier, $.proxy(function (index, identifier) {
+
+			// Traverse the tree expanding parents from node to root
+			var parentNode = this.getParent(identifier);
+			while (parentNode) {
+				this.setExpandedState(parentNode, true, options);
+				parentNode = this.getParent(parentNode);
+			};
+		}, this));
+
+		this.render();
+	};
+
 	/**
 		Toggles a nodes expanded state; collapsing if expanded, expanding if collapsed.
 		@param {Object|Number} identifier - A valid node or node id
@@ -777,11 +805,22 @@
 			}
 
 			results = this.findNodes(pattern, modifier);
+
+			// Add searchResult property to all matching nodes
+			// This will be used to apply custom styles
+			// and when identifying result to be cleared
 			$.each(results, function (index, node) {
 				node.searchResult = true;
 			})
 
-			this.render();
+			// If revealResults, then render is triggered from revealNode
+			// otherwise we just call render.
+			if (options.revealResults) {
+				this.revealNode(results);
+			}
+			else {
+				this.render();
+			}
 		}
 
 		this.$element.trigger('searchComplete', $.extend(true, {}, results));

tests/lib/bootstrap-treeview.js

@@ -70,7 +70,8 @@
 
 	_default.searchOptions = {
 		ignoreCase: true,
-		exactMatch: false
+		exactMatch: false,
+		revealResults: true
 	};
 
 	var Tree = function (element, options) {
@@ -110,6 +111,7 @@
 			expandAll: $.proxy(this.expandAll, this),
 			expandNode: $.proxy(this.expandNode, this),
 			toggleNodeExpanded: $.proxy(this.toggleNodeExpanded, this),
+			revealNode: $.proxy(this.revealNode, this),
 
 			// Search methods
 			search: $.proxy(this.search, this),
@@ -736,6 +738,32 @@
 		}, this));
 	};
 
+	/**
+		Reveals a given tree node, expanding the tree from node to root.
+		@param {Object|Number|Array} identifier - A valid node, node id or array of node identifiers
+		@param {optional Object} options
+	*/
+	Tree.prototype.revealNode = function (identifier, options) {
+		options = $.extend({}, _default.options, options);
+
+		if (!(identifier instanceof Array)) {
+			identifier = [identifier];
+		}
+
+		// Iterate nodes
+		$.each(identifier, $.proxy(function (index, identifier) {
+
+			// Traverse the tree expanding parents from node to root
+			var parentNode = this.getParent(identifier);
+			while (parentNode) {
+				this.setExpandedState(parentNode, true, options);
+				parentNode = this.getParent(parentNode);
+			};
+		}, this));
+
+		this.render();
+	};
+
 	/**
 		Toggles a nodes expanded state; collapsing if expanded, expanding if collapsed.
 		@param {Object|Number} identifier - A valid node or node id
@@ -777,11 +805,22 @@
 			}
 
 			results = this.findNodes(pattern, modifier);
+
+			// Add searchResult property to all matching nodes
+			// This will be used to apply custom styles
+			// and when identifying result to be cleared
 			$.each(results, function (index, node) {
 				node.searchResult = true;
 			})
 
-			this.render();
+			// If revealResults, then render is triggered from revealNode
+			// otherwise we just call render.
+			if (options.revealResults) {
+				this.revealNode(results);
+			}
+			else {
+				this.render();
+			}
 		}
 
 		this.$element.trigger('searchComplete', $.extend(true, {}, results));

tests/tests.js

@@ -556,6 +556,17 @@
 		equal($($tree.selector + ' ul li').length, 9, 'Expand node (levels = 2, by node) works, 9 nodes displayed');
 	});
 
+	test('revealNode', function () {
+		var $tree = init({ data: data, levels: 1 });
+
+		$tree.treeview('revealNode', 1); // Child_1
+		equal($($tree.selector + ' ul li').length, 7, 'Reveal node (by id) works, reveal Child 1 and 7 nodes displayed');
+
+		var nodeGrandchild1 = $tree.treeview('getNode', 2); // Grandchild 1
+		$tree.treeview('revealNode', nodeGrandchild1);
+		equal($($tree.selector + ' ul li').length, 9, 'Reveal node (by node) works, reveal Grandchild 1 and 9 nodes displayed');
+	});
+
 	test('search', function () {
 		var cbWorked, onWorked = false;
 		var $tree = init({