Enabling click redirection to topic detail view for drag-zoom-collapsible-tree

1 files changed, 126 insertions, 26 deletions

diff --git a/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme_drag_zoom_d3tree.html b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme_drag_zoom_d3tree.html
index 847bb78..a62f331 100644
--- a/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme_drag_zoom_d3tree.html
+++ b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme_drag_zoom_d3tree.html
@@ -1,23 +1,8 @@
-<div id="theme-drag-zoom-container" class="hide">
-        
-    <a href="#" data-reveal-id="theme-drag-zoom-tree">Show graph with zoom and drag functionality</a>
-
-    <div id="theme-drag-zoom-tree" class="reveal-modal xlarge" data-reveal>
-        <a class="close-reveal-modal">&#215;</a>
-    </div>
-
-</div>
-
 <script type="text/javascript">
-    
-    // treeData = ""
-    // $.getJSON("{% url 'get_tree_hierarchy' group_id node.pk %}?collapsible=true", function(data){ treeData = data;});
-
-    // d3.json("{% url 'get_tree_hierarchy' group_id node.pk %}?collapsible=true", function(error, treeData) {
         
     function plotDragZoomTree(treeData) {
 
-    $("#theme-drag-zoom-tree").html("");
+    // $("#theme-drag-zoom-tree").html("");
 
     // Calculate total nodes, max label length
     var totalNodes = 0;
@@ -38,7 +23,7 @@
 
     // size of the diagram
     var viewerHeight = $(window).height() * 0.80;
-    var viewerWidth = $(document).width() * 0.90;
+    var viewerWidth = $(document).width() * 0.80;
 
  
     var tree = d3.layout.tree()
@@ -277,6 +262,25 @@
             d._children = null;
         }
     }
+
+    function getHierarchyIds(d) {
+        hierarchyIdsArr = [d.id];
+
+        while(d.parent)
+        {
+            hierarchyIdsArr.push(d.parent.id);
+            d = d.parent;
+        }
+        // currently treeData doesn't hold top-theme _id, 
+        // so by default it's 1 in that place. Replace 1 with top theme's _id: 
+        hierarchyIdsArr.pop(hierarchyIdsArr.indexOf(1));
+        // hierarchyIdsArr.push("{{node.pk}}");
+
+        hierarchyIdsArr.reverse();
+        // console.log(hierarchyIdsArr)
+
+        return hierarchyIdsArr
+    }
  
     var overCircle = function(d) {
         selectedNode = d;
@@ -322,7 +326,7 @@
         scale = zoomListener.scale();
         x = -source.y0;
         y = -source.x0;
-        x = x * scale + viewerWidth / 2;
+        x = x * scale + viewerWidth / 4;
         y = y * scale + viewerHeight / 2;
         d3.select('#theme-drag-zoom-tree g').transition()
             .duration(duration)
@@ -344,13 +348,47 @@
     }
  
     // Toggle children on click.
- 
-    function click(d) {
-        if (d3.event.defaultPrevented) return; // click suppressed
-        d = toggleChildren(d);
-        update(d);
-        centerNode(d);
-    }
+    
+            // 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!");
+
+                    hierarchyIdsArr = getHierarchyIds(d);
+
+                    // alert("dddddd");
+                    // 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 + 
+                                    "?nav_li=" + hierarchyIdsArr.toString() + "";
+                    // location.href = "/{{group_name_tag}}/topic_details/"+d.id+"";
+                    // $('#collaps_topic_details').foundation('reveal', 'open');     
+                }
+              }
+              update(d);
+            }
+
+    // function click(d) {
+    //     if (d3.event.defaultPrevented) return; // click suppressed
+    //     d = toggleChildren(d);
+    //     update(d);
+    //     centerNode(d);
+    // }
  
     function update(source) {
         // Compute the new height, function counts total children of root node and sets tree height accordingly.
@@ -397,8 +435,9 @@
             .attr("transform", function(d) {
                 return "translate(" + source.y0 + "," + source.x0 + ")";
             })
+            .attr("data-coll-node-id", function(d) {return d.id || (d.id = ++i); })
             .on('click', click);
- 
+
         nodeEnter.append("circle")
             .attr('class', 'nodeCircle')
             .attr("r", 0)
@@ -530,12 +569,73 @@
  
     // Define the root
     root = treeData;
+    aaa = root;
     root.x0 = viewerHeight / 2;
     root.y0 = 0;
  
     // Layout the tree initially and center on the root node.
+    // getData(root);
     root.children.forEach(collapse);
     update(root);
     centerNode(root);
+
+    // recursive function needed to get data for {{selected}} node
+    // result = ""
+    // function getData (d) {
+
+    //     console.log("{{selected}} : " + d.name + " : " + d.id);
+    //     if(d.id == "{{selected}}")
+    //     {
+    //         console.log("======================================================");
+    //         result = d
+    //     }
+        
+    //     if(d.children)
+    //     {
+    //         console.log(d.children)
+    //         d.children.forEach(function(i){
+    //             res = getData(i);
+    //             if (res)
+    //             {
+    //                 return res
+    //             }
+    //         })
+    //     }
+    //     else if(d._children)
+    //     {
+    //         console.log(d._children)
+    //         d._children.forEach(function(i){
+    //             res = getData(i);
+    //             if (res)
+    //             {
+    //                 return res
+    //             }
+    //         })
+    //     }
+    // }
+    // console.log(getData(root))
 }
+// alert("{{selected}}");
+//called with every property and it's value
+    
+
+    // selected = document.querySelector('[data-coll-node-id="{{selected}}"]');
+    // selectedNodeData = d3.select(selected).data();
+    // d = selectedNodeData[0];
+    // hierarchyIdsArr = getHierarchyIds(d);
+    // console.log(hierarchyIdsArr);
+
+    // while(d && d.parent)
+    // {
+    //     console.log("11")
+    //     click(d)
+    //     d = d.parent;
+    // }
+    // function expandHierarchy(d) {
+    //     console.log(d)
+
+    // }
+
+    // expandHierarchy(selectedNodeData[0]); 
+
 </script>