demo.html | Explore in Territory

<!DOCTYPE html>
<html>
<!--
Copyright 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.log.getRootLogger();

    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>
chromium/third_party/google-closure-library/closure/goog/demos/tree/demo.html
