summaryrefslogtreecommitdiffstats
path: root/usr/local
diff options
context:
space:
mode:
authorBill Marquette <billm@pfsense.org>2007-07-29 14:24:49 +0000
committerBill Marquette <billm@pfsense.org>2007-07-29 14:24:49 +0000
commit6f7c7c795d65f74147f70b12062394852c1f7119 (patch)
tree6399ee7d5b1add4be1f56a5e7569d0e7fa8379e5 /usr/local
parent9bb4f0c564c5ca559d6643289ac62de83e911a56 (diff)
downloadpfsense-6f7c7c795d65f74147f70b12062394852c1f7119.zip
pfsense-6f7c7c795d65f74147f70b12062394852c1f7119.tar.gz
Add missing tree icons and javascript items
Diffstat (limited to 'usr/local')
-rw-r--r--usr/local/www/tree/i-bottom.gifbin0 -> 125 bytes
-rw-r--r--usr/local/www/tree/i-repeater.gifbin0 -> 91 bytes
-rw-r--r--usr/local/www/tree/index.html228
-rw-r--r--usr/local/www/tree/l.gifbin0 -> 131 bytes
-rw-r--r--usr/local/www/tree/minus.gifbin0 -> 146 bytes
-rw-r--r--usr/local/www/tree/page-file.pngbin0 -> 211 bytes
-rw-r--r--usr/local/www/tree/page-file_play.gifbin0 -> 1021 bytes
-rw-r--r--usr/local/www/tree/page-file_x.gifbin0 -> 630 bytes
-rw-r--r--usr/local/www/tree/page-foldericon.pngbin0 -> 210 bytes
-rw-r--r--usr/local/www/tree/page-openfoldericon.pngbin0 -> 219 bytes
-rw-r--r--usr/local/www/tree/plus.gifbin0 -> 149 bytes
-rw-r--r--usr/local/www/tree/t.gifbin0 -> 141 bytes
-rw-r--r--usr/local/www/tree/tree.css136
-rw-r--r--usr/local/www/tree/tree.js195
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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);
OpenPOWER on IntegriCloud