Add missing tree icons and javascript items

author: Bill Marquette <billm@pfsense.org> 2007-07-29 14:24:49 +0000
committer: Bill Marquette <billm@pfsense.org> 2007-07-29 14:24:49 +0000
commit: 6f7c7c795d65f74147f70b12062394852c1f7119 (patch)
tree: 6399ee7d5b1add4be1f56a5e7569d0e7fa8379e5 /usr
parent: 9bb4f0c564c5ca559d6643289ac62de83e911a56 (diff)
download: pfsense-6f7c7c795d65f74147f70b12062394852c1f7119.zip
pfsense-6f7c7c795d65f74147f70b12062394852c1f7119.tar.gz
14 files changed, 559 insertions, 0 deletions
diff --git a/usr/local/www/tree/i-bottom.gif b/usr/local/www/tree/i-bottom.gif
new file mode 100644
index 0000000..f07fa99
--- /dev/null
+++ b/usr/local/www/tree/i-bottom.gif
diff --git a/usr/local/www/tree/i-repeater.gif b/usr/local/www/tree/i-repeater.gif
new file mode 100644
index 0000000..d5ab089
--- /dev/null
+++ b/usr/local/www/tree/i-repeater.gif
diff --git a/usr/local/www/tree/index.html b/usr/local/www/tree/index.html
new file mode 100644
index 0000000..f2c45d4
--- /dev/null
+++ b/usr/local/www/tree/index.html
@@ -0,0 +1,228 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
+
+  <head>
+    <title>SilverStripe Tree Control</title>
+    <link rel="stylesheet" type="text/css" media="all" href="tree.css" />
+    <script type="text/javascript" src="tree.js"></script>
+  <style>
+  	html {
+  		background-color: #DDD;
+  	}
+  	body {
+  		font-size: 80%;
+  		font-family: Arial, Helvetica, sans-serif;
+  		width: 50em;
+  		margin: 0 auto 3.5em auto;
+  		padding: 1em;
+  		background-color: white;
+  		border-left: 1px #CCC solid;
+  		border-right: 1px #CCC solid;
+  	}
+  	ul.tree a {
+  		font-size: 0.8em;
+  	
+  	}
+  	code {
+  		display: block;
+  		font-size: 1.2em;
+  		margin: 2em 5em;
+  		padding: 0.5em;
+  		border: 1px #CCC solid;
+  		background-color: #EEE;
+  	}
+  	#version {
+  		float: right;
+  		font-style: italic;
+  		margin-top: -4em;
+  	}
+  	
+  	dt {
+  		margin: 1.2em 0 0.2em 0;
+  		font-weight: bold;
+  		font-size: 1.1em
+  	}
+  	dd {
+  		margin: 0;
+  	}
+  	h2 {
+  		margin-top: 4em;
+  		border-bottom: 1px #CCC dotted;
+  	}
+  	
+  	#footer {
+  		position: fixed;
+  		bottom: 0;
+  		left: 0;
+  		width: 100%;
+  		height: 3em;
+  	}
+  	#footer div {
+  		margin: auto;
+  		width: 52em;
+  		height: 3em;
+  		background-color: #777;
+  		color: white;
+  	}
+  	#footer a {
+  		color: white;
+  	}
+  	#footer p.left {
+  		float: left;
+  		margin: 0.75em 1em;
+  	}
+  	#footer p.right {
+  		float: right;
+  		margin: 0.75em 1em;
+  	}
+  	
+  </style>    
+  </head>
+
+<body>
+
+	<h1>SilverStripe Tree Control</h1>
+	<p>This tree control was put together by <a href="sam@silverstripe.com">Sam Minn&eacute;e</a> at 
+	<a href="http://www.silverstripe.com/blog">SilverStripe</a> in New Zealand.  We've put it out there
+	for everyone to enjoy.  Check out <a href="http://www.silverstripe.com/blog">our blog</a> if you're
+	wondering what we're up to.</p>
+	<p>This file came from <a href="http://www.silverstripe.com/downloads/tree/">http://www.silverstripe.com/downloads/tree/</a>.
+	If you found this file elsewhere, check out that page: we might have posted an updated version.</p>
+	
+	<p>
+		<b>Quick-links:</b>
+		<a href="#Demo">Demo</a> | <a href="#Usage">Usage</a> | <a href="#Download">Download</a> | <a href="#HowItWorks">How it Works</a>
+	</p>
+	
+	<h2 id="Demo">Demo</h2>
+	<p>Here's a basic demo of the tree control.  Our styling is fairly basic, but with updated CSS and
+	images you can do whatever you like.  Just for fun, try changing the text size.</p>
+	
+	<ul class="tree">
+		<li><a href="#">item 1</a>
+		<ul>
+			<li><a href="#">item 1.1</a></li>
+			<li class="closed"><a href="#">item 1.2</a>
+			<ul>
+				<li><a href="#">item 1.2.1</a></li>
+				<li><a href="#">item 1.2.2</a></li>
+				<li><a href="#">item 1.2.3</a></li>
+			</ul>	
+			</li>
+			<li><a href="#">item 1.3</a></li>
+		</ul>	
+		</li>
+		<li><a href="#">item 2</a>
+		<ul>
+			<li><a href="#">item 2.1</a></li>
+			<li><a href="#">item 2.2</a></li>
+			<li><a href="#">item 2.3</a></li>
+		</ul>	
+		</li>
+	</ul>
+
+	<h2 id="Download">Download</h2>
+	
+	<p><a href="../tree.zip">Download everything you need here</a> - tree.zip, 11kb</p>
+	
+	<h2 id="Usage">Usage</h2>
+	
+	<p>The first thing to do is include the appropriate JavaScript and CSS files:</p>
+		
+	<code>
+		&lt;link rel="stylesheet" type="text/css" media="all" href="tree.css" /&gt;<br />
+		&lt;script type="text/javascript" src="tree.js"&gt;&lt;/script&gt;
+	</code>
+	
+	<p>Then, create the HTML for you tree.  This is basically a nested set of bullet pointed links.  The
+	"tree" class at the top is what the script will look for.  Note that you can make a tree ndoe closed 
+	to begin with by adding class="closed".</p>
+	
+	<p>Here's the HTML code that I inserted to create the demo tree above.</p>
+	
+	<code>
+	&lt;ul class="tree"&gt;<br />
+		&lt;li&gt;&lt;a href="#"&gt;item 1&lt;/a&gt;<br />
+		&lt;ul&gt;<br />
+			&lt;li&gt;&lt;a href="#"&gt;item 1.1&lt;/a&gt;&lt;/li&gt;<br />
+			&lt;li class="closed"&gt;&lt;a href="#"&gt;item 1.2&lt;/a&gt;<br />
+			&lt;ul&gt;<br />
+				&lt;li&gt;&lt;a href="#"&gt;item 1.2.1&lt;/a&gt;&lt;/li&gt;<br />
+				&lt;li&gt;&lt;a href="#"&gt;item 1.2.2&lt;/a&gt;&lt;/li&gt;<br />
+				&lt;li&gt;&lt;a href="#"&gt;item 1.2.3&lt;/a&gt;&lt;/li&gt;<br />
+			&lt;/ul&gt;	<br />
+			&lt;/li&gt;<br />
+			&lt;li&gt;&lt;a href="#"&gt;item 1.3&lt;/a&gt;&lt;/li&gt;<br />
+		&lt;/ul&gt;	<br />
+		&lt;/li&gt;<br />
+		&lt;li&gt;&lt;a href="#"&gt;item 2&lt;/a&gt;<br />
+		&lt;ul&gt;<br />
+			&lt;li&gt;&lt;a href="#"&gt;item 2.1&lt;/a&gt;&lt;/li&gt;<br />
+			&lt;li&gt;&lt;a href="#"&gt;item 2.2&lt;/a&gt;&lt;/li&gt;<br />
+			&lt;li&gt;&lt;a href="#"&gt;item 2.3&lt;/a&gt;&lt;/li&gt;<br />
+		&lt;/ul&gt;	<br />
+		&lt;/li&gt;<br />
+	&lt;/ul&gt;
+	</code>
+	
+	<p>Your tree is now complete!</p>
+	
+	<h2 id="HowItWorks">How it works</h2>
+	<dl>
+		<dt>Starting the script</dt>
+		<dd>In simple situations, creating an auto-loading script is a simple matter of setting window.onload
+		to a function.  But what if there's more than one script?  To this end, we created an appendLoader()
+		function that will execute multiple loader functions, including a previously defined loader function</dd>
+		
+		<dt>Finding the tree content</dt>
+		<dd>Rather than write a piece of script to define we're your tree is, we've tried to make the script
+		as automatic as possible - it finds all ULs with a class name containing "tree".</dd>
+		
+		<dt>Augmenting the HTML</dt>
+		<dd>Unfortunately, an LI containing an A isn't sufficient for doing all of the necessary tree styling.
+		Rather than force people to put non-semantic HTML into their file, the script generates extra &lt;span&gt; tags.
+		So, the following HTML:
+		
+		<code>
+			&lt;li&gt;&lt;a href="#"&gt;My item&lt;/a&gt;&lt;/li&gt;
+		</code>
+		
+		Is turned into the more ungainly, and yet more easily styled:
+		
+		<code>
+			&lt;li&gt;&lt;span class="a"&gt;&lt;span class="b"&gt;&lt;span class="c"&gt;&lt;a href="#"&gt;My item&lt;/a&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;
+		</code>
+		
+		Additionally, some helper classes are applied to the &lt;li&gt; and &lt;span class="a"&gt; elements:
+		<ul>
+			<li>"last" is applied to the last node of any subtree.</li>
+			<li>"children" is applied to any node that has children.</li>
+		</ul>
+		</dd>
+		
+		<dt>Styling it up</dt>
+		<dd>Why the heck do we need 5 styling elements? Basically, because there are 5 background-images to apply:
+		<ul>
+			<li><b>li:</b> A repeating vertical line is shown.  Nested &lt;li&gt; tags 
+				give us the multiple vertical lines that we need.</li>
+			<li><b>span.a:</b> We overlay the vertical line with 'L' and 'T' elements as needed.</li>
+			<li><b>span.b:</b> We overlay '+' or '-' signs on nodes with children.</li>
+			<li><b>span.c:</b> This is needed to fix up the vertical line.</li>
+			<li><b>a:</b> Finally, we apply the page icon.</li>
+		</ul>
+		</dd>
+
+		<dt>Opening / closing nodes</dt>
+		<dd>Having come this far, the "dynamic" aspect of the tree control is very trivial.  We set a "closed"
+		class on the &lt;li&gt; and &lt;span class="a"&gt; elements, and our CSS takes care of hiding the
+		children, changing the - to a + and changing the folder icon.</dd>
+	</dl>
+	
+	<div id="footer">
+		<div>
+			<p class="left"><a href="http://www.silverstripe.com/downloads/tree">SilverStripe Tree Control</a>: v0.1, 30 Oct 2005</p>
+			<p class="right">Copyright &copy; 2005 <a href="http://www.silverstripe.com/blog">SilverStripe Limited</a></p>
+		</div>
+	</div>
+	</body>
+</html>
diff --git a/usr/local/www/tree/l.gif b/usr/local/www/tree/l.gif
new file mode 100644
index 0000000..1e8c707
--- /dev/null
+++ b/usr/local/www/tree/l.gif
diff --git a/usr/local/www/tree/minus.gif b/usr/local/www/tree/minus.gif
new file mode 100644
index 0000000..7a7fd3b
--- /dev/null
+++ b/usr/local/www/tree/minus.gif
diff --git a/usr/local/www/tree/page-file.png b/usr/local/www/tree/page-file.png
new file mode 100644
index 0000000..d3bb119
--- /dev/null
+++ b/usr/local/www/tree/page-file.png
diff --git a/usr/local/www/tree/page-file_play.gif b/usr/local/www/tree/page-file_play.gif
new file mode 100644
index 0000000..0c8e9ff
--- /dev/null
+++ b/usr/local/www/tree/page-file_play.gif
diff --git a/usr/local/www/tree/page-file_x.gif b/usr/local/www/tree/page-file_x.gif
new file mode 100644
index 0000000..504f06e
--- /dev/null
+++ b/usr/local/www/tree/page-file_x.gif
diff --git a/usr/local/www/tree/page-foldericon.png b/usr/local/www/tree/page-foldericon.png
new file mode 100644
index 0000000..d26f2dc
--- /dev/null
+++ b/usr/local/www/tree/page-foldericon.png
diff --git a/usr/local/www/tree/page-openfoldericon.png b/usr/local/www/tree/page-openfoldericon.png
new file mode 100644
index 0000000..8d00c39
--- /dev/null
+++ b/usr/local/www/tree/page-openfoldericon.png
diff --git a/usr/local/www/tree/plus.gif b/usr/local/www/tree/plus.gif
new file mode 100644
index 0000000..3530f59
--- /dev/null
+++ b/usr/local/www/tree/plus.gif
diff --git a/usr/local/www/tree/t.gif b/usr/local/www/tree/t.gif
new file mode 100644
index 0000000..a92da2a
--- /dev/null
+++ b/usr/local/www/tree/t.gif
diff --git a/usr/local/www/tree/tree.css b/usr/local/www/tree/tree.css
new file mode 100644
index 0000000..31b7979
--- /dev/null
+++ b/usr/local/www/tree/tree.css
@@ -0,0 +1,136 @@
+/*
+ * CSS for Standard tree layout
+ * Copyright (C) 2005 SilverStripe Limited
+ * Feel free to use this on your websites, but please leave this message in the fies
+ * http://www.silverstripe.com/blog
+ */
+ 
+ul.tree{
+	width: auto;
+	padding-left : 0px;
+	margin-left : 0px;
+}
+
+ul.tree img{
+ 	border : none;
+}
+ 
+
+ul.tree, ul.tree ul {
+	padding-left: 0;
+}
+
+ul.tree ul {
+	margin-left: 16px;
+		
+}
+ul.tree li.closed ul {
+	display: none;
+}
+
+
+ul.tree li {
+	list-style: none;
+	background: url(i-repeater.gif) 0 0 repeat-y;
+	display: block;
+	width: auto;
+	/* background-color:#FFFFFF; */
+}
+
+
+
+ul.tree li.last {
+	list-style: none;
+	background-image: none;
+}
+
+
+
+/* Span-A: I/L/I glpyhs */
+ul.tree span.a {
+	background: url(t.gif) 0 50% no-repeat;
+	display: block;
+}
+ul.tree span.a.last {
+	background: url(l.gif) 0 50% no-repeat;
+}
+
+/* Span-B: Plus/Minus icon */
+ul.tree span.b {
+}
+ul.tree span.a.children span.b {
+	background: url(minus.gif) 0 50% no-repeat;
+	cursor: pointer;
+}
+ul.tree li.closed span.a.children span.b {
+	background: url(plus.gif) 0 50% no-repeat;
+	cursor: pointer;
+}
+
+/* Span-C: Spacing and extending tree line below the icon */
+ul.tree span.c {
+	margin-left: 16px;
+}
+ul.tree span.a.children span.c {
+	background: url(i-bottom.gif) 0 50% no-repeat;
+}
+ul.tree span.a.spanClosed span.c {
+	background-image: none;
+}
+
+
+/* Anchor tag: Page icon */
+ul.tree a  {
+	white-space: nowrap;
+	overflow: hidden;
+	
+/*	padding: 10px 0px 10px 18px; */
+	padding: 3px 0px 3px 18px;
+	line-height: 16px;
+
+/*	background: url(page-file.png) 0 50% no-repeat; */
+	background: url(page-file.png) 0 0 no-repeat;
+}
+ul.tree span.a.children a {
+	background-image: url(page-openfoldericon.png);
+}
+ul.tree span.a.children.spanClosed a {
+	background-image: url(page-foldericon.png);
+}
+
+/* Unformatted tree */
+ul.tree.unformatted li {
+	background-image: none;
+	padding-left: 16px;
+}
+ul.tree.unformatted li li {
+	background-image: none;
+	padding-left: 0px;
+}
+
+/*
+ * Divs, by default store vertically aligned data
+ */
+
+ul.tree li div {
+	float: right;
+	clear: right;
+	height: 1em;
+	margin-top: -26px;
+}
+/* As inside DIVs should be treated normally */
+ul.tree div a  {
+	padding: 0;
+	background-image: none;
+	min-height: auto;
+	height: auto;
+}
+
+ul.tree li A:link, ul.tree li A:hover, ul.tree li A:visited {
+	color : #111111;
+}
+
+
+ul.tree li .over{
+	background-color : pink;
+}
diff --git a/usr/local/www/tree/tree.js b/usr/local/www/tree/tree.js
new file mode 100644
index 0000000..c6d86c2
--- /dev/null
+++ b/usr/local/www/tree/tree.js
@@ -0,0 +1,195 @@
+/*
+ * Content-seperated javascript tree widget
+ * Copyright (C) 2005 SilverStripe Limited
+ * Feel free to use this on your websites, but please leave this message in the fies
+ * http://www.silverstripe.com/blog
+*/
+
+/*
+ * Initialise all trees identified by <ul class="tree">
+ */
+function autoInit_trees() {
+	var candidates = document.getElementsByTagName('ul');
+	for(var i=0;i<candidates.length;i++) {
+		if(candidates[i].className && candidates[i].className.indexOf('tree') != -1) {
+			initTree(candidates[i]);
+			candidates[i].className = candidates[i].className.replace(/ ?unformatted ?/, ' ');
+		}
+	}
+}
+ 
+/*
+ * Initialise a tree node, converting all its LIs appropriately
+ */
+function initTree(el) {
+	var i,j;
+	var spanA, spanB, spanC;
+	var startingPoint, stoppingPoint, childUL;
+	
+	// Find all LIs to process
+	for(i=0;i<el.childNodes.length;i++) {
+		if(el.childNodes[i].tagName && el.childNodes[i].tagName.toLowerCase() == 'li') {
+			var li = el.childNodes[i];
+
+			// Create our extra spans
+			spanA = document.createElement('span');
+			spanB = document.createElement('span');
+			spanC = document.createElement('span');
+			spanA.appendChild(spanB);
+			spanB.appendChild(spanC);
+			spanA.className = 'a ' + li.className.replace('closed','spanClosed');
+			spanA.onMouseOver = function() {}
+			spanB.className = 'b';
+			spanB.onclick = treeToggle;
+			spanC.className = 'c';
+			
+			
+			// Find the UL within the LI, if it exists
+			stoppingPoint = li.childNodes.length;
+			startingPoint = 0;
+			childUL = null;
+			for(j=0;j<li.childNodes.length;j++) {
+				if(li.childNodes[j].tagName && li.childNodes[j].tagName.toLowerCase() == 'div') {
+					startingPoint = j + 1;
+					continue;
+				}
+
+				if(li.childNodes[j].tagName && li.childNodes[j].tagName.toLowerCase() == 'ul') {
+					childUL = li.childNodes[j];
+					stoppingPoint = j;
+					break;					
+				}
+			}
+				
+			// Move all the nodes up until that point into spanC
+			for(j=startingPoint;j<stoppingPoint;j++) {
+				spanC.appendChild(li.childNodes[startingPoint]);
+			}
+			
+			// Insert the outermost extra span into the tree
+			if(li.childNodes.length > startingPoint) li.insertBefore(spanA, li.childNodes[startingPoint]);
+			else li.appendChild(spanA);
+			
+			// Process the children
+			if(childUL != null) {
+				if(initTree(childUL)) {
+					addClass(li, 'children', 'closed');
+					addClass(spanA, 'children', 'spanClosed');
+				}
+			}
+		}
+	}
+	
+	if(li) {
+		// li and spanA will still be set to the last item
+
+		addClass(li, 'last', 'closed');
+		addClass(spanA, 'last', 'spanClosed');
+		return true;
+	} else {
+		return false;
+	}
+		
+}
+ 
+
+/*
+ * +/- toggle the tree, where el is the <span class="b"> node
+ * force, will force it to "open" or "close"
+ */
+function treeToggle(el, force) {
+	el = this;
+	
+	while(el != null && (!el.tagName || el.tagName.toLowerCase() != "li")) el = el.parentNode;
+	
+	// Get UL within the LI
+	var childSet = findChildWithTag(el, 'ul');
+	var topSpan = findChildWithTag(el, 'span');
+
+	if( force != null ){
+		
+		if( force == "open"){
+			treeOpen( topSpan, el )
+		}
+		else if( force == "close" ){
+			treeClose( topSpan, el )
+		}
+		
+	}
+	
+	else if( childSet != null) {
+		// Is open, close it
+		if(!el.className.match(/(^| )closed($| )/)) {		
+			treeClose( topSpan, el )
+		// Is closed, open it
+		} else {			
+			treeOpen( topSpan, el )
+		}
+	}
+}
+
+
+function treeOpen( a, b ){
+	removeClass(a,'spanClosed');
+	removeClass(b,'closed');
+}
+	
+	
+function treeClose( a, b ){
+	addClass(a,'spanClosed');
+	addClass(b,'closed');
+}
+
+/*
+ * Find the a child of el of type tag
+ */
+function findChildWithTag(el, tag) {
+	for(var i=0;i<el.childNodes.length;i++) {
+		if(el.childNodes[i].tagName != null && el.childNodes[i].tagName.toLowerCase() == tag) return el.childNodes[i];
+	}
+	return null;
+}
+
+/*
+ * Functions to add and remove class names
+ * Mac IE hates unnecessary spaces
+ */
+function addClass(el, cls, forceBefore) {
+	if(forceBefore != null && el.className.match(new RegExp('(^| )' + forceBefore))) {
+		el.className = el.className.replace(new RegExp("( |^)" + forceBefore), '$1' + cls + ' ' + forceBefore);
+
+	} else if(!el.className.match(new RegExp('(^| )' + cls + '($| )'))) {
+		el.className += ' ' + cls;
+		el.className = el.className.replace(/(^ +)|( +$)/g, '');
+	}
+}
+function removeClass(el, cls) {
+	var old = el.className;
+	var newCls = ' ' + el.className + ' ';
+	newCls = newCls.replace(new RegExp(' (' + cls + ' +)+','g'), ' ');
+	el.className = newCls.replace(/(^ +)|( +$)/g, '');
+} 
+
+/*
+ * Handlers for automated loading
+ */ 
+ _LOADERS = Array();
+
+function callAllLoaders() {
+	var i, loaderFunc;
+	for(i=0;i<_LOADERS.length;i++) {
+		loaderFunc = _LOADERS[i];
+		if(loaderFunc != callAllLoaders) loaderFunc();
+	}
+}
+
+function appendLoader(loaderFunc) {
+	if(window.onload && window.onload != callAllLoaders)
+		_LOADERS[_LOADERS.length] = window.onload;
+
+	window.onload = callAllLoaders;
+
+	_LOADERS[_LOADERS.length] = loaderFunc;
+}
+
+appendLoader(autoInit_trees);
author	Bill Marquette <billm@pfsense.org>	2007-07-29 14:24:49 +0000
committer	Bill Marquette <billm@pfsense.org>	2007-07-29 14:24:49 +0000
commit	6f7c7c795d65f74147f70b12062394852c1f7119 (patch)
tree	6399ee7d5b1add4be1f56a5e7569d0e7fa8379e5 /usr
parent	9bb4f0c564c5ca559d6643289ac62de83e911a56 (diff)
download	pfsense-6f7c7c795d65f74147f70b12062394852c1f7119.zip pfsense-6f7c7c795d65f74147f70b12062394852c1f7119.tar.gz