From 9763085df24d0507636100e7919d6530391e62c6 Mon Sep 17 00:00:00 2001
From: Wes <wwnolte@gmail.com>
Date: Tue, 28 Feb 2012 09:28:18 +0000
Subject: [PATCH] Neaten comment header. Copied merged changes through to
 example code. Updated example code to demonstrate new functionality.

---
 example/example.html        |   4 +-
 example/jquery.jOrgChart.js | 463 +++++++++++++++++++-----------------
 jquery.jOrgChart.js         |   4 +-
 3 files changed, 249 insertions(+), 222 deletions(-)

diff --git a/example/example.html b/example/example.html
index 05d5993..db78fd3 100644
--- a/example/example.html
+++ b/example/example.html
@@ -47,7 +47,7 @@
     <li>
        Food
        <ul>
-         <li>Beer</li>
+         <li id="beer">Beer</li>
          <li>Vegetables
            <ul>
              <li>Pumpkin</li>
@@ -57,7 +57,7 @@
 			 </li>
            </ul>
          </li>
-         <li>Fruit
+         <li class="fruit">Fruit
            <ul>
              <li>Apple
                <ul>
diff --git a/example/jquery.jOrgChart.js b/example/jquery.jOrgChart.js
index 07dba19..dc88db9 100644
--- a/example/jquery.jOrgChart.js
+++ b/example/jquery.jOrgChart.js
@@ -1,238 +1,267 @@
 /**
- * jQuery org-chart/tree plugin.
- *
- * Author: Wes Nolte
- * http://twitter.com/wesnolte
- *
- * Based on the work of Mark Lee
- * http://www.capricasoftware.co.uk 
- *
- * This software is licensed under the Creative Commons Attribution-ShareAlike
- * 3.0 License.
- *
- * See here for license terms:
- * http://creativecommons.org/licenses/by-sa/3.0
- */
+* jQuery org-chart/tree plugin.
+*
+* Author: Wes Nolte
+* http://twitter.com/wesnolte
+*
+* Based on the work of Mark Lee
+* http://www.capricasoftware.co.uk
+*
+* ID implementation fixed by Adrian Hinz
+* 
+* This software is licensed under the Creative Commons Attribution-ShareAlike
+* 3.0 License.
+*
+* See here for license terms:
+* http://creativecommons.org/licenses/by-sa/3.0
+*/
 (function($) {
 
-  $.fn.jOrgChart = function(options) {
-    var opts = $.extend({}, $.fn.jOrgChart.defaults, options);
-    var $appendTo = $(opts.chartElement);
+    $.fn.jOrgChart = function(options) {
+        var opts = $.extend({}, $.fn.jOrgChart.defaults, options);
+        var $appendTo = $(opts.chartElement);
 
-	// build the tree
-    $this = $(this);
-    var $container = $("<div class='" + opts.chartClass + "'/>");
-    if($this.is("ul")) {
-      buildNode($this.find("li:first"), $container, 0, opts);
-    }
-    else if($this.is("li")) {
-      buildNode($this, $container, 0, opts);
-    }
-    $appendTo.append($container);
+        // build the tree
+        $this = $(this);
+        var $container = $("<div class='" + opts.chartClass + "'/>");
+        if($this.is("ul")) {
+            buildNode($this.find("li:first"), $container, 0, opts);
+        }
+        else if($this.is("li")) {
+            buildNode($this, $container, 0, opts);
+        }
+        $appendTo.append($container);
 
-	// add drag and drop if enabled
-	if(opts.dragAndDrop){
-		$('div.node').draggable({
-			cursor		: 'move',
-			distance	: 40,
-			helper      : 'clone',
-			opacity		: 0.8,
-			revert      : true,
-			revertDuration : 100,
-			snap		: 'div.node.expanded',
-			snapMode	: 'inner',
-			stack		: 'div.node'
-		});
-		
-		$('div.node').droppable({
-			accept      : '.node',			
-			activeClass : 'drag-active',
-			hoverClass	: 'drop-hover'
-		});
-		
-	  // Drag start event handler for nodes
-	  $('div.node').bind("dragstart", function handleDragStart( event, ui ){
-		
-		var sourceNode = $(this);
-		sourceNode.parentsUntil('.node-container')
-				   .find('*')
-				   .filter('.node')
-				   .droppable('disable');
-	  });
+        // add drag and drop if enabled
+        if(opts.dragAndDrop){
+            $('div.node').draggable({
+                cursor : 'move',
+                distance : 40,
+                helper : 'clone',
+                opacity : 0.8,
+                revert : true,
+                revertDuration : 100,
+                snap : 'div.node.expanded',
+                snapMode : 'inner',
+                stack : 'div.node'
+            });
 
-	  // Drag stop event handler for nodes
-	  $('div.node').bind("dragstop", function handleDragStop( event, ui ){
+            $('div.node').droppable({
+                accept : '.node',
+                activeClass : 'drag-active',
+                hoverClass : 'drop-hover'
+            });
 
-		/* reload the plugin */
-		$(opts.chartElement).children().remove();
-		$this.jOrgChart(opts);		
-	  });
-	
-	  // Drop event handler for nodes
-	  $('div.node').bind("drop", function handleDropEvent( event, ui ) {	
-	    var sourceNode = ui.draggable;
-		var targetNode = $(this);
-		
-		// finding nodes based on plaintext and html
-		// content is hard!
-		var targetLi = $('li').filter(function(){
-			
-			li = $(this).clone()
-						.children("ul,li")
-						.remove()
-					.end();
-			
-			return li.html() == targetNode.html();
-		});		
-		
-		var sourceLi = $('li').filter(function(){
-			
-			li = $(this).clone()
-						.children("ul,li")
-						.remove()
-					.end();
-			
-			return li.html() == sourceNode.html();
-		});
-		
-		var sourceliClone = sourceLi.clone();
-		var sourceUl = sourceLi.parent('ul');
-		
-		if(sourceUl.children('li').size() > 1){
-			sourceLi.remove();			
-		}else{
-			sourceUl.remove();
-		}
-		
-		if(targetLi.children('ul').size() >0){
-			targetLi.children('ul').append('<li>'+sourceliClone.html()+'</li>');		
-		}else{
-			targetLi.append('<ul><li>'+sourceliClone.html()+'</li></ul>');					
-		}
-		
-	  }); // handleDropEvent
-		
-	} // Drag and drop
-  };
+            // Drag start event handler for nodes
+            $('div.node').bind("dragstart", function handleDragStart( event, ui ){
 
-  // Option defaults
-  $.fn.jOrgChart.defaults = {
-	chartElement : 'body',
-    depth      : -1,
-    chartClass : "jOrgChart",
-	dragAndDrop: false
-  };
+                var sourceNode = $(this);
+                sourceNode.parentsUntil('.node-container')
+                .find('*')
+                .filter('.node')
+                .droppable('disable');
+            });
 
-  // Method that recursively builds the tree
-  function buildNode($node, $appendTo, level, opts) {
-	
-    var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
-    var $tbody = $("<tbody/>");
+            // Drag stop event handler for nodes
+            $('div.node').bind("dragstop", function handleDragStop( event, ui ){
 
-	// Construct the node container(s)
-    var $nodeRow = $("<tr/>").addClass("node-cells");
-    var $nodeCell = $("<td/>").addClass("node-cell").attr("colspan", 2);
-    var $childNodes = $node.children("ul:first").children("li");
-    var $nodeDiv;
-	
-    if($childNodes.length > 1) {
-      $nodeCell.attr("colspan", $childNodes.length * 2);
-    }
-	// Draw the node
-	// Get the contents - any markup except li and ul allowed
-	var $nodeContent = $node.clone()
-							.children("ul,li")
-							.remove()
-						.end()
-						.html();
-						
-    $nodeDiv = $("<div>").addClass("node").append($nodeContent);
+                /* reload the plugin */
+                $(opts.chartElement).children().remove();
+                $this.jOrgChart(opts);
+            });
 
-	// Expand and contract nodes
-    if ($childNodes.length > 0) {
-      $nodeDiv.click(function() {
-         var $this = $(this);
-         var $tr = $this.closest("tr");
-         $tr.nextAll("tr").fadeToggle("fast");
+            // Drop event handler for nodes
+            $('div.node').bind("drop", function handleDropEvent( event, ui ) {
+                var sourceNode = ui.draggable;
+                var targetNode = $(this);
 
-         if($tr.hasClass('contracted')){
-           $this.css('cursor','n-resize');
-           $tr.removeClass('contracted');
-           $tr.addClass('expanded');
-         }else{
-           $this.css('cursor','s-resize');
-           $tr.removeClass('expanded');
-           $tr.addClass('contracted');
-         }
-      });
-    }
-	
-    $nodeCell.append($nodeDiv);
-    $nodeRow.append($nodeCell);
-    $tbody.append($nodeRow);
+                // finding nodes based on plaintext and html
+                // content is hard!
+                var targetLi = $('li').filter(function(){
 
-    if($childNodes.length > 0) {
-	  // if it can be expanded then change the cursor
-	  $nodeDiv.css('cursor','n-resize').addClass('expanded');
-	
-	  // recurse until leaves found (-1) or to the level specified
-      if(opts.depth == -1 || (level+1 < opts.depth)) { 
-        var $downLineRow = $("<tr/>");
-        var $downLineCell = $("<td/>").attr("colspan", $childNodes.length*2);
-        $downLineRow.append($downLineCell);
+                    li = $(this).clone()
+                    .children("ul,li")
+                    .remove()
+                    .end();
+                    var attr = li.attr('id');
+                    if (typeof attr !== 'undefined' && attr !== false) {
+                        return li.attr("id") == targetNode.attr("id");
+                    }
+                    else {
+                        return li.html() == targetNode.html();
+                    }
+
+                });
+
+                var sourceLi = $('li').filter(function(){
+
+                    li = $(this).clone()
+                    .children("ul,li")
+                    .remove()
+                    .end();
+                    var attr = li.attr('id');
+                    if (typeof attr !== 'undefined' && attr !== false) {
+                        return li.attr("id") == sourceNode.attr("id");
+                    }
+                    else {
+                        return li.html() == sourceNode.html();
+                    }
+
+                });
+
+                var sourceliClone = sourceLi.clone();
+                var sourceUl = sourceLi.parent('ul');
+
+                if(sourceUl.children('li').size() > 1){
+                    sourceLi.remove();
+                }else{
+                    sourceUl.remove();
+                }
+
+                var id = sourceLi.attr("id");
+
+                if(targetLi.children('ul').size() >0){
+                    if (typeof id !== 'undefined' && id !== false) {
+                        targetLi.children('ul').append('<li id="'+id+'">'+sourceliClone.html()+'</li>');
+                    }else{
+                        targetLi.children('ul').append('<li>'+sourceliClone.html()+'</li>');
+                    }
+                }else{
+                    if (typeof id !== 'undefined' && id !== false) {
+                        targetLi.append('<ul><li id="'+id+'">'+sourceliClone.html()+'</li></ul>');
+                    }else{
+                        targetLi.append('<ul><li>'+sourceliClone.html()+'</li></ul>');
+                    }
+                }
+
+            }); // handleDropEvent
+
+        } // Drag and drop
+    };
+
+    // Option defaults
+    $.fn.jOrgChart.defaults = {
+        chartElement : 'body',
+        depth : -1,
+        chartClass : "jOrgChart",
+        dragAndDrop: false
+    };
+
+    // Method that recursively builds the tree
+    function buildNode($node, $appendTo, level, opts) {
+
+        var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
+        var $tbody = $("<tbody/>");
+
+        // Construct the node container(s)
+        var $nodeRow = $("<tr/>").addClass("node-cells");
+        var $nodeCell = $("<td/>").addClass("node-cell").attr("colspan", 2);
+        var $childNodes = $node.children("ul:first").children("li");
+        var $nodeDiv;
+
+        if($childNodes.length > 1) {
+            $nodeCell.attr("colspan", $childNodes.length * 2);
+        }
+        // Draw the node
+        // Get the contents - any markup except li and ul allowed
+        var $nodeContent = $node.clone()
+        .children("ul,li")
+        .remove()
+        .end()
+        .html();
+
+        var new_node_id = $node.attr("id")
+        if (typeof new_node_id !== 'undefined' && new_node_id !== false) {
+            $nodeDiv = $("<div>").addClass("node").attr("id", $node.attr("id")).append($nodeContent);
+        }else{
+            $nodeDiv = $("<div>").addClass("node").append($nodeContent);
+        }
+
+        // Expand and contract nodes
+        if ($childNodes.length > 0) {
+            $nodeDiv.click(function() {
+                var $this = $(this);
+                var $tr = $this.closest("tr");
+                $tr.nextAll("tr").fadeToggle("fast");
+
+                if($tr.hasClass('contracted')){
+                    $this.css('cursor','n-resize');
+                    $tr.removeClass('contracted');
+                    $tr.addClass('expanded');
+                }else{
+                    $this.css('cursor','s-resize');
+                    $tr.removeClass('expanded');
+                    $tr.addClass('contracted');
+                }
+            });
+        }
+
+        $nodeCell.append($nodeDiv);
+        $nodeRow.append($nodeCell);
+        $tbody.append($nodeRow);
+
+        if($childNodes.length > 0) {
+            // if it can be expanded then change the cursor
+            $nodeDiv.css('cursor','n-resize').addClass('expanded');
+
+            // recurse until leaves found (-1) or to the level specified
+            if(opts.depth == -1 || (level+1 < opts.depth)) {
+                var $downLineRow = $("<tr/>");
+                var $downLineCell = $("<td/>").attr("colspan", $childNodes.length*2);
+                $downLineRow.append($downLineCell);
         
-		// draw the connecting line from the parent node to the horizontal line 
-		$downLine = $("<div></div>").addClass("line down");
-		$downLineCell.append($downLine);
-        $tbody.append($downLineRow);
+                // draw the connecting line from the parent node to the horizontal line
+                $downLine = $("<div></div>").addClass("line down");
+                $downLineCell.append($downLine);
+                $tbody.append($downLineRow);
 
-        // Draw the horizontal lines
-        var $linesRow = $("<tr/>");
-        $childNodes.each(function() {
-          var $left = $("<td>&nbsp;</td>").addClass("line left top");
-          var $right = $("<td>&nbsp;</td>").addClass("line right top");
-          $linesRow.append($left).append($right);
-        });
+                // Draw the horizontal lines
+                var $linesRow = $("<tr/>");
+                $childNodes.each(function() {
+                    var $left = $("<td>&nbsp;</td>").addClass("line left top");
+                    var $right = $("<td>&nbsp;</td>").addClass("line right top");
+                    $linesRow.append($left).append($right);
+                });
 
-		// horizontal line shouldn't extend beyond the first and last child branches
-        $linesRow.find("td:first")
-					.removeClass("top")
-				 .end()
-				 .find("td:last")
-					.removeClass("top");
+                // horizontal line shouldn't extend beyond the first and last child branches
+                $linesRow.find("td:first")
+                .removeClass("top")
+                .end()
+                .find("td:last")
+                .removeClass("top");
 
-        $tbody.append($linesRow);
-        var $childNodesRow = $("<tr/>");
-        $childNodes.each(function() {
-           var $td = $("<td class='node-container'/>");
-           $td.attr("colspan", 2);
-		   // recurse through children lists and items
-           buildNode($(this), $td, level+1, opts);
-           $childNodesRow.append($td);
-        });
+                $tbody.append($linesRow);
+                var $childNodesRow = $("<tr/>");
+                $childNodes.each(function() {
+                    var $td = $("<td class='node-container'/>");
+                    $td.attr("colspan", 2);
+                    // recurse through children lists and items
+                    buildNode($(this), $td, level+1, opts);
+                    $childNodesRow.append($td);
+                });
 
-      }
-      $tbody.append($childNodesRow);
-    }
-
-    // any classes on the LI element get copied to the relevant node in the tree
-    // apart from the special 'collapsed' class, which collapses the sub-tree at this point
-    if ($node.attr('class') != undefined) {
-        var classList = $node.attr('class').split(/\s+/);
-        $.each(classList, function(index,item) {
-            if (item == 'collapsed') {
-                $nodeRow.nextAll('tr').css('display', 'none');
-                $nodeRow.removeClass('expanded');
-                $nodeRow.addClass('contracted');
-                $nodeDiv.css('cursor','s-resize');
-            } else {
-                $nodeDiv.addClass(item);
             }
-        });
-    }
+            $tbody.append($childNodesRow);
+        }
 
-    $table.append($tbody);
-    $appendTo.append($table);
-  };
+        // any classes on the LI element get copied to the relevant node in the tree
+        // apart from the special 'collapsed' class, which collapses the sub-tree at this point
+        if ($node.attr('class') != undefined) {
+            var classList = $node.attr('class').split(/\s+/);
+            $.each(classList, function(index,item) {
+                if (item == 'collapsed') {
+                    $nodeRow.nextAll('tr').css('display', 'none');
+                    $nodeRow.removeClass('expanded');
+                    $nodeRow.addClass('contracted');
+                    $nodeDiv.css('cursor','s-resize');
+                } else {
+                    $nodeDiv.addClass(item);
+                }
+            });
+        }
 
-})(jQuery);
+        $table.append($tbody);
+        $appendTo.append($table);
+    };
+
+})(jQuery);
\ No newline at end of file
diff --git a/jquery.jOrgChart.js b/jquery.jOrgChart.js
index 2080922..dc88db9 100644
--- a/jquery.jOrgChart.js
+++ b/jquery.jOrgChart.js
@@ -7,9 +7,7 @@
 * Based on the work of Mark Lee
 * http://www.capricasoftware.co.uk
 *
-* ID implementation by Aleks Drevenšek
-*
-* ID implementation fixed(changed) by Adrian Hinz
+* ID implementation fixed by Adrian Hinz
 * 
 * This software is licensed under the Creative Commons Attribution-ShareAlike
 * 3.0 License.