From c27039a9b352c709f2f8196c080558c1f81a20c6 Mon Sep 17 00:00:00 2001
From: Wes <wwnolte@gmail.com>
Date: Fri, 16 Mar 2012 14:38:11 +0000
Subject: [PATCH] issue #8: clicking links inside nodes doesn't collapse nodes
 now.

---
 example/example.html        | 99 +++++++++++++++++++------------------
 example/jquery.jOrgChart.js | 35 +++++++------
 2 files changed, 70 insertions(+), 64 deletions(-)
diff --git a/example/example.html b/example/example.html
index db78fd3..8428cb8 100644
--- a/example/example.html
+++ b/example/example.html
@@ -4,57 +4,58 @@
     <link rel="stylesheet" href="css/bootstrap.min.css"/>
     <link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
     <link rel="stylesheet" href="css/custom.css"/>
-	<link href="css/prettify.css" type="text/css" rel="stylesheet" />
+    <link href="css/prettify.css" type="text/css" rel="stylesheet" />
 
-	<script type="text/javascript" src="prettify.js"></script>
-	
-	<!-- jQuery includes -->
+    <script type="text/javascript" src="prettify.js"></script>
+    
+    <!-- jQuery includes -->
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
-	
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+    
     <script src="jquery.jOrgChart.js"></script>
 
     <script>
     jQuery(document).ready(function() {
         $("#org").jOrgChart({
-			chartElement : '#chart',
-			dragAndDrop  : true
-		});
+            chartElement : '#chart',
+            dragAndDrop  : true
+        });
     });
     </script>
   </head>
 
   <body onload="prettyPrint();">
-	<div class="topbar">
-		<div class="topbar-inner">
-			<div class="container">
-				<a class="brand" href="#">jQuery Organisation Chart</a>
-				<ul class="nav">
-					<li><a href="http://github.com/wesnolte">Github</a></li>
-					<li><a href="http://twitter.com/wesnolte">Twitter</a></li>					
-					<li><a href="http://th3silverlining.com">Blog</a></li>		
-				</ul>
-				<div class="pull-right">
-   					<div class="alert-message info" id="show-list">Show underlying list.</div>
-					
-<pre class="prettyprint lang-html" id="list-html" style="display:none"></pre>		
-				</div>				
-			</div>
-		</div>
-	</div>
-	
-	<ul id="org" style="display:none">
+    <div class="topbar">
+        <div class="topbar-inner">
+            <div class="container">
+                <a class="brand" href="#">jQuery Organisation Chart</a>
+                <ul class="nav">
+                    <li><a href="http://github.com/wesnolte">Github</a></li>
+                    <li><a href="http://twitter.com/wesnolte">Twitter</a></li>                  
+                    <li><a href="http://th3silverlining.com">Blog</a></li>      
+                </ul>
+                <div class="pull-right">
+                    <div class="alert-message info" id="show-list">Show underlying list.</div>
+                    
+<pre class="prettyprint lang-html" id="list-html" style="display:none"></pre>       
+                </div>              
+            </div>
+        </div>
+    </div>
+    
+    <ul id="org" style="display:none">
     <li>
        Food
        <ul>
          <li id="beer">Beer</li>
          <li>Vegetables
+           <a href="http://wesnolte.com" target="_blank">Click me</a>
            <ul>
              <li>Pumpkin</li>
              <li>
-				<a href="http://tquila.com" target="_blank">Aubergine</a>
-				<p>A link and paragraph is all we need.</p>
-			 </li>
+                <a href="http://tquila.com" target="_blank">Aubergine</a>
+                <p>A link and paragraph is all we need.</p>
+             </li>
            </ul>
          </li>
          <li class="fruit">Fruit
@@ -82,27 +83,27 @@
          </li>
        </ul>
      </li>
-   </ul>			
-	
-	<div id="chart" class="orgChart"></div>
+   </ul>            
+    
+    <div id="chart" class="orgChart"></div>
     
     <script>
         jQuery(document).ready(function() {
-    		
-    		/* Custom jQuery for the example */
-    		$("#show-list").click(function(e){
-    			e.preventDefault();
-    			
-    			$('#list-html').toggle('fast', function(){
-    				if($(this).is(':visible')){
-    					$('#show-list').text('Hide underlying list.');
-    					$(".topbar").fadeTo('fast',0.9);
-    				}else{
-    					$('#show-list').text('Show underlying list.');
-    					$(".topbar").fadeTo('fast',1);					
-    				}
-    			});
-    		});
+            
+            /* Custom jQuery for the example */
+            $("#show-list").click(function(e){
+                e.preventDefault();
+                
+                $('#list-html').toggle('fast', function(){
+                    if($(this).is(':visible')){
+                        $('#show-list').text('Hide underlying list.');
+                        $(".topbar").fadeTo('fast',0.9);
+                    }else{
+                        $('#show-list').text('Show underlying list.');
+                        $(".topbar").fadeTo('fast',1);                  
+                    }
+                });
+            });
             
             $('#list-html').text($('#org').html());
             
diff --git a/example/jquery.jOrgChart.js b/example/jquery.jOrgChart.js
index 10cf348..1ca18d4 100644
--- a/example/jquery.jOrgChart.js
+++ b/example/jquery.jOrgChart.js
@@ -147,7 +147,6 @@
 
   // Method that recursively builds the tree
   function buildNode($node, $appendTo, level, opts) {
-    
     var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
     var $tbody = $("<tbody/>");
 
@@ -168,7 +167,7 @@
                         .end()
                         .html();
                         
-    var new_node_id = $node.attr("id")
+    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{
@@ -178,20 +177,20 @@
     // Expand and contract nodes
     if ($childNodes.length > 0) {
       $nodeDiv.click(function() {
-      var $this = $(this);
-      var $tr = $this.closest("tr");
+          var $this = $(this);
+          var $tr = $this.closest("tr");
 
-      if($tr.hasClass('contracted')){
-        $this.css('cursor','n-resize');
-        $tr.removeClass('contracted').addClass('expanded');
-        $tr.nextAll("tr").css('visibility', '');
-      }else{
-        $this.css('cursor','s-resize');
-        $tr.removeClass('expanded').addClass('contracted');
-        $tr.nextAll("tr").css('visibility', 'hidden');
-      }
-    });
-        }
+          if($tr.hasClass('contracted')){
+            $this.css('cursor','n-resize');
+            $tr.removeClass('contracted').addClass('expanded');
+            $tr.nextAll("tr").css('visibility', '');
+          }else{
+            $this.css('cursor','s-resize');
+            $tr.removeClass('expanded').addClass('contracted');
+            $tr.nextAll("tr").css('visibility', 'hidden');
+          }
+        });
+    }
     
     $nodeCell.append($nodeDiv);
     $nodeRow.append($nodeCell);
@@ -259,6 +258,12 @@
 
     $table.append($tbody);
     $appendTo.append($table);
+    
+    /* Prevent trees collapsing if a link inside a node is clicked */
+    $nodeDiv.children('a').click(function(e){
+        console.log(e);
+        e.stopPropagation();
+    });
   };
 
 })(jQuery);
