From 6f7c7c795d65f74147f70b12062394852c1f7119 Mon Sep 17 00:00:00 2001 From: Bill Marquette Date: Sun, 29 Jul 2007 14:24:49 +0000 Subject: Add missing tree icons and javascript items --- usr/local/www/tree/i-bottom.gif | Bin 0 -> 125 bytes usr/local/www/tree/i-repeater.gif | Bin 0 -> 91 bytes usr/local/www/tree/index.html | 228 +++++++++++++++++++++++++++++ usr/local/www/tree/l.gif | Bin 0 -> 131 bytes usr/local/www/tree/minus.gif | Bin 0 -> 146 bytes usr/local/www/tree/page-file.png | Bin 0 -> 211 bytes usr/local/www/tree/page-file_play.gif | Bin 0 -> 1021 bytes usr/local/www/tree/page-file_x.gif | Bin 0 -> 630 bytes usr/local/www/tree/page-foldericon.png | Bin 0 -> 210 bytes usr/local/www/tree/page-openfoldericon.png | Bin 0 -> 219 bytes usr/local/www/tree/plus.gif | Bin 0 -> 149 bytes usr/local/www/tree/t.gif | Bin 0 -> 141 bytes usr/local/www/tree/tree.css | 136 +++++++++++++++++ usr/local/www/tree/tree.js | 195 ++++++++++++++++++++++++ 14 files changed, 559 insertions(+) create mode 100644 usr/local/www/tree/i-bottom.gif create mode 100644 usr/local/www/tree/i-repeater.gif create mode 100644 usr/local/www/tree/index.html create mode 100644 usr/local/www/tree/l.gif create mode 100644 usr/local/www/tree/minus.gif create mode 100644 usr/local/www/tree/page-file.png create mode 100644 usr/local/www/tree/page-file_play.gif create mode 100644 usr/local/www/tree/page-file_x.gif create mode 100644 usr/local/www/tree/page-foldericon.png create mode 100644 usr/local/www/tree/page-openfoldericon.png create mode 100644 usr/local/www/tree/plus.gif create mode 100644 usr/local/www/tree/t.gif create mode 100644 usr/local/www/tree/tree.css create mode 100644 usr/local/www/tree/tree.js (limited to 'usr/local/www/tree') 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 Binary files /dev/null and b/usr/local/www/tree/i-bottom.gif 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 Binary files /dev/null and b/usr/local/www/tree/i-repeater.gif 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 @@ + + + + + SilverStripe Tree Control + + + + + + + +

SilverStripe Tree Control

+

This tree control was put together by Sam Minnée at + SilverStripe in New Zealand. We've put it out there + for everyone to enjoy. Check out our blog if you're + wondering what we're up to.

+

This file came from http://www.silverstripe.com/downloads/tree/. + If you found this file elsewhere, check out that page: we might have posted an updated version.

+ +

+ Quick-links: + Demo | Usage | Download | How it Works +

+ +

Demo

+

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.

+ + + +

Download

+ +

Download everything you need here - tree.zip, 11kb

+ +

Usage

+ +

The first thing to do is include the appropriate JavaScript and CSS files:

+ + + <link rel="stylesheet" type="text/css" media="all" href="tree.css" />
+ <script type="text/javascript" src="tree.js"></script> + + +

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".

+ +

Here's the HTML code that I inserted to create the demo tree above.

+ + + <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> + + +

Your tree is now complete!

+ +

How it works

+
+
Starting the script
+
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
+ +
Finding the tree content
+
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".
+ +
Augmenting the HTML
+
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: + + + <li><a href="#">My item</a></li> + + + Is turned into the more ungainly, and yet more easily styled: + + + <li><span class="a"><span class="b"><span class="c"><a href="#">My item</a></span></span></span></li> + + + Additionally, some helper classes are applied to the <li> and <span class="a"> elements: +
    +
  • "last" is applied to the last node of any subtree.
    • +
  • "children" is applied to any node that has children.
    • +
+
+ +
Styling it up
+
Why the heck do we need 5 styling elements? Basically, because there are 5 background-images to apply: +
    +
  • li: A repeating vertical line is shown. Nested <li> tags + give us the multiple vertical lines that we need.
    • +
  • span.a: We overlay the vertical line with 'L' and 'T' elements as needed.
    • +
  • span.b: We overlay '+' or '-' signs on nodes with children.
    • +
  • span.c: This is needed to fix up the vertical line.
    • +
  • a: Finally, we apply the page icon.
    • +
+
+ +
Opening / closing nodes
+
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.
+
+ + + + diff --git a/usr/local/www/tree/l.gif b/usr/local/www/tree/l.gif new file mode 100644 index 0000000..1e8c707 Binary files /dev/null and b/usr/local/www/tree/l.gif differ diff --git a/usr/local/www/tree/minus.gif b/usr/local/www/tree/minus.gif new file mode 100644 index 0000000..7a7fd3b Binary files /dev/null and b/usr/local/www/tree/minus.gif 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 Binary files /dev/null and b/usr/local/www/tree/page-file.png 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 Binary files /dev/null and b/usr/local/www/tree/page-file_play.gif 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 Binary files /dev/null and b/usr/local/www/tree/page-file_x.gif 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 Binary files /dev/null and b/usr/local/www/tree/page-foldericon.png 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 Binary files /dev/null and b/usr/local/www/tree/page-openfoldericon.png differ diff --git a/usr/local/www/tree/plus.gif b/usr/local/www/tree/plus.gif new file mode 100644 index 0000000..3530f59 Binary files /dev/null and b/usr/local/www/tree/plus.gif differ diff --git a/usr/local/www/tree/t.gif b/usr/local/www/tree/t.gif new file mode 100644 index 0000000..a92da2a Binary files /dev/null and b/usr/local/www/tree/t.gif 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