add treeview script - jscancer - Javascript crap (relatively small)
(HTM) git clone git://git.codemadness.org/jscancer
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
(DIR) commit 4257064f428d84cdc8366a8b61f3f4456ae0cc6d
(DIR) parent d5b61ffaa35b294feed4cbba6edbdca3ff0349f5
(HTM) Author: Hiltjo Posthuma <hiltjo@codemadness.org>
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(-)
---
(DIR) 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
(DIR) 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>
(DIR) 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,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEX///+AgIAAAAA8XrssAAAAJElEQVR4XkXGsQkAAAjEwB/ta/vs4ziOKWohRyACa+UV9T/ADZDECAcCtSD0AAAAAElFTkSuQmCC");
+ 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,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEX///+AgIAAAAA8XrssAAAAH0lEQVR4XlXHoREAAAjEsI72Gt8dGRP7XFTQ0Gb/NQdsxAYH0Q1HGAAAAABJRU5ErkJggg==");
+}
+.tree.active li.open > ul {
+ display: block;
+ cursor: initial;
+}
(DIR) 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; ++i)
+ 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 ") == -1 ? " 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";
+ });
+};
+})();