From beba805557b9b1d17b210ed039eb2271db5d5262 Mon Sep 17 00:00:00 2001
From: Wes <wwnolte@gmail.com>
Date: Fri, 2 Dec 2011 14:22:14 +0000
Subject: [PATCH] panel that shows underlying html list now updates when node
 elements are rearranged

---
 example/example.html | 89 ++++++++++++++++----------------------------
 1 file changed, 33 insertions(+), 56 deletions(-)

diff --git a/example/example.html b/example/example.html
index 08404f3..05d5993 100644
--- a/example/example.html
+++ b/example/example.html
@@ -20,21 +20,6 @@
 			chartElement : '#chart',
 			dragAndDrop  : true
 		});
-		
-		/* Extra Code */
-		$("#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);					
-				}
-			});
-		});
     });
     </script>
   </head>
@@ -52,46 +37,7 @@
 				<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">&lt;ul id="org" style="display:none"&gt;
- &lt;li&gt;
-    Food
-    &lt;ul&gt;
-      &lt;li&gt;Beer&lt;/li&gt;
-      &lt;li&gt;Vegetables
-        &lt;ul&gt;
-          &lt;li&gt;Pumpkin&lt;/li&gt;
-          &lt;li&gt;
-		&lt;a href="http://tquila.com" target="_blank"&gt;Aubergine&lt;/a&gt;
-		&lt;p&gt;A link and paragraph is all we need.&lt;/p&gt;
-	 &lt;/li&gt;
-        &lt;/ul&gt;
-      &lt;/li&gt;
-      &lt;li&gt;Fruit
-        &lt;ul&gt;
-          &lt;li&gt;Apple
-            &lt;ul&gt;
-              &lt;li&gt;Granny Smith&lt;/li&gt;
-            &lt;/ul&gt;
-          &lt;/li&gt;
-          &lt;li&gt;Berries
-            &lt;ul&gt;
-              &lt;li&gt;Blueberry&lt;/li&gt;
-              &lt;li&gt;&lt;img src="images/raspberry.jpg" alt="Raspberry"/&gt;&lt;/li&gt;
-              &lt;li&gt;Cucumber&lt;/li&gt;
-            &lt;/ul&gt;
-          &lt;/li&gt;
-        &lt;/ul&gt;
-      &lt;/li&gt;
-      &lt;li&gt;Bread&lt;/li&gt;
-      &lt;li&gt;Chocolate
-        &lt;ul&gt;
-          &lt;li&gt;Topdeck&lt;/li&gt;
-          &lt;li&gt;Reese's Cups&lt;/li&gt;
-        &lt;/ul&gt;
-      &lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;</pre>		
+<pre class="prettyprint lang-html" id="list-html" style="display:none"></pre>		
 				</div>				
 			</div>
 		</div>
@@ -139,5 +85,36 @@
    </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);					
+    				}
+    			});
+    		});
+            
+            $('#list-html').text($('#org').html());
+            
+            $("#org").bind("DOMSubtreeModified", function() {
+                $('#list-html').text('');
+                
+                $('#list-html').text($('#org').html());
+                
+                prettyPrint();                
+            });
+        });
+    </script>
 
-</body></html>
\ No newline at end of file
+</body>
+</html>
\ No newline at end of file