GopherProxy

	add treeview script - jscancer - Javascript crap (relatively small)
	git clone git://git.codemadness.org/jscancer
	Log
	Files
	Refs
	README
	LICENSE
	---
	commit 4257064f428d84cdc8366a8b61f3f4456ae0cc6d
	parent d5b61ffaa35b294feed4cbba6edbdca3ff0349f5
	Author: Hiltjo Posthuma <[email protected]>
	Date: Sun, 4 Feb 2018 21:50:49 +0100

	add treeview script

	Diffstat:
	A treeview/README \| 21 +++++++++++++++++++++
	A treeview/example.html \| 69 ++++++++++++++++++++++++++++++
	A treeview/treeview.css \| 22 ++++++++++++++++++++++
	A treeview/treeview.js \| 22 ++++++++++++++++++++++

	4 files changed, 134 insertions(+), 0 deletions(-)
	---
	diff --git a/treeview/README b/treeview/README
	@@ -0,0 +1,21 @@
	+treeview
	+========
	+
	+small treeview script.
	+
	+
	+FEATURES
	+--------
	+- Small
	+ - Filesize: +- 1KB.
	+ - Lines: +- 25 lines of Javascript and +- 25 lines of CSS.
	+ - No dependencies on other libraries like jQuery.
	+- Expand and collapse all child nodes with ctrl-click.
	+- Graceful fallback if Javascript is disabled.
	+- Officially supported browsers are:
	+ - Firefox and Firefox ESR.
	+
	+
	+License
	+-------
	+ISC
	diff --git a/treeview/example.html b/treeview/example.html
	@@ -0,0 +1,69 @@
	+<html>
	+<head>
	+<link rel="stylesheet" type="text/css" href="treeview.css" />
	+</head>
	+<body>
	+<ul class="tree">
	+<li class="open">Root
	+<ul>
	+ <li>Item 1
	+ <ul>
	+ <li>item 1:1</li>
	+ <li>item 1:2
	+ <ul>
	+ <li>item 1:2:1</li>
	+ <li>item 1:2:2</li>
	+ <li>item 1:2:3</li>
	+ <li>item 1:2:4</li>
	+ </ul>
	+ </li>
	+ <li>item 1:3</li>
	+ <li>item 1:4</li>
	+ <li>item 1:5</li>
	+ </ul>
	+ </li>
	+ <li>Item 2
	+ <ul>
	+ <li>item 2:1</li>
	+ <li>item 2:2
	+ <ul>
	+ <li>item 2:2:1</li>
	+ <li>item 2:2:2</li>
	+ <li>item 2:2:3</li>
	+ <li>item 2:2:4</li>
	+ </ul>
	+ </li>
	+ <li>item 2:3
	+ <ul>
	+ <li>item 2:3:1</li>
	+ <li>item 2:3:2</li>
	+ <li>item 2:3:3</li>
	+ <li>item 2:3:4</li>
	+ </ul>
	+ </li>
	+ <li>item 2:4
	+ <ul>
	+ <li>item 2:4:1</li>
	+ <li>item 2:4:2</li>
	+ <li>item 2:4:3</li>
	+ <li>item 2:4:4</li>
	+ </ul>
	+ </li>
	+ <li>item 2:5</li>
	+ </ul>
	+ </li>
	+ <li>Item 3
	+ <ul>
	+ <li>item 3:1</li>
	+ <li>item 3:2</li>
	+ <li>item 3:3</li>
	+ <li>item 3:4</li>
	+ <li>item 3:5</li>
	+ </ul>
	+ </li>
	+ </ul>
	+</li>
	+</ul>
	+<script type="text/javascript" src="treeview.js"></script>
	+</body>
	+</html>
	diff --git a/treeview/treeview.css b/treeview/treeview.css
	@@ -0,0 +1,22 @@
	+.tree.active li {
	+ color: #000;
	+ list-style-image: none;
	+}
	+.tree.active li.n {
	+ color: #ff0000;
	+ cursor: pointer;
	+ list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA…
	+ user-select: none;
	+ -moz-user-select: none;
	+}
	+.tree.active li ul {
	+ display: none;
	+}
	+.tree.active li.n.open {
	+ color: green;
	+ list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA…
	+}
	+.tree.active li.open > ul {
	+ display: block;
	+ cursor: initial;
	+}
	diff --git a/treeview/treeview.js b/treeview/treeview.js
	@@ -0,0 +1,22 @@
	+(function() {
	+var tree_toggle = function(e, s) {
	+ e.className = (" " + e.className + " ").replace(/ open /g, "") + s;
	+}, tree_map_li = function(r, f, b) {
	+ for (var i = 0, items = r.getElementsByTagName("li"); i < items.length…
	+ f(items[i], b);
	+}, trees = document.getElementsByClassName("tree");
	+for (var i = 0; i < trees.length; ++i) {
	+ trees[i].className += " active";
	+ trees[i].addEventListener("click", function(e) {
	+ var t = e.target, s = (" " + t.className + " ").indexOf(" open…
	+ tree_toggle(t, s);
	+ if (e.ctrlKey)
	+ tree_map_li(t, tree_toggle, s);
	+ return !!e.stopPropagation();
	+ }, false);
	+ tree_map_li(trees[i], function(e) {
	+ if (e.children.length)
	+ e.className += " n";
	+ });
	+};
	+})();