Newer
Older
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
/**
* @file
* Hierarchy Manager jsTree JavaScript file.
*/
// Codes run both on normal page loads and when data is loaded by AJAX (or BigPipe!)
// @See https://www.drupal.org/docs/8/api/javascript-api/javascript-api-overview
(function($, Drupal) {
Drupal.behaviors.hmJSTree = {
attach: function(context, settings) {
$(".hm-jstree", context)
.once("jstreeBehavior")
.each(function() {
const treeContainer = $(this);
const parentID = treeContainer.attr('parent-id');
const searchTextID = (parentID) ? '#hm-jstree-search-' + parentID : '#hm-jstree-search';
const theme = treeContainer.attr("theme");
const dots = treeContainer.attr("dots");
const dataURL = treeContainer.attr('data-source') + '&parent=0';
const updateURL = treeContainer.attr('url-update')
let reload = true;
let rollback = false;
// Ajax callback to refresh the tree.
if (reload) {
// Build the tree.
treeContainer.jstree({
core: {
data: {
url: function(node) {
return node.id === '#' ?
dataURL :
dataURL;
},
data: function(node) {
return node;
}
},
themes: {
// Todo: make configurable.
dots: dots === "1",
name: theme
},
'check_callback' : true,
"multiple": false,
},
search: {
show_only_matches: true
},
plugins: ["search", "dnd"]
});
// Node move event.
treeContainer.on("move_node.jstree", function(event, data) {
const thisTree = data.instance;
const movedNode = data.node;
if (!rollback) {
// Update the data on server side.
$.post(updateURL, {
keys: [movedNode.id],
target: data.position,
parent: data.parent
})
.done(function(response) {
if (response.result !== "success") {
alert("Server error:" + response.result);
rollback = true;
thisTree.move_node(movedNode, data.old_parent, data.old_position);
}
})
.fail(function() {
alert("Error: Can't connect to the server.");
rollback = true;
thisTree.move_node(movedNode, data.old_parent, data.old_position);
});
}
else {
rollback = false;
}
});
// Node selected event.
treeContainer.on("select_node.jstree", function(event, data) {
var href = data.node.a_attr.href;
// Todo: make the target of the new window configurable.
window.open(href, "_self");
});
// Search filter box.
let to = false;
$(searchTextID).keyup(function() {
const searchInput = $(this);
if (to) {
clearTimeout(to);
}
to = setTimeout(function() {
const v = searchInput.val();
treeContainer.jstree(true).search(v);
}, 250);
});
}
});
}
};
})(jQuery, Drupal);