Removed hierarchy and collapsible tree to separate templates

1 files changed, 327 insertions, 449 deletions

diff --git a/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme.html b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme.html
index 280f231..043eff3 100644
--- a/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme.html
+++ b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme.html
@@ -7,52 +7,47 @@
 
 {% get_group_name groupid as group_name_tag %}
 
-
 {% block title %} {{ title }} {% endblock %}
 
 {% block head %}  
 
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+	<!-- Scripts required for D3 graph -->
+	<script type="text/javascript" src="/static/ndf/bower_components/d3/d3.min.js"></script>
+	<script type="text/javascript" src="/static/ndf/bower_components/underscore/underscore.js"></script>
+	<script sync="text/javascript" src="/static/ndf/bower_components/FileSaver/FileSaver.js" ></script>
 
-  <!-- Scripts required for D3 graph -->
-  <script type="text/javascript" src="/static/ndf/bower_components/d3/d3.min.js"></script> <!-- checked -->
-  <script type="text/javascript" src="/static/ndf/bower_components/underscore/underscore.js"></script> <!-- checked -->
-  <script sync="text/javascript" src="/static/ndf/bower_components/FileSaver/FileSaver.js" ></script> <!-- checked -->
+	<link href="/static/ndf/bower_components/jqtree/jqtree.css" rel="stylesheet"> 
+	<script src="/static/ndf/bower_components/jqtree/tree.jquery.js"></script>
 
-  <link href="/static/ndf/bower_components/jqtree/jqtree.css" rel="stylesheet"> 
-  <script src="/static/ndf/bower_components/jqtree/tree.jquery.js"></script> <!-- checked -->
-  
-  <script type="text/javascript">
+<!-- 	<script type="text/javascript">
 
   	$(document).ready(function() {
 
+		// Funtion for loading tree for showing collection list left side panel
+		doc();
 
-      // Funtion for loading tree for showing collection list left side panel
-      doc();
+		// Function for manipulating tree when user visits to page directly via browser url
+		{% if selected %} TreeTillNode(); {% endif %}
+    });
 
-      // Function for manipulating tree when user visits to page directly via browser url
-      {% if selected %}
-      	TreeTillNode();
-      {% endif %}
 
+  	function TreeTillNode () {
 
-    });
+		// This gives the last hierarchy node id from browser url.
+		var url = "{{selected}}";
 
+		var tree_build = $(".themes").not(".jqtree-loading");
+		var node = tree_build.tree('getNodeById', url);
+		tree_build.tree('openNode', node);
 
-  	function TreeTillNode () {
-      // This gives the last hierarchy node id from browser url.
-      var url = "{{selected}}";
+		// Javascript function to be used for checking objects in specific time of interval
+		setTimeout(function(){
 
-	  var tree_build = $(".themes").not(".jqtree-loading");
-  	  var node = tree_build.tree('getNodeById', url);
-  	  tree_build.tree('openNode', node);
-      
-      // Javascript function to be used for checking objects in specific time of interval
-      setTimeout(function(){
-        // console.log($(".themes"))
-        if( ($(".themes").length > 0) ) { TreeTillNode() }
-      }, 100 );
-    
+		// console.log($(".themes"))
+		if( ($(".themes").length > 0) ) { TreeTillNode() }
+		}, 100 );
     }
 
 
@@ -80,16 +75,12 @@
 				else{
 					$li.find('.jqtree-title').before('&nbsp <span class="fi-folder" style="color:orange"></span> &nbsp;');				        		
 				}
-
     			   
 				if (node.node_type == "Topic"){        					
-
 					$li.find('.jqtree-element').append(
 
             				'&nbsp;&nbsp;<a id='+node.id+' name='+node.name+' class="topic" href="/{{groupid}}/topics/'+node.id+'/"> </a>' 
-
         			);	            			
-
 				}
 				else{
 					if (user == "True"){
@@ -103,12 +94,8 @@
                 			{% endif %}
         				);
 					}
-
 				}
-    					
-
     		}
-
 		});
 		
 		// bind 'tree.click' event
@@ -143,7 +130,6 @@
 
 		  			if (node.node_type == "Topic"){
 		  				location.href = "/{{group_name_tag}}/topic_details/"+node.id+"?nav_li="+nav_list+"";
-
 		  			}
 			        
 		  		}
@@ -239,8 +225,6 @@
 				}
 
 			}
-
-
 		});
 		
         // console.log($(".jqtree-element.jqtree_common"))
@@ -278,9 +262,9 @@
 	showTopicStats();
 
   </script>
-
+ -->
   <style>
-
+/*
   	#app-set-item li { padding:0.5em }
 
 	.jqtree-closed > .jqtree-element i.icon-folder-open:before {
@@ -289,7 +273,7 @@
     .jqtree-tree i {
         margin-right: 4px;
     }
-    /* for reingold tilford tree */
+*/    /* for reingold tilford tree */
 /*
 	.node {
 	  cursor: pointer;
@@ -334,6 +318,11 @@
     stroke-width: 1.5px;
   }
 
+  #theme-drag-zoom-tree{
+  	border: medium dashed #D8BFD8;
+  	border-radius: 5px;
+  }
+
 /*  .templink {
     fill: none;
     stroke: red;
@@ -352,13 +341,15 @@
 {% endblock%}
 
 
-{% block shelf_content %}
-  {% if user.is_authenticated %}
-    {% include "ndf/shelf.html" %}
-  {% else %}
-  <h4>Please Login to create your shelf</h4>
-  {% endif %}  
-{% endblock %}
+{% comment %}
+	{% block shelf_content %}
+	  {% if user.is_authenticated %}
+	    {% include "ndf/shelf.html" %}
+	  {% else %}
+	  <h4>Please Login to create your shelf</h4>
+	  {% endif %}  
+	{% endblock %}
+{% endcomment %}
 
 {% block meta_content %}
 	<a  class="Tp" href="{% url 'topics' group_name_tag %}" title="Click to go to themes card view"><h2 class="subheader">{% trans "Themes" %}</h2></a>
@@ -372,7 +363,7 @@
 	<ul class="no-bullet" id="app-set-item"> 
 
 	    {% get_memberof_objects_count theme_GST_id groupid as count %}
-	  
+
 	      <li class="selected-app-set-item"> 
 	        <div>
 	  		  {% if user_access == "allow" %}
@@ -398,90 +389,23 @@
 
 
 {% block body_content %}
-{% user_access_policy groupid request.user as user_access %}
-	
-	<!-- This overlay is for displaying topic details from collapsible tree -->
-	<!-- <div id="collaps_topic_details" class="reveal-modal" style="height:500px;overflow:hidden;width:80%" data-reveal>  
-	  	<h3>Topic details comming soon !!!</h3>
-    	<a class="close-reveal-modal" >&#215;</a> 
-	</div> -->
-	<!-- End of overlay -->
 
-	{% if themes_hierarchy %}
-
-		<h2> {{node.name}}</h2> 
-		<div class="row">
-		<div class="large-4 columns">
-
-			{% if user_access == "allow" %}
-
-	          <a class="button tiny" data-reveal-id="view_add_page" title="Add Theme Item">
-	            +&nbsp;Add Theme Item
-	          </a>
-
-	          <div id="view_add_page" class="reveal-modal" data-reveal style="height:300px;"> 
-
-	              <h3>Add New Theme Item:</h3>
-	              <!-- To enter name of theme item -->
-	              <div>
-	                <input class="name_id" name="name" type="text" placeholder="Enter name...">
-	              </div>   <br/>           
-
-	              <input type="submit" id="add_theme_item" value="Save Theme Item" class="medium round button"/>
-
-	              <a class="close-reveal-modal">&#215;</a>
-
-	          </div>          
-	        {% endif %}
-	    </div>
+	{% user_access_policy groupid request.user as user_access %}
 
-        <div class="large-4 columns">
 
-			<a data-dropdown="hover1" data-options="is_hover:true; hover_timeout:5000" class="tree_browser" style="border: 2px solid #0eacb5; padding: 5px;"><b> {% trans "Tree Browser" %} </b></a> &nbsp;&nbsp;&nbsp;
-			<ul id="hover1" class="f-dropdown" data-dropdown-content>
-				<li><a class="fold"><i class="fi-plus"></i> {% trans "Fold" %} </a></li> 
-				<li><a class="unfold"><i class="fi-minus"></i> {% trans "Unfold" %} </a></li>  
-			</ul> 
-			
-			<a class="collapsible_tree" style="border: 2px solid #0eacb5; padding: 5px;"><b> {% trans "Collapsible Tree" %} </b></a>
+	{% if themes_hierarchy and node %}
 
-		</div>
 
-		<div class="large-4 columns">
-		{% if user.is_authenticated %}
-    		{% if user_access == "allow" %}
-    		
-    			<input class="button tiny deleteObjects right" type="button" value="Delete">
-    			<span class="right"><input class="checkedAll" type="checkbox"> Select All &nbsp;&nbsp;</span>
-
-    			<div id="myModal" class="reveal-modal" data-reveal style="height:500px;overflow:scroll;"> 
-        
-			        <h3>{% trans "Are you sure you want to delete? All of the related items for the following themes also will be deleted:" %}</h3> 
-			        
-			        <input class="button confirmDeleteObjects" type="button" value="Confirm">
-			        <input class="button cancelDeleteObjects" type="button" value="Cancel">
-			        <div id="deletion_results"></div>
-			        <a class="close-reveal-modal">&#215;</a>
+		{% cache 300 theme_tree node.pk request.LANGUAGE_CODE %}
 
-		      	</div>		
+			{% include "ndf/hierarchy_tree.html" %}
+			<div id="app-set-item" class="themes hide" data-url="{% url 'get_tree_hierarchy' groupid node.pk %}">
+			</div>
 
-    		{% endif %}
-		{% endif %}
-		</div>
-		</div>
-		<hr/>
-
-		{% if node %}
-			{% cache 300 theme_tree node.pk request.LANGUAGE_CODE %}
-			<!-- If "Theme" node -->
-			<div id="app-set-item" class="themes" data-url="{% url 'get_tree_hierarchy' groupid node.pk %}"></div>
-
-			<!-- testing -->
+	    	<div id="theme-drag-zoom-tree" class="hide"></div>
 			{% include 'ndf/theme_drag_zoom_d3tree.html' %}
-			{% endcache %}
-			
-		{% endif %}
-
+		{% endcache %}
+		
 	{% endif %}
 
 	<!-- For displaying themes items -->
@@ -654,358 +578,312 @@
 	<script type="text/javascript">
 
 // ------ jqtree tree ------
-    	$("document").on("hover", ".jqtree-title.jqtree_common", function(){
-    		setTimeout(function(){
-		      }, 1000);
+		// script for fold themes_cards hierarchy
 
-			alert($(this).siblings("a").attr("id"));
-		});
+    {% if node %}
+
+	    {% if tree == "hierarchical" %}
+	    	if({{unfold}})
+	    	{
+				$("#theme-drag-zoom-tree").addClass("hide")
+		    	$(".themes").removeClass("hide");
+		    	plotHierarchyTree(true);
+	    	}
+	    	else
+	    	{
+	    		$("#theme-drag-zoom-tree").addClass("hide")
+		    	$(".themes").removeClass("hide");
+		    	plotHierarchyTree(false);
+	    	}
+
+	    {% else %}
+	        
+			$(".themes").addClass("hide");
+
+    		{% if node %}
+
+			    $.getJSON("{% url 'get_tree_hierarchy' group_id node.pk %}?collapsible=true", function(data){ treeData = data;})
+			    .done(function(){plotDragZoomTree(treeData);
+			    });
+
+		    {% endif %}
+
+			$("#theme-drag-zoom-tree").removeClass("hide");
+
+		{% endif %}
+
+    {% endif %}
 
-		$("#add_theme_item").click(function() {
-			      $.ajax({
-		        type: "POST",
-		        url: "{% url 'add_theme_item' groupid %}",
-		        datatype: "html",
-		        data:{
-		          context_theme: "{{node.pk}}",
-		          name: $(".name_id").val(),
-		          csrfmiddlewaretoken: '{{ csrf_token }}'
-		        },
-		        success: function(data) {
-
-		          var item = $(".name_id").val();
-
-		          if ($.trim(data) === "failure") {
-		            alert("Theme item "+ item +" already available, Please choose different name");
-		          }
-
-		          if ($.trim(data) === "success") {
-		            location.reload(true);
-		          }
-
-		          $(".name_id").val("");
-		        }
-		      });
 
-		});
 
-		// script for fold themes_cards hierarchy
 		$(".fold").click(function() {
-			$(function() {				
-				location.href = "{% url 'theme_page' group_name_tag app_id %}";
-			});
+
+			// $("#theme-drag-zoom-tree").addClass("hide")
+	  //   	$(".themes").removeClass("hide");
+	    	// plotHierarchyTree(false);
+			// $(function() {				
+				location.href = "{% url 'theme_page' group_name_tag app_id %}?tree=hierarchical";
+			// });
 		});
 
 		// script for unfold themes hierarchy
 	    $(".unfold").click(function() {
-	    	$(function() {
-	    		location.href = "{% url 'theme_page' group_name_tag app_id %}?unfold=true";	
-	    	});
+
+			// $("#theme-drag-zoom-tree").addClass("hide")
+	  //   	$(".themes").removeClass("hide");
+	  //   	plotHierarchyTree(true);
+	    	// $(function() {
+	    		location.href = "{% url 'theme_page' group_name_tag app_id %}?tree=hierarchical&unfold=true";	
+	    	// });
 	    });	
 
 	    $(".tree_browser").click(function() {
-			$(function() {				
-				location.href = "{% url 'theme_page' group_name_tag app_id %}";
-			});
+
+			// $("#theme-drag-zoom-tree").addClass("hide")
+	  //   	$(".themes").removeClass("hide");
+	  //   	plotHierarchyTree()
+			// $(function() {				
+				location.href = "{% url 'theme_page' group_name_tag app_id %}?tree=hierarchical";
+			// });
 		});
 
-	    // script for delete themes
-	    $(document).on('click',".button.deleteObjects",function(){
-	    	var selectedobject = $(".objectsCheckbox input:checked")
 
-	    	if(selectedobject.length > 0)
-	    	{
-           		$('#myModal').foundation('reveal', 'open');
-
-           		var i = 0;
-             	var str = "";  
-	            $.map(selectedobject,function(each){
-	                if(i == 0)
-	                {
-	                	str = str.concat(each.parentElement.id)
-	                }
-	                else 
-	                {
-	                	str = str.concat(","+each.parentElement.id)
-	                }
-	                
-	                i= i+1
-	            })
-
-           		$.ajax({
-		            url: "{% url 'delete_themes' groupid %}",
-		            type: 'POST',
-		            data:{
-		            	context_theme: "{{node.pk}}",
-		            	deleteobjects: str,
-		            	csrfmiddlewaretoken: '{{ csrf_token }}'
-		            },
-             		success: function(result){
-
-             			$("#deletion_results").html("");
-                        for(var obj in result)
-                        {
-	                  		var li = $("<ul><li><b>"+result[obj].title+"</b></li></ul>").appendTo($("#deletion_results"));
-                        }
-
-             		},
-             	});
-
-           	}
-           	else
-           	{
-        		alert("select object to delete")
-        	}
-
-	    });
-
-		// Script for delete themes after confirm delete.
-		$(document).on('click',".button.confirmDeleteObjects",function(){
-	        var selectedobject = $(".objectsCheckbox input:checked")
-
-	        if(selectedobject.length > 0)
-	        {
-	            var i = 0;
-	            var str = "";  
-
-	            $.map(selectedobject,function(each){
-	            	if(i == 0)
-	            	{
-	            		str = str.concat(each.parentElement.id)
-	            	}
-	                else 
-	                {
-	                	str = str.concat(","+each.parentElement.id)
-	                }
+	    $(".collapsible_tree").click(function() {
+			location.href = "{% url 'theme_page' group_name_tag app_id %}?tree=collapsible";
 
-	                i= i+1
-	            });
+			// $(".themes").addClass("hide");
 
-	            $.ajax({
-	            	url: "{% url 'delete_themes' groupid %}",
-	             	type: 'POST',
-	             	data:{
-		            	context_theme: "{{node.pk}}",
-	             		deleteobjects: str,
-	             		confirm:"yes",
-	             		csrfmiddlewaretoken: '{{ csrf_token }}'
-	             	},
-	             	success: function(result){
-	             		alert("Themes deleted successfully");
-	             		$('#myModal').foundation('reveal', 'close');
-	             		location.reload(true);
-	             	},
-	             	
-	            });
-	             
-	        }
-	        else{
-	        alert("select object to delete")
-	        }
+   //  		{% if node %}
 
-		});
+			//     $.getJSON("{% url 'get_tree_hierarchy' group_id node.pk %}?collapsible=true", function(data){ treeData = data;})
+			//     .done(function(){plotDragZoomTree(treeData)});
 
-		// Script for selecting all objects 
-		$(document).on('click',".checkedAll",function(){
-			if($(this).is(":checked")==true)
-			{
-				$('.objectsCheckbox input').prop( "checked", true );
-			}
-			else
-			{
-				$('.objectsCheckbox input').prop( "checked", false );
-			}
+		 //    {% endif %}
+
+			// $("#theme-drag-zoom-tree").removeClass("hide")
 		});
 
-		// Script for cancel option for deleting themes
-		$(document).on('click',".button.cancelDeleteObjects",function(){
-             $('#myModal').foundation('reveal', 'close');
+		// 	$("#theme-drag-zoom-container").removeClass("hide");
+
+		// 	// calling function plotDragZoomTree defined in theme_drag_zoom_d3tree.html 
+		// 	}	
+
+
+		$("#add_theme_item").click(function() {
+		    $.ajax({
+	        type: "POST",
+	        url: "{% url 'add_theme_item' groupid %}",
+	        datatype: "html",
+	        data:{
+	          context_theme: "{{node.pk}}",
+	          name: $(".name_id").val(),
+	          csrfmiddlewaretoken: '{{ csrf_token }}'
+	        },
+	        success: function(data) {
+
+	          var item = $(".name_id").val();
+
+	          if ($.trim(data) === "failure") {
+	            alert("Theme item "+ item +" already available, Please choose different name");
+	          }
+
+	          if ($.trim(data) === "success") {
+	            location.reload(true);
+	          }
+
+	          $(".name_id").val("");
+	        }
+	      });
+
 		});
+
 // ------END of jqtree tree ------
 
 // --- start of D3 collapsible tree ---
 
-	    treeData = ""
+	 //    treeData = ""
 
-	    $(".collapsible_tree").click(function() {
-
-	    	if(treeData.length != 0)
-	    	{
-				plotCollapsibleTree(treeData)	    			
-	    	}
-	    	else{
-	    		{% if node %}
-			    $.getJSON("{% url 'get_tree_hierarchy' group_id node.pk %}?collapsible=true", function(data){ treeData = data;})
-			    .done(function(){plotCollapsibleTree(treeData)});
-			    {% endif %}
-	    	}
-		});
-		
-		function plotCollapsibleTree (treeData) {
-			$(".themes").html("");
+	 //    $(".collapsible_tree").click(function() {
 
-			var margin = {top: 20, right: 40, bottom: 20, left: 40},
-			    width = Math.max($(".themes").width(), 960) - margin.right - margin.left,
-			    height = Math.max($(".themes").height(), 800) - margin.top - margin.bottom;
-			    
-			var i = 0,
-			    duration = 750,
-			    root;
-
-			var tree = d3.layout.tree()
-			    .size([height, width]);
-
-			var diagonal = d3.svg.diagonal()
-			    .projection(function(d) { return [d.y, d.x]; });
-
-			var svg = d3.select(".themes").append("svg")
-			    .attr("width", width + margin.right + margin.left)
-			    .attr("height", height + margin.top + margin.bottom)
-			  	.append("g")
-			    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
-			{% if node %}
-				// d3.json("{% url 'get_tree_hierarchy' group_id node.pk %}?collapsible=true", function(error, flare) {
-				  root = treeData;
-				  root.x0 = height / 2; // the point from where it starts it's animation.
-				  root.y0 = 0;
-
-				  function collapse(d) {
-				    if (d.children) {
-				      d._children = d.children;
-				      d._children.forEach(collapse);
-				      d.children = null;
-				    }
-				  }
-
-				  root.children.forEach(collapse);
-				  update(root);
-				// });
-			{% endif %}
-
-			// d3.select(self.frameElement).style("height", "800px");
-
-			function update(source) {
-
-			  // Compute the new tree layout.
-			  var nodes = tree.nodes(root).reverse(),
-			      links = tree.links(nodes);
-
-			  // Normalize for fixed-depth.
-			  nodes.forEach(function(d) { d.y = d.depth * 150;});
-
-			  // Update the nodes
-			  var node = svg.selectAll("g.node")
-			      .data(nodes, function(d) { return d.id || (d.id = ++i); });
-
-			  // Enter any new nodes at the parent's previous position.
-			  var nodeEnter = node.enter().append("g")
-			      .attr("class", "node")
-			      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
-			      .attr("title", function(d) { return d.name; })
-			      .on("click", click);
-
-			  nodeEnter.append("circle")
-			      .attr("r", 1e-6)
-			      .style("fill", function(d) { return d._children ? "#10c1cb" : "#fff"; });
-
-			  nodeEnter.append("text")
-			      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
-			      .attr("dy", "0.35em")
-			      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
-			      .text(function(d) { return d.name; })
-			      .style("fill-opacity", 1e-6);
-
-			  // Transition nodes to their new position.
-			  var nodeUpdate = node.transition()
-			      .duration(duration)
-			      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
-
-			  nodeUpdate.select("circle")
-			      .attr("r", 6.5)
-			      .style("fill", function(d) { return d._children ? "#10c1cb" : "#fff"; });
-
-			  nodeUpdate.select("text")
-			      .style("fill-opacity", 1);
-
-			  // Transition exiting nodes to the parent's new position.
-			  var nodeExit = node.exit().transition()
-			      .duration(duration)
-			      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
-			      .remove();
-
-			  nodeExit.select("circle")
-			      .attr("r", 1e-6);
-
-			  nodeExit.select("text")
-			      .style("fill-opacity", 1e-6);
-
-			  // Update the links
-			  var link = svg.selectAll("path.link")
-			      .data(links, function(d) { return d.target.id; });
-
-			  // Enter any new links at the parent's previous position.
-			  link.enter().insert("path", "g")
-			      .attr("class", "link")
-			      .attr("d", function(d) {
-			        var o = {x: source.x0, y: source.y0};
-			        return diagonal({source: o, target: o});
-			      });
-
-			  // Transition links to their new position.
-			  link.transition()
-			      .duration(duration)
-			      .attr("d", diagonal);
-
-			  // Transition exiting nodes to the parent's new position.
-			  link.exit().transition()
-			      .duration(duration)
-			      .attr("d", function(d) {
-			        var o = {x: source.x, y: source.y};
-			        return diagonal({source: o, target: o});
-			      })
-			      .remove();
-
-			  // Stash the old positions for transition.
-			  nodes.forEach(function(d) {
-			    d.x0 = d.x;
-			    d.y0 = d.y;
-			  });
-			}
+	 //    	if(treeData.length != 0)
+	 //    	{
+		// 		plotCollapsibleTree(treeData)	    			
+	 //    	}
+	 //    	else{
+	 //    		{% if node %}
 
-			// Toggle children on click.
-			function click(d) {
-			  if (d.children) {
-			    d._children = d.children;
-			    d.children = null;
-			        // console.log("non-leaf 1");
-			  } 
-			  else {
-			    if(d._children){
-			        d.children = d._children;
-			        d._children = null;
-			        // console.log("non-leaf 2");
-				}
-				else if (d.node_type == "Topic"){
-			        // console.log("Leaf!");
-			        var a = document.createElement('a');
-					a.setAttribute('href', "/{{group_name_tag}}/topic_details/"+d.id+"");
-					// a.setAttribute('target', '_blank');
-					document.body.appendChild(a);
-					a.click();
-					a.remove();
-			        // location.href = "/{{group_name_tag}}/topic_details/"+d.id+"";
-					// $('#collaps_topic_details').foundation('reveal', 'open');     
-			    }
-			  }
-			  update(d);
-			}
+		// 		    $.getJSON("{% url 'get_tree_hierarchy' group_id node.pk %}?collapsible=true", function(data){ treeData = data;})
+		// 		    .done(function(){plotCollapsibleTree(treeData)});
 
-			$("#theme-drag-zoom-container").removeClass("hide");
+		// 	    {% endif %}
+	 //    	}
+		// });
+		
+		// function plotCollapsibleTree (treeData) {
+		// 	$(".themes").html("");
 
-			// calling function plotDragZoomTree defined in theme_drag_zoom_d3tree.html 
-			plotDragZoomTree(treeData);
-			}	
+		// 	var margin = {top: 20, right: 40, bottom: 20, left: 40},
+		// 	    width = Math.max($(".themes").width(), 960) - margin.right - margin.left,
+		// 	    height = Math.max($(".themes").height(), 800) - margin.top - margin.bottom;
+			    
+		// 	var i = 0,
+		// 	    duration = 750,
+		// 	    root;
+
+		// 	var tree = d3.layout.tree()
+		// 	    .size([height, width]);
+
+		// 	var diagonal = d3.svg.diagonal()
+		// 	    .projection(function(d) { return [d.y, d.x]; });
+
+		// 	var svg = d3.select(".themes").append("svg")
+		// 	    .attr("width", width + margin.right + margin.left)
+		// 	    .attr("height", height + margin.top + margin.bottom)
+		// 	  	.append("g")
+		// 	    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+		// 	{% if node %}
+
+		// 		  root = treeData;
+		// 		  root.x0 = height / 2; // the point from where it starts it's animation.
+		// 		  root.y0 = 0;
+
+		// 		  function collapse(d) {
+		// 		    if (d.children) {
+		// 		      d._children = d.children;
+		// 		      d._children.forEach(collapse);
+		// 		      d.children = null;
+		// 		    }
+		// 		  }
+
+		// 		  root.children.forEach(collapse);
+		// 		  update(root);
+		// 		// });
+		// 	{% endif %}
+
+		// 	// d3.select(self.frameElement).style("height", "800px");
+
+		// 	function update(source) {
+
+		// 	  // Compute the new tree layout.
+		// 	  var nodes = tree.nodes(root).reverse(),
+		// 	      links = tree.links(nodes);
+
+		// 	  // Normalize for fixed-depth.
+		// 	  nodes.forEach(function(d) { d.y = d.depth * 150;});
+
+		// 	  // Update the nodes
+		// 	  var node = svg.selectAll("g.node")
+		// 	      .data(nodes, function(d) { return d.id || (d.id = ++i); });
+
+		// 	  // Enter any new nodes at the parent's previous position.
+		// 	  var nodeEnter = node.enter().append("g")
+		// 	      .attr("class", "node")
+		// 	      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
+		// 	      .attr("title", function(d) { return d.name; })
+		// 	      .on("click", click);
+
+		// 	  nodeEnter.append("circle")
+		// 	      .attr("r", 1e-6)
+		// 	      .style("fill", function(d) { return d._children ? "#10c1cb" : "#fff"; });
+
+		// 	  nodeEnter.append("text")
+		// 	      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
+		// 	      .attr("dy", "0.35em")
+		// 	      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
+		// 	      .text(function(d) { return d.name; })
+		// 	      .style("fill-opacity", 1e-6);
+
+		// 	  // Transition nodes to their new position.
+		// 	  var nodeUpdate = node.transition()
+		// 	      .duration(duration)
+		// 	      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
+
+		// 	  nodeUpdate.select("circle")
+		// 	      .attr("r", 6.5)
+		// 	      .style("fill", function(d) { return d._children ? "#10c1cb" : "#fff"; });
+
+		// 	  nodeUpdate.select("text")
+		// 	      .style("fill-opacity", 1);
+
+		// 	  // Transition exiting nodes to the parent's new position.
+		// 	  var nodeExit = node.exit().transition()
+		// 	      .duration(duration)
+		// 	      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
+		// 	      .remove();
+
+		// 	  nodeExit.select("circle")
+		// 	      .attr("r", 1e-6);
+
+		// 	  nodeExit.select("text")
+		// 	      .style("fill-opacity", 1e-6);
+
+		// 	  // Update the links
+		// 	  var link = svg.selectAll("path.link")
+		// 	      .data(links, function(d) { return d.target.id; });
+
+		// 	  // Enter any new links at the parent's previous position.
+		// 	  link.enter().insert("path", "g")
+		// 	      .attr("class", "link")
+		// 	      .attr("d", function(d) {
+		// 	        var o = {x: source.x0, y: source.y0};
+		// 	        return diagonal({source: o, target: o});
+		// 	      });
+
+		// 	  // Transition links to their new position.
+		// 	  link.transition()
+		// 	      .duration(duration)
+		// 	      .attr("d", diagonal);
+
+		// 	  // Transition exiting nodes to the parent's new position.
+		// 	  link.exit().transition()
+		// 	      .duration(duration)
+		// 	      .attr("d", function(d) {
+		// 	        var o = {x: source.x, y: source.y};
+		// 	        return diagonal({source: o, target: o});
+		// 	      })
+		// 	      .remove();
+
+		// 	  // Stash the old positions for transition.
+		// 	  nodes.forEach(function(d) {
+		// 	    d.x0 = d.x;
+		// 	    d.y0 = d.y;
+		// 	  });
+		// 	}
+
+		// 	// Toggle children on click.
+		// 	function click(d) {
+		// 	  if (d.children) {
+		// 	    d._children = d.children;
+		// 	    d.children = null;
+		// 	        // console.log("non-leaf 1");
+		// 	  } 
+		// 	  else {
+		// 	    if(d._children){
+		// 	        d.children = d._children;
+		// 	        d._children = null;
+		// 	        // console.log("non-leaf 2");
+		// 		}
+		// 		else if (d.node_type == "Topic"){
+		// 	        // console.log("Leaf!");
+		// 	        var a = document.createElement('a');
+		// 			a.setAttribute('href', "/{{group_name_tag}}/topic_details/"+d.id+"");
+		// 			// a.setAttribute('target', '_blank');
+		// 			document.body.appendChild(a);
+		// 			a.click();
+		// 			a.remove();
+		// 	        // location.href = "/{{group_name_tag}}/topic_details/"+d.id+"";
+		// 			// $('#collaps_topic_details').foundation('reveal', 'open');     
+		// 	    }
+		// 	  }
+		// 	  update(d);
+		// 	}
+
+		// 	$("#theme-drag-zoom-container").removeClass("hide");
+
+		// 	// calling function plotDragZoomTree defined in theme_drag_zoom_d3tree.html 
+		// 	plotDragZoomTree(treeData);
+		// 	}	
 
 // ---END of D3 collapsible tree