Visualize a tree: Difference between revisions

Content added Content deleted

Inline

@@ Line 162: / Line 162: @@
 See: [[j:Essays/Tree Display]]
+=={{header|JavaScript}}==
+Javascript wrapped in HTML5 document. ''Should'' work in modern browsers.
+<lang html><!doctype html>
+<html id="doc">
+  <head><meta charset="utf-8"/>
+    <title>Stuff</title>
+    <script type="application/javascript">
+	function gid(id) { return document.getElementById(id); }
+	function ce(tag, cls, parent_node) {
+		var e = document.createElement(tag);
+		e.className = cls;
+		if (parent_node) parent_node.appendChild(e);
+		return e;
+	}
+	function dom_tree(id) {
+		gid('tree').textContent = "";
+		gid('tree').appendChild(mktree(gid(id), null));
+	}
+	function mktree(e, p) {
+		var t = ce("div", "tree", p);
+		var tog = ce("span", "toggle", t);
+		var h = ce("span", "tag", t);
+		if (e.tagName === undefined) {
+			h.textContent = "#Text";
+			var txt = e.textContent;
+			if (txt.length > 0 && txt.match(/\S/)) {
+				h = ce("div", "txt", t);
+				h.textContent = txt;
+			}
+			return t;
+		}
+		tog.textContent = "−";
+		tog.onclick = function () { clicked(tog); }
+		h.textContent = e.nodeName;
+		var l = e.childNodes;
+		for (var i = 0; i != l.length; i++)
+			mktree(l[i], t);
+		return t;
+	}
+	function clicked(e) {
+		var is_on = e.textContent == "−";
+		e.textContent = is_on ? "+" : "−";
+		e.parentNode.className = is_on ? "tree-hide" : "tree";
+	}
+    </script>
+    <style>
+      #tree { white-space: pre; font-family: monospace; border: 1px solid }
+      .tree > .tree-hide, .tree > .tree
+		{ margin-left: 2em; border-left: 1px dotted rgba(0,0,0,.2)}
+      .tree-hide > .tree, .tree-hide > .tree-hide { display: none }
+      .tag { color: navy }
+      .tree-hide > .tag { color: maroon }
+      .txt { color: gray; padding: 0 .5em; margin: 0 .5em 0 2em; border: 1px dotted rgba(0,0,0,.1) }
+      .toggle { display: inline-block; width: 2em; text-align: center }
+    </style>
+  </head>
+  <body>
+    <article>
+      <section>
+        <h1>Headline</h1>
+        Blah blah
+      </section>
+      <section>
+        <h1>More headline</h1>
+        <blockquote>Something something</blockquote>
+        <section><h2>Nested section</h2>
+	  Somethin somethin list:
+	  <ul>
+	    <li>Apples</li>
+	    <li>Oranges</li>
+	    <li>Cetera Fruits</li>
+	  </ul>
+	</section>
+      </section>
+    </article>
+    <div id="tree"><a href="javascript:dom_tree('doc')">click me</a></div>
+  </body>
+</html></lang>
 =={{header|Maxima}}==