Add Decorator.js to do the nav javascript stuff
authorRobert Sesek <rsesek@bluestatic.org>
Sun, 4 Jan 2009 04:48:54 +0000 (20:48 -0800)
committerRobert Sesek <rsesek@bluestatic.org>
Sun, 4 Jan 2009 04:48:54 +0000 (20:48 -0800)
* Decorator.css.php
* Decorator.js
* docs/decoratortest.html

Decorator.css.php
Decorator.js [new file with mode: 0644]
docs/decoratortest.html

index baba1f081ba7bfa6fc7817fc14fd6767d29e8295..a6116519f69b1163835b036f252125e886c8d9bc 100644 (file)
@@ -410,6 +410,7 @@ table .alt2
 #nav ul li ul
 {
        margin: 0px;
+       display: none;
 }
 
 /* Navigation items */
diff --git a/Decorator.js b/Decorator.js
new file mode 100644 (file)
index 0000000..f2f38f6
--- /dev/null
@@ -0,0 +1,74 @@
+/*=====================================================================*
+|| ###################################################################
+|| # Blue Static ISSO Framework
+|| # Copyright (c)2005-2008 Blue Static
+|| #
+|| # This program is free software; you can redistribute it and/or modify
+|| # it under the terms of the GNU General Public License as published by
+|| # the Free Software Foundation; version 2 of the License.
+|| #
+|| # This program is distributed in the hope that it will be useful, but
+|| # WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+|| # or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+|| # more details.
+|| #
+|| # You should have received a copy of the GNU General Public License along
+|| # with this program; if not, write to the Free Software Foundation, Inc.,
+|| # 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA
+|| ###################################################################
+\*=====================================================================*/
+
+function nav_init(openSectionID, selectedItemID)
+{
+       var nav                         = document.getElementById("nav");
+       var openSection         = document.getElementById(_name(openSectionID));
+       var selectedItem        = document.getElementById(_name(selectedItemID));
+       
+       // open the proper nav section
+       if (openSection)
+       {
+               openSection.className = "expand";
+               _adjacent_ul(openSection).style.display = "block";
+       }
+       
+       // bold the selected link
+       if (selectedItem)
+               selectedItem.className = "selected";
+       
+       // register the nav sections
+       var sections = nav.getElementsByTagName("ul");
+       sections = sections[0].childNodes;
+       for (var i = 0; i < sections.length; i++)
+       {
+               // grab only <li> elements that do not have an <ul> in them
+               if (sections[i].nodeName.toLowerCase() == "li" && sections[i].childNodes.length == 1)
+                       sections[i].onclick = nav_toggle;
+       }
+}
+
+function nav_toggle()
+{
+       // we have a class name, so we need to hide
+       if (this.className)
+       {
+               this.className = "";
+               _adjacent_ul(this).style.display = "none";
+       }
+       // show the block
+       else
+       {
+               this.className = "expand";
+               _adjacent_ul(this).style.display = "block";
+       }
+}
+
+function _name(str)
+{
+       return "nav_" + str;
+}
+
+function _adjacent_ul(elm)
+{
+       // <li> + #text + <li> > #text == <ul>
+       return elm.nextSibling.nextSibling.firstChild.nextSibling;
+}
index 6d0b7ba2fd58d02c8931456586d5c47bcf482113..3736aff1427cd425bd1e06ce27147f156bc11ba1 100644 (file)
@@ -4,6 +4,7 @@
 <head>
        <title>Decorator Test</title>
        <link rel="stylesheet" href="../Decorator.css.php" type="text/css" media="screen" charset="utf-8" />
+       <script type="text/javascript" charset="utf-8" src="../Decorator.js"></script>
 </head>
 
 <body>
        </h2>
        
        <ul>
-               <li class="expand">Options</li>
+               <li id="nav_options" class="expand">Options</li>
                <li>
                <ul>
-                       <li class="selected"><a href="#">Bugdar Settings</a></li>
-                       <li><a href="#">Languages</a></li>
-                       <li><a href="#">User Help Items</a></li>
+                       <li id="nav_options_settings"><a href="#">Bugdar Settings</a></li>
+                       <li id="nav_options_languages"><a href="#">Languages</a></li>
+                       <li id="nav_options_user_help"><a href="#">User Help Items</a></li>
                </ul>
                </li>
                
-               <li>Products</li>
-               <li>Fields</li>
-               <li>Users &amp; Permissions</li>
+               <li id="nav_products">Products</li>
+               <li id="nav_fields">Fields</li>
+               <li id="nav_users">Users &amp; Permissions</li>
        </ul>
 </div>
 
 
 </div>
 
+<script type="text/javascript" charset="utf-8">
+//<![CDATA[//
+
+       nav_init("options", "options_settings");
+
+//]]>
+</script>
+
 </body>
 </html>
\ No newline at end of file