| <!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.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> |
