aboutsummaryrefslogtreecommitdiff
path: root/contexts/data/lib/closure-library/closure/goog/demos/tree/demo.html
blob: 5562cf84fa8f1016653f198a137e219af8ed5910 (plain)
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);
      logger.info('Trace:\n' + goog.debug.Trace.getFormattedTrace());
    }


    function createTreeFromTestData(node, data) {
      node.setHtml(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>