From d0161319c205c97f34c0b23daad8e2661ffa4987 Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Sat, 21 Nov 2009 02:33:47 +0000 Subject: [PATCH] MINOR Added readme and license for tree.js (manual jsparty merge from r87745) git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/sapphire/trunk@92569 467b73ca-7a2a-4603-9d3b-597d59a354a9 --- javascript/tree/LICENSE | 24 +++++++++ javascript/tree/README.md | 104 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 128 insertions(+) create mode 100644 javascript/tree/LICENSE create mode 100644 javascript/tree/README.md diff --git a/javascript/tree/LICENSE b/javascript/tree/LICENSE new file mode 100644 index 000000000..e6bcfb1d9 --- /dev/null +++ b/javascript/tree/LICENSE @@ -0,0 +1,24 @@ +* Copyright (c) 2008, Silverstripe Ltd. +* All rights reserved. +* +* Redistribution and use in source and binary forms, with or without +* modification, are permitted provided that the following conditions are met: +* * Redistributions of source code must retain the above copyright +* notice, this list of conditions and the following disclaimer. +* * Redistributions in binary form must reproduce the above copyright +* notice, this list of conditions and the following disclaimer in the +* documentation and/or other materials provided with the distribution. +* * Neither the name of the nor the +* names of its contributors may be used to endorse or promote products +* derived from this software without specific prior written permission. +* +* THIS SOFTWARE IS PROVIDED BY Silverstripe Ltd. ``AS IS'' AND ANY +* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED +* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE +* DISCLAIMED. IN NO EVENT SHALL Silverstripe Ltd. BE LIABLE FOR ANY +* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES +* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; +* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND +* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS +* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. \ No newline at end of file diff --git a/javascript/tree/README.md b/javascript/tree/README.md new file mode 100644 index 000000000..ecadea00e --- /dev/null +++ b/javascript/tree/README.md @@ -0,0 +1,104 @@ +# JavaScript Tree Control + +## Maintainers + + * Sam Minnee (sam at silverstripe dot com) + +## Features + + * Build trees using semantic HTML and unobtrusive JavaScript. + * Style the tree to suit your application you with CSS. + * Demo: http://www.silverstripe.org/assets/tree/demo.html + +## Usage + +The first thing to do is include the appropriate JavaScript and CSS files: + + + + + + +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 node closed to begin with by adding `class="closed"`. + +Here's the HTML code that I inserted to create the demo tree above. + + + + + +Your tree is now complete! + +## How it works + +Obviously, this isn't a complete detail of everything that's going on, but it gives you an insight into the overall process. + +### 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 where 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 `` tags. + +So, the following HTML: + + +
  • + My item +
    • +     + +Is turned into the more ungainly, and yet more easily styled: + + +
  • + + My item + +
    • +     + +Additionally, some helper classes are applied to the `
  • ` and `` 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
  • 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 `
  • ` and `` elements, and our CSS takes care of hiding the children, changing the - to a + and changing the folder icon. \ No newline at end of file