diff options
Diffstat (limited to 'gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme.html')
-rw-r--r-- | gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme.html | 1126 |
1 files changed, 406 insertions, 720 deletions
diff --git a/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme.html b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme.html index 280f231c..33ac64be 100644 --- a/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme.html +++ b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme.html @@ -7,361 +7,80 @@ {% 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"> - - <!-- 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> <!-- checked --> - - <script type="text/javascript"> - - $(document).ready(function() { - - - // 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 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); - - // Javascript function to be used for checking objects in specific time of interval - setTimeout(function(){ - // console.log($(".themes")) - if( ($(".themes").length > 0) ) { TreeTillNode() } - }, 100 ); - - } - - - function doc() { - - var $tree = $('.themes'); - var user = "{{user.is_authenticated}}"; - var unfold = "{{unfold}}"; - - if(unfold == "true"){ - unfold = true - } - else{ - unfold = false - } - - $tree.tree({ - autoOpen: unfold, + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - onCreateLi: function(node, $li) { - - if (node.node_type == "Topic"){ - $li.find('.jqtree-title').before('  <span class="fi-page"></span> '); - } - else{ - $li.find('.jqtree-title').before('  <span class="fi-folder" style="color:orange"></span> '); - } - - - if (node.node_type == "Topic"){ - - $li.find('.jqtree-element').append( - - ' <a id='+node.id+' name='+node.name+' class="topic" href="/{{groupid}}/topics/'+node.id+'/"> </a>' - - ); - - } - else{ - if (user == "True"){ - - $li.find('.jqtree-element').append( - {% user_access_policy groupid request.user as user_access %} - {% if user_access == "allow" %} - - ' <a href="/{{groupid}}/topics/'+node.id+'/"> <i class="fi-pencil edit"></i></a> <a id='+node.id+' class="objectsCheckbox"> <input type="checkbox"> </a>' - - {% endif %} - ); - } - - } - - - } - - }); - - // bind 'tree.click' event - $tree.bind( - 'tree.click', - function(event) { - // The clicked node is 'event.node' - var node = event.node; - - var parent_arr = []; - var parent_node = node; - parent_arr.push(node.id); - - // Bellow code manipulates the parent hierarchy of clicked node in a tree - while (parent_node) { - if (parent_node.name !== undefined){ - $tree.tree('openNode', parent_node); - parent_node = parent_node.parent; - if (parent_node.name !== undefined){ - parent_arr.push(parent_node.id); - } - } - else{ - break; - } - } - var nav_list = parent_arr.reverse(); - // alert(nav_list); - - // If its topic node i.e no children of this node then show the detail view for topic - if( node.children[0] == null ){ - - if (node.node_type == "Topic"){ - location.href = "/{{group_name_tag}}/topic_details/"+node.id+"?nav_li="+nav_list+""; - - } - - } - - } - ); - - $tree.bind( - 'tree.contextmenu', - function(event) { - // The clicked node is 'event.node' - var node = event.node; - {% user_access_policy groupid request.user as user_access %} - {% if user_access == "allow" %} - var msg = confirm("Do you want to delete this topic ?"); - if (msg == true) { - - $.ajax({ - url: "{% url 'delete_themes' groupid %}", - type: 'POST', - data:{ - deleteobj: node.id, - csrfmiddlewaretoken: '{{ csrf_token }}' - }, - success: function(result){ - alert("Topic "+node.name+" deleted successfully"); - location.reload(true); - }, - - }); - - } - {% endif %} - - } - ); - - - }; - - - // method to handle hover on topics - function showTopicStats(){ - // Javascript function to be used for checking objects in specific time of interval - setTimeout(function(){ - // On hover of topic node manipulate resources only once - - $(".jqtree-title.jqtree_common").hover( function(){ - - topic_id = $(this).siblings("a").attr("id"); - // var topic_name = $(this).siblings("a").attr("name"); - var data_info = $(this).attr("data-info"); - var hover_context = this; - if ( ! data_info && topic_id ){ - $(".topic_stats").css("display", "none"); - - $.ajax({ - url: "{% url 'get_topic_contents' groupid %}", - type: 'POST', - data:{ - node_id: topic_id, - csrfmiddlewaretoken: '{{ csrf_token }}' - }, - success: function(data){ - - count = display_top_res(data) - - if (data != "{}"){ - - $(".topic_stats").html(count); - $(hover_context).attr("data-info", data) - - $(".topic_stats").css("display", "block"); - - } - else{ - $(hover_context).attr("data-info", data); - } - - }, - - }); - - - } - else{ - - if (topic_id){ - var data = $(this).attr("data-info"); - count = display_top_res(data) - $(".topic_stats").html(count); - $(".topic_stats").css("display", "block"); - } - - } - - - }); - - // console.log($(".jqtree-element.jqtree_common")) - if( ($(".jqtree-title.jqtree_common").length <= 0) ) { - showTopicStats() - } + <!-- 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> - }, 1000 ); - } - - - function display_top_res(data){ - data_obj = JSON.parse(data); - count = "" - - if (data != "{}"){ - var k = Object.keys(data_obj); // To get the keys from incomming data - - for (var m = 0; m < k.length; m++) { - var key = k[m]; - var len = data_obj[key].length; // length of list as a value of key - // alert(key+": "+len); - count += key+": "+len+"<br/>"; - } - - } - else{ - count += "No Resources !<br/>"; - } - - return count - - } - - showTopicStats(); - - </script> + <link href="/static/ndf/bower_components/jqtree/jqtree.css" rel="stylesheet"> + <script src="/static/ndf/bower_components/jqtree/tree.jquery.js"></script> <style> - #app-set-item li { padding:0.5em } - - .jqtree-closed > .jqtree-element i.icon-folder-open:before { - content: "\f07b"; - } - .jqtree-tree i { - margin-right: 4px; - } - /* for reingold tilford tree */ -/* - .node { - cursor: pointer; - } - - .node circle { - fill: #fff; - stroke: green; - stroke-width: 1.5px; - } - - .node text { - font: 12px sans-serif; - } - - .link { - fill: none; - stroke: #ccc; - stroke-width: 1.5px; - } - */ - /* for reingold tilford tree -- end */ - - .node { - cursor: pointer; + #theme-drag-zoom-tree-container{ + border: medium dashed #D8BFD8; + border-radius: 5px; } - .node circle { - fill: #fff; - stroke: steelblue; - stroke-width: 1.5px; - } - - .node text { - font-size:10px; - font-family:sans-serif; + .download-graph{ + color: gray } - - .link { - fill: none; - stroke: #ccc; - stroke-width: 1.5px; + + .download-graph:hover { + color: black; + background-color: #e5e5e5; + font-size: large; + cursor: pointer; + padding: 0.5em; + transition: all 1s; } -/* .templink { - fill: none; - stroke: red; - stroke-width: 3px; + .themes { + margin: 2rem 5rem; } -*/ - .ghostCircle.show{ - display:block; + + .highlight { + background-color: #efefef; + padding: 0 1em; + border: solid #e5e5e5; } - .ghostCircle, .activeDrag .ghostCircle{ - display: none; + #hover1.f-dropdown { + width: 10em; } </style> {% 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> + <a class="Tp" href="{% url 'topics' group_name_tag %}" title="Click to go to themes card view"> + <h3 class="subheader"> + {% if theme_GST.altnames and theme_GST.altnames != "None" %} + {{theme_GST.altnames}} + {% else %} + {{theme_GST.name}} + {% endif%} + </h3> + </a> + {{theme_GST.content|default_if_none:""|safe}} {% endblock %} {% block related_content %} @@ -371,88 +90,60 @@ <div class="panel" style="background-color:#ddd;"> <ul class="no-bullet" id="app-set-item"> - {% get_memberof_objects_count theme_GST_id groupid as count %} - + {% get_memberof_objects_count theme_GST.pk groupid as count %} + <li class="selected-app-set-item"> <div> {% if user_access == "allow" %} - <a href="{% url "theme_topic_create" groupid theme_GST_id %}" style="float:right;color:#0b8a91;" title="Add Theme"> + <a href="{% url "theme_topic_create" groupid theme_GST.pk %}" style="float:right;color:#0b8a91;" title="Add Theme"> + Add </a> {% endif %} - <a href="{% url "theme_list" groupid app_id theme_GST_id %}" style="color:#0b8a91;"> + <a href="{% url "theme_list" groupid app_id theme_GST.pk %}" style="color:#0b8a91;"> Theme ({{count}}) </a> </div> </li> - </ul> + </ul> </div> {% endif %} + <br/> + <div> + {% if user_access == "allow" %} - <div class="topic_stats panel" style="display:none; position:fixed; background-color:#ddd;border: 1px solid #1a1a1a;"> </div> -{% endblock %} + <a class="button tiny expand" data-reveal-id="view_add_page" title="Add Theme Item"> + + Add Theme Item + </a> + <div id="view_add_page" class="reveal-modal" data-reveal style="height:300px;"> -{% 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" >×</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"> - + 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/> + <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"/> + <input type="submit" id="add_theme_item" value="Save Theme Item" class="medium round button"/> - <a class="close-reveal-modal">×</a> + <a class="close-reveal-modal">×</a> - </div> - {% endif %} - </div> + </div> - <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> - <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> - - </div> - - <div class="large-4 columns"> + {% endif %} + + </div> + <!-- <br/> --> + <div> {% if user.is_authenticated %} {% if user_access == "allow" %} + <span><input class="checkedAll" type="checkbox"> Select All</span> <input class="button tiny deleteObjects right" type="button" value="Delete"> - <span class="right"><input class="checkedAll" type="checkbox"> Select All </span> <div id="myModal" class="reveal-modal" data-reveal style="height:500px;overflow:scroll;"> @@ -467,21 +158,58 @@ {% endif %} {% endif %} - </div> - </div> - <hr/> + </div> + + <div class="topic_stats panel" style="display:none; position:fixed; background-color:#ddd;border: 1px solid #1a1a1a;"> </div> - {% 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> +{% endblock %} - <!-- testing --> - {% include 'ndf/theme_drag_zoom_d3tree.html' %} - {% endcache %} + +{% block body_content %} + + {% user_access_policy groupid request.user as user_access %} + + {% if themes_hierarchy and node %} + + <div style="float:left; font-size: 2em; line-height: 0.8;"> {{node.name}}</div> + + <div style="float:right; margin:0 2em;"> + + <a class="collapsible_tree {% if tree == 'collapsible' or not tree %} highlight {% endif %}" style=""> + {% trans "Collapsible Tree" %} + </a> - {% endif %} + <a data-dropdown="hover1" data-options="is_hover:true; hover_timeout:5000" class="tree_browser {% if tree == 'hierarchical' %} highlight {% endif %}" style="margin-left:2em;"> + {% trans "Tree Browser" %} + </a> + + <ul id="hover1" class="f-dropdown" data-dropdown-content style="width: 7em;"> + <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> + + </div> + + <br/> + <br/> + {% cache 300 theme_tree node.pk request.LANGUAGE_CODE tree unfold %} + + {% include "ndf/hierarchy_tree.html" %} + <div id="app-set-item" class="themes hide" data-url="{% url 'get_tree_hierarchy' groupid node.pk %}"> + </div> + + <div id="theme-drag-zoom-tree-container" class="hide"> + <div id="theme-drag-zoom-tree"></div> + <div class="row"> + <div class="small-6 small-centered text-center columns download-graph" onclick='downloadCollapsibleGraph("{{node.name}}");'> + Download "{{node.name}}" Collapsible Graph + </div> + </div> + </div> + {% include 'ndf/theme_drag_zoom_d3tree.html' %} + {% endcache %} + {% endif %} <!-- For displaying themes items --> @@ -654,358 +382,316 @@ <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")); - }); + // being the common template for all, to distinguish between the tree landing using following condition: + {% if node and tree %} + + {% if tree == "hierarchical" %} + if({{unfold}}) + { + $("article").block({message: '<h4>Building a graph... <br/>Please hold on...</h4>'}); + $("#theme-drag-zoom-tree-container").addClass("hide") + $(".themes").removeClass("hide"); + plotHierarchyTree(true); + } + else + { + $("article").block({message: '<h4>Building a graph... <br/>Please hold on...</h4>'}); + $("#theme-drag-zoom-tree-container").addClass("hide") + $(".themes").removeClass("hide"); + plotHierarchyTree(false); + } + + {% else %} + + $(".themes").addClass("hide"); + + {% if node %} + + $("article").block({message: '<h4>Building a graph... <br/>Please hold on...</h4>'}); + $.getJSON("{% url 'get_tree_hierarchy' group_id node.pk %}?collapsible=true", function(data){ treeData = data;}) + .done(function(){plotDragZoomTree(treeData); + }); + + {% endif %} + + $("#theme-drag-zoom-tree-container").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-container").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-container").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-container").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) - } - - i= i+1 - }); - - $.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") - } + $(".collapsible_tree").click(function() { + location.href = "{% url 'theme_page' group_name_tag app_id %}?tree=collapsible"; - }); + // $(".themes").addClass("hide"); - // 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 ); - } + // {% 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-container").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() { + // $(".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 %} - } - }); + // 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(""); + // function plotCollapsibleTree (treeData) { + // $(".themes").html(""); - 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 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; - }); - } - - // 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); - } + // 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 |