1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
|
{% load ndf_tags %}
{% load i18n %}
{% block head %}
<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
TreeTillNode();
});
function TreeTillNode () {
// This gives the last hierarchy node id from browser url.
var url = window.location.search.replace("?selected=", "")
// Condition to check whether the tree has been loaded on the page completely or not before attempting any function on tree(such as 'getNodeById')
if (url && $(".collection").not(".jqtree-loading").length > 0){
var tree_build = $(".collection").not(".jqtree-loading");
var node = tree_build.tree('getNodeById', url);
tree_build.tree('selectNode', node);
return;
}
// Javascript function to be used for checking objects in specific time of interval
setTimeout(function(){
// console.log($(".collection"))
if(url && ($(".collection").length > 0)) { TreeTillNode() }
}, 100 );
}
function doc(){
var $tree = $('.collection');
var arr = [];
{% get_node_type node as node_type %}
var node_type = "{{node_type}}";
$tree.tree({
selectable: true,
});
// This "tree.open" event helps to open the particular node from browser url
$tree.bind(
'tree.open',
function(e) {
var node = e.node;
var node_id = node.id;
if (arr.indexOf(node_id) < 0){
arr.push(node_id);
}
}
);
// This "tree.select" event helps to click the particular tree node and also triggers the click event on tree node
$tree.bind(
'tree.select',
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);
// alert(node_type);
$.ajax({
type: "POST",
url: "{% url 'collection_nav' group_id %}",
datatype: "html",
data:{
node_id: node.id,
curr_node:"{{node.pk}}",
nav: nav_list,
nod_type: node_type,
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success: function(data) {
if (node_type == "Page"){
window.history.pushState("", "", "/{{group_name_tag}}/page/{{node.pk}}"+"?selected="+node.id+"");
}
else if(node_type == "File"){
window.history.pushState("", "", "/{{group_name_tag}}/file/{{node.pk}}"+"?selected="+node.id+"");
}
else if (node_type == "Term"){
window.history.pushState("", "", "/{{group_name_tag}}/term/{{node.pk}}"+"?selected="+node.id+"");
}
else if (node_type == "Group"){
window.history.pushState("", "", "/{{node.pk}}"+"?selected="+node.id+"");
}
else if (node_type == "Topic"){
window.history.pushState("", "", "/{{group_name_tag}}/topic_details/{{node.pk}}"+"?selected="+node.id+"");
}
$("#view_page").html(data);
}
});
}
);
}
// This function takes id of clicked "related" node and redirect to its page with its proper breadcrumbs
// nav_li manipulates the navigation path of that topic in theme map
function topic_redirect (obj_id) {
var nav_list = window.location.search.replace("?nav_li=", ""); // This takes "nav_li" from browser url
var nav_li = nav_list.replace('{{node.pk}}', obj_id); // This replaces the last node id with clicked "related" node id
location.href = "/{{group_name_tag}}/topic_details/"+obj_id+"?nav_li="+nav_li+"";
}
</script>
<style type="text/css">
.collection {
border: solid thin #ddd;
margin-bottom: 1em;
overflow: auto;
}
.collection > ul li:nth-child(odd) { background: #ddd; }
</style>
{% endblock %}
{% if topic %}
<!-- For displaying related nodes in topic page -->
<!-- Related node means all collection elements of its teme item i.e all siblings of topic node -->
<fieldset>
<legend>Related Topics</legend>
{% if prior_obj %}
{% for each in prior_obj.collection_set %}
<!-- To get the node object -->
{% get_node each as obj %}
<!-- Clicked topic should not be included in related nodes list -->
{% if node.pk != obj.pk %}
<i class="fi-arrow-right"></i> <a onclick='topic_redirect("{{obj.pk}}")'>{{obj.name}}</a><br/>
{% endif %}
{% endfor %}
{% endif %}
</fieldset>
{% endif %}
<b class="current">{{node.name}}</b>
<div>
<div class="collection" data-url="{% url 'get_collection' group_id node.pk %}"></div>
</div>
|