demo.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. Copyright 2010 The Closure Library Authors. All Rights Reserved.
  5. Use of this source code is governed by the Apache License, Version 2.0.
  6. See the COPYING file for details.
  7. -->
  8. <head>
  9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10. <title>goog.ui.tree.TreeControl</title>
  11. <script src="../../base.js"></script>
  12. <script>
  13. goog.require('goog.debug.DivConsole');
  14. goog.require('goog.debug.Trace');
  15. goog.require('goog.dom');
  16. goog.require('goog.ui.tree.TreeControl');
  17. </script>
  18. <script src="testdata.js"></script>
  19. <link rel="stylesheet" href="../css/demo.css">
  20. <link rel="stylesheet" href="../../css/tree.css">
  21. <style>
  22. #div-console {
  23. position: absolute;
  24. right: 10px;
  25. top: 10px;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <h1>goog.ui.tree.TreeControl</h1>
  31. <div id="div-console"></div>
  32. <p><button onclick="toggleNonCollapseNode()">Toggle non collapsible</button>
  33. <button onclick="tree.setShowExpandIcons(!tree.getShowExpandIcons())">
  34. Toggle Expand Icons
  35. </button>
  36. <button onclick="tree.setShowLines(!tree.getShowLines())">
  37. Toggle Show Lines
  38. </button>
  39. <button onclick="tree.setShowRootLines(!tree.getShowRootLines())">
  40. Toggle Show Root Lines
  41. </button>
  42. <button onclick="tree.setShowRootNode(!tree.getShowRootNode())">
  43. Toggle Show Root Node
  44. </button>
  45. <p><button onclick="cut()">Cut</button>
  46. <button onclick="paste()">Paste</button>
  47. <div id="treeContainer" style="width:400px"></div>
  48. <script>
  49. var $ = goog.dom.getElement;
  50. var tree, clipboardNode;
  51. var divConsole = new goog.debug.DivConsole($('div-console'));
  52. divConsole.setCapturing(true);
  53. var logger = goog.debug.LogManager.getRoot();
  54. function makeTree() {
  55. goog.debug.Trace.initCurrentTrace();
  56. var tracerId = goog.debug.Trace.startTracer('makeTree');
  57. var treeConfig = goog.ui.tree.TreeControl.defaultConfig;
  58. treeConfig['cleardotPath'] = '../../images/tree/cleardot.gif';
  59. tree = new goog.ui.tree.TreeControl('root', treeConfig);
  60. createTreeFromTestData(tree, testData);
  61. tree.render($('treeContainer'));
  62. var elapsed = goog.debug.Trace.stopTracer(tracerId);
  63. goog.log.info(logger, 'Trace:\n' + goog.debug.Trace.getFormattedTrace());
  64. }
  65. function createTreeFromTestData(node, data) {
  66. node.setText(data[0]);
  67. if (data.length > 1) {
  68. var children = data[1];
  69. var childNotCollapsible = 3; // Hard coded to reduce randomness.
  70. for (var i = 0; i < children.length; i++) {
  71. var child = children[i];
  72. var childNode = node.getTree().createNode('');
  73. node.add(childNode);
  74. createTreeFromTestData(childNode, child);
  75. if (i == childNotCollapsible && child.length > 1) {
  76. childNode.setIsUserCollapsible(false);
  77. childNode.setExpanded(true);
  78. nonCollapseNode = childNode;
  79. }
  80. }
  81. }
  82. }
  83. function toggleNonCollapseNode() {
  84. nonCollapseNode.setIsUserCollapsible(!nonCollapseNode.isUserCollapsible());
  85. }
  86. function cut() {
  87. if (tree.getSelectedItem()) {
  88. clipboardNode = tree.getSelectedItem();
  89. if (clipboardNode.getParent()) {
  90. clipboardNode.getParent().remove(clipboardNode);
  91. }
  92. }
  93. }
  94. function paste() {
  95. if (tree.getSelectedItem() && clipboardNode) {
  96. tree.getSelectedItem().add(clipboardNode);
  97. clipboardNode = null;
  98. }
  99. }
  100. makeTree();
  101. </script>
  102. </body>
  103. </html>