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
|
<!DOCTYPE html>
<html>
<!--
Copyright 2010 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>goog.ui.tree.TreeControl</title>
<script src="../../base.js"></script>
<script>
goog.require('goog.debug.DivConsole');
goog.require('goog.debug.Trace');
goog.require('goog.dom');
goog.require('goog.ui.tree.TreeControl');
</script>
<script src="testdata.js"></script>
<link rel="stylesheet" href="../css/demo.css">
<link rel="stylesheet" href="../../css/tree.css">
<style>
#div-console {
position: absolute;
right: 10px;
top: 10px;
}
</style>
</head>
<body>
<h1>goog.ui.tree.TreeControl</h1>
<div id="div-console"></div>
<p><button onclick="toggleNonCollapseNode()">Toggle non collapsible</button>
<button onclick="tree.setShowExpandIcons(!tree.getShowExpandIcons())">
Toggle Expand Icons
</button>
<button onclick="tree.setShowLines(!tree.getShowLines())">
Toggle Show Lines
</button>
<button onclick="tree.setShowRootLines(!tree.getShowRootLines())">
Toggle Show Root Lines
</button>
<button onclick="tree.setShowRootNode(!tree.getShowRootNode())">
Toggle Show Root Node
</button>
<p><button onclick="cut()">Cut</button>
<button onclick="paste()">Paste</button>
<div id="treeContainer" style="width:400px"></div>
<script>
var $ = goog.dom.getElement;
var tree, clipboardNode;
var divConsole = new goog.debug.DivConsole($('div-console'));
divConsole.setCapturing(true);
var logger = goog.debug.LogManager.getRoot();
function makeTree() {
goog.debug.Trace.initCurrentTrace();
var tracerId = goog.debug.Trace.startTracer('makeTree');
var treeConfig = goog.ui.tree.TreeControl.defaultConfig;
treeConfig['cleardotPath'] = '../../images/tree/cleardot.gif';
tree = new goog.ui.tree.TreeControl('root', treeConfig);
createTreeFromTestData(tree, testData);
tree.render($('treeContainer'));
var elapsed = goog.debug.Trace.stopTracer(tracerId);
goog.log.info(logger, 'Trace:\n' + goog.debug.Trace.getFormattedTrace());
}
function createTreeFromTestData(node, data) {
node.setText(data[0]);
if (data.length > 1) {
var children = data[1];
var childNotCollapsible = 3; // Hard coded to reduce randomness.
for (var i = 0; i < children.length; i++) {
var child = children[i];
var childNode = node.getTree().createNode('');
node.add(childNode);
createTreeFromTestData(childNode, child);
if (i == childNotCollapsible && child.length > 1) {
childNode.setIsUserCollapsible(false);
childNode.setExpanded(true);
nonCollapseNode = childNode;
}
}
}
}
function toggleNonCollapseNode() {
nonCollapseNode.setIsUserCollapsible(!nonCollapseNode.isUserCollapsible());
}
function cut() {
if (tree.getSelectedItem()) {
clipboardNode = tree.getSelectedItem();
if (clipboardNode.getParent()) {
clipboardNode.getParent().remove(clipboardNode);
}
}
}
function paste() {
if (tree.getSelectedItem() && clipboardNode) {
tree.getSelectedItem().add(clipboardNode);
clipboardNode = null;
}
}
makeTree();
</script>
</body>
</html>
|
