Restructure the theme code to be more like WordPress / Habari. Now,

the controller initiates a request to a top level page (eg:
album.html.php) which is then free to include whatever other page
chunks it wants with calls like <?= $theme->display('header.html') ?>

Variables like $item and $children are in the global space for all
views.

theme.php helper is now Theme.php library which lets us store the name
of the theme inside the variable itself.  This means that the theme
does not have to know its own name because you can use $theme->url()
for all urls to stuff inside the theme itself, which makes it possible
to cline a theme without changing a single line.

Still using the mock album UI.

1 files changed, 141 insertions, 0 deletions

diff --git a/themes/default/views/sidebar.html.php b/themes/default/views/sidebar.html.php
new file mode 100644
index 00000000..923b4e4e
--- /dev/null
+++ b/themes/default/views/sidebar.html.php
@@ -0,0 +1,141 @@
+<? defined("SYSPATH") or die("No direct script access."); ?>
+<div id="gSidebar" class="yui-b">
+
+  <div id="gAlbumTree">
+    <h2>Album Navigation</h2>
+
+    <div id="gTreeContainer"><!-- there might be a better way to make this accessible to the JS -->
+      <ul>
+	<li>Gallery
+	  <ul>
+	    <li>Friends &amp; Family
+	      <ul>
+		<li>Christmas 2006</li>
+		<li>Family Reunion</li>
+		<li>Christmas 2007</li>
+	      </ul>
+	    </li>
+	    <li>Vactions
+	      <ul>
+		<li>Cuba</li>
+		<li>Europe</li>
+	      </ul>
+	    </li>
+	  </ul>
+	</li>
+      </ul>
+    </div>
+  </div>
+
+  <script type="text/javascript">
+    //global variable to allow console inspection of tree:
+    var tree;
+
+    //anonymous function wraps the remainder of the logic:
+    (function() {
+
+    //function to initialize the tree:
+    function treeInit() {
+    buildRandomTextNodeTree();
+    }
+
+    //Function  creates the tree and
+    //builds between 3 and 7 children of the root node:
+    function buildRandomTextNodeTree() {
+    //instantiate the tree:
+    tree = new YAHOO.widget.TreeView("gTreeContainer");
+
+    // Expand and collapse happen prior to the actual expand/collapse,
+    // and can be used to cancel the operation
+    tree.subscribe("expand", function(node) {
+    YAHOO.log(node.index + " was expanded", "info", "example");
+    // return false; // return false to cancel the expand
+    });
+
+    tree.subscribe("collapse", function(node) {
+    YAHOO.log(node.index + " was collapsed", "info", "example");
+    });
+
+    // Trees with TextNodes will fire an event for when the label is clicked:
+    tree.subscribe("labelClick", function(node) {
+    YAHOO.log(node.index + " label was clicked", "info", "example");
+    });
+
+    //The tree is not created in the DOM until this method is called:
+    tree.draw();
+    }
+
+    //Add an onDOMReady handler to build the tree when the document is ready
+    YAHOO.util.Event.onDOMReady(treeInit);
+
+    })();
+  </script>
+
+
+  <table class="gMetadata">
+    <caption><h2>Album Info</h2></caption>
+    <tbody>
+      <tr>
+	<th>Name:</th>
+	<td><strong>Christmas 2007</strong></td>
+      </tr>
+      <tr>
+	<th>Taken:</th>
+	<td><span class="date" title="January 21, 2008 8:30pm">January 21, 2008</td>
+      </tr>
+      <tr>
+	<th>Location:</th>
+	<td><a href="#" title="see the location on a map">Mountain View</a></td>
+      </tr>
+      <tr>
+	<th>Owner:</th>
+	<td><a href="#">username</a></td>
+      </tr>
+      <tr>
+	<th>Uploaded:</th>
+	<td><span class="date" title="October 23, 2008 11:37am">October 23, 2008</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <div class="gTagCloud">
+    <h2>Tag cloud</h2>
+    <ul>
+      <li><a href="#" class="m size0">animation</a></li>
+      <li><a href="#" class="m size0">art</a></li>
+      <li><a href="#" class="m size1">blind</a></li>
+      <li><a href="#" class="m size3">blog</a></li>
+      <li><a href="#" class="m size1">bug-tracker</a></li>
+      <li><a href="#" class="m size2">bugs20</a></li>
+      <li><a href="#" class="m size0">canvas</a></li>
+      <li><a href="#" class="m size0">classification</a></li>
+      <li><a href="#" class="m size4">cocktail</a></li>
+      <li><a href="#" class="m size0">exhibtion</a></li>
+      <li><a href="#" class="m size0">forum</a></li>
+      <li><a href="#" class="m size1">geo-tagging</a></li>
+      <li><a href="#" class="m size0">german</a></li>
+      <li><a href="#" class="m size0">germany</a></li>
+      <li><a href="#" class="m size0">gläser</a></li>
+      <li><a href="#" class="m size0">graffiti</a></li>
+      <li><a href="#" class="m size0">illustration</a></li>
+      <li><a href="#" class="m size0">ITP</a></li>
+      <li><a href="#" class="m size0">javascript</a></li>
+      <li><a href="#" class="m size0">miami</a></li>
+      <li><a href="#" class="m size0">miknow</a></li>
+      <li><a href="#" class="m size0">nyc</a></li>
+      <li><a href="#" class="m size0">NYU</a></li>
+      <li><a href="#" class="m size0">ontology</a></li>
+      <li><a href="#" class="m size0">open-source</a></li>
+      <li><a href="#" class="m size0">project</a></li>
+      <li><a href="#" class="m size0">school-of-information</a></li>
+      <li><a href="#" class="m size0">screenshot</a></li>
+      <li><a href="#" class="m size0">shiftspace</a></li>
+      <li><a href="#" class="m size0">shop</a></li>
+      <li><a href="#" class="m size0">tagging</a></li>
+      <li><a href="#" class="m size2">talkingpoints</a></li>
+      <li><a href="#" class="m size0">university-of-michigan</a></li>
+      <li><a href="#" class="m size1">usability</a></li>
+      <li><a href="#" class="m size0">writing</a></li>
+    </ul>
+  </div>
+</div>