diff options
Diffstat (limited to 'usr/local/www/tree')
| -rwxr-xr-x | usr/local/www/tree/i-bottom.gif | bin | 125 -> 0 bytes | |||
| -rwxr-xr-x | usr/local/www/tree/i-repeater.gif | bin | 91 -> 0 bytes | |||
| -rw-r--r-- | usr/local/www/tree/index.html | 228 | ||||
| -rwxr-xr-x | usr/local/www/tree/l.gif | bin | 131 -> 0 bytes | |||
| -rwxr-xr-x | usr/local/www/tree/minus.gif | bin | 146 -> 0 bytes | |||
| -rwxr-xr-x | usr/local/www/tree/page-file.png | bin | 211 -> 0 bytes | |||
| -rwxr-xr-x | usr/local/www/tree/page-file_play.gif | bin | 1021 -> 0 bytes | |||
| -rwxr-xr-x | usr/local/www/tree/page-file_x.gif | bin | 630 -> 0 bytes | |||
| -rwxr-xr-x | usr/local/www/tree/page-foldericon.png | bin | 210 -> 0 bytes | |||
| -rwxr-xr-x | usr/local/www/tree/page-openfoldericon.png | bin | 219 -> 0 bytes | |||
| -rwxr-xr-x | usr/local/www/tree/plus.gif | bin | 149 -> 0 bytes | |||
| -rwxr-xr-x | usr/local/www/tree/t.gif | bin | 141 -> 0 bytes | |||
| -rw-r--r-- | usr/local/www/tree/tree.css | 136 | ||||
| -rw-r--r-- | usr/local/www/tree/tree.js | 195 |
14 files changed, 0 insertions, 559 deletions
diff --git a/usr/local/www/tree/i-bottom.gif b/usr/local/www/tree/i-bottom.gif Binary files differdeleted file mode 100755 index f07fa99..0000000 --- a/usr/local/www/tree/i-bottom.gif +++ /dev/null diff --git a/usr/local/www/tree/i-repeater.gif b/usr/local/www/tree/i-repeater.gif Binary files differdeleted file mode 100755 index d5ab089..0000000 --- a/usr/local/www/tree/i-repeater.gif +++ /dev/null diff --git a/usr/local/www/tree/index.html b/usr/local/www/tree/index.html deleted file mode 100644 index f2c45d4..0000000 --- a/usr/local/www/tree/index.html +++ /dev/null @@ -1,228 +0,0 @@ -<!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é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> - <link rel="stylesheet" type="text/css" media="all" href="tree.css" /><br /> - <script type="text/javascript" src="tree.js"></script> - </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> - <ul class="tree"><br /> - <li><a href="#">item 1</a><br /> - <ul><br /> - <li><a href="#">item 1.1</a></li><br /> - <li class="closed"><a href="#">item 1.2</a><br /> - <ul><br /> - <li><a href="#">item 1.2.1</a></li><br /> - <li><a href="#">item 1.2.2</a></li><br /> - <li><a href="#">item 1.2.3</a></li><br /> - </ul> <br /> - </li><br /> - <li><a href="#">item 1.3</a></li><br /> - </ul> <br /> - </li><br /> - <li><a href="#">item 2</a><br /> - <ul><br /> - <li><a href="#">item 2.1</a></li><br /> - <li><a href="#">item 2.2</a></li><br /> - <li><a href="#">item 2.3</a></li><br /> - </ul> <br /> - </li><br /> - </ul> - </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 <span> tags. - So, the following HTML: - - <code> - <li><a href="#">My item</a></li> - </code> - - Is turned into the more ungainly, and yet more easily styled: - - <code> - <li><span class="a"><span class="b"><span class="c"><a href="#">My item</a></span></span></span></li> - </code> - - Additionally, some helper classes are applied to the <li> and <span class="a"> 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 <li> 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 <li> and <span class="a"> 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 © 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 Binary files differdeleted file mode 100755 index 1e8c707..0000000 --- a/usr/local/www/tree/l.gif +++ /dev/null diff --git a/usr/local/www/tree/minus.gif b/usr/local/www/tree/minus.gif Binary files differdeleted file mode 100755 index 7a7fd3b..0000000 --- a/usr/local/www/tree/minus.gif +++ /dev/null diff --git a/usr/local/www/tree/page-file.png b/usr/local/www/tree/page-file.png Binary files differdeleted file mode 100755 index d3bb119..0000000 --- a/usr/local/www/tree/page-file.png +++ /dev/null diff --git a/usr/local/www/tree/page-file_play.gif b/usr/local/www/tree/page-file_play.gif Binary files differdeleted file mode 100755 index 0c8e9ff..0000000 --- a/usr/local/www/tree/page-file_play.gif +++ /dev/null diff --git a/usr/local/www/tree/page-file_x.gif b/usr/local/www/tree/page-file_x.gif Binary files differdeleted file mode 100755 index 504f06e..0000000 --- a/usr/local/www/tree/page-file_x.gif +++ /dev/null diff --git a/usr/local/www/tree/page-foldericon.png b/usr/local/www/tree/page-foldericon.png Binary files differdeleted file mode 100755 index d26f2dc..0000000 --- a/usr/local/www/tree/page-foldericon.png +++ /dev/null diff --git a/usr/local/www/tree/page-openfoldericon.png b/usr/local/www/tree/page-openfoldericon.png Binary files differdeleted file mode 100755 index 8d00c39..0000000 --- a/usr/local/www/tree/page-openfoldericon.png +++ /dev/null diff --git a/usr/local/www/tree/plus.gif b/usr/local/www/tree/plus.gif Binary files differdeleted file mode 100755 index 3530f59..0000000 --- a/usr/local/www/tree/plus.gif +++ /dev/null diff --git a/usr/local/www/tree/t.gif b/usr/local/www/tree/t.gif Binary files differdeleted file mode 100755 index a92da2a..0000000 --- a/usr/local/www/tree/t.gif +++ /dev/null diff --git a/usr/local/www/tree/tree.css b/usr/local/www/tree/tree.css deleted file mode 100644 index 31b7979..0000000 --- a/usr/local/www/tree/tree.css +++ /dev/null @@ -1,136 +0,0 @@ -/* - * 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 deleted file mode 100644 index 8e9651e..0000000 --- a/usr/local/www/tree/tree.js +++ /dev/null @@ -1,195 +0,0 @@ -/* - * Content-separated 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); |
