basic multi-level menu
authorTero Marttila <terom@fixme.fi>
Sat, 07 Feb 2009 02:12:32 +0200
changeset 12 2abc5ace0b15
parent 11 fa216534ae45
child 13 178ea40bbc44
basic multi-level menu
lib/menu.py
lib/page.py
pages/list
pages/projects/index.html
static/style.css
templates/layout.tmpl
--- a/lib/menu.py	Sat Feb 07 01:33:30 2009 +0200
+++ b/lib/menu.py	Sat Feb 07 02:12:32 2009 +0200
@@ -17,7 +17,10 @@
 
         # the selected page
         self.page = _page_tree.get_page(page.url)
+
+        # the selected pagen's inheritance
+        self.ancestry = self.page.get_ancestry()
         
         # list of menu items == page siblings
-        self.items = _page_tree.get_siblings(page.url)
+        self.items = _page_tree.root.children
     
--- a/lib/page.py	Sat Feb 07 01:33:30 2009 +0200
+++ b/lib/page.py	Sat Feb 07 02:12:32 2009 +0200
@@ -67,6 +67,29 @@
 
         return dict((c.name, c) for c in self.children).get(name)
 
+    def get_ancestry (self) :
+        """
+            Returns a list of this page's parents and the page itself, but not root
+        """
+        
+        # collect in reverse order
+        ancestry = []
+        
+        # starting from self
+        item = self
+        
+        # add all items, but not root
+        while item and item.parent :
+            ancestry.append(item)
+
+            item = item.parent
+
+        # reverse
+        ancestry.reverse()
+        
+        # done
+        return ancestry
+
     @property
     def url (self) :
         """
@@ -76,26 +99,13 @@
         # cached?
         if self._url :
             return self._url
+
+        segments = [item.name for item in self.get_ancestry()]
         
-        # collect URL segments in reverse order
-        segments = []
-
         # add empty segment if dir
         if self.children :
             segments.append('')
         
-        # iterate over ancestry
-        item = self
-        
-        # add all parent names, but not root's
-        while item and item.parent :
-            segments.append(item.name)
-
-            item = item.parent
-
-        # reverse segments
-        segments.reverse()
-
         # join
         url = '/'.join(segments)
         
--- a/pages/list	Sat Feb 07 01:33:30 2009 +0200
+++ b/pages/list	Sat Feb 07 02:12:32 2009 +0200
@@ -2,6 +2,7 @@
             : Index
 foo             : Foo
 projects        : Projects list
-    foo             : Project Foo
+    foo             : foo
+    bar             : bar
 about           : About page
 
--- a/pages/projects/index.html	Sat Feb 07 01:33:30 2009 +0200
+++ b/pages/projects/index.html	Sat Feb 07 02:12:32 2009 +0200
@@ -1,4 +1,2 @@
-Projects list:
+Lots of projects
 
-<a href="foo">Foo</a>
-
--- a/static/style.css	Sat Feb 07 01:33:30 2009 +0200
+++ b/static/style.css	Sat Feb 07 02:12:32 2009 +0200
@@ -50,7 +50,7 @@
 /*
  * Main navigation menu
  */
-ul#nav {
+#nav ul {
     float: left;
     margin: 0px;
     padding: 0px;
@@ -62,19 +62,24 @@
     padding-top: 25px;
 }
 
-ul#nav li a {
+#nav ul ul {
+    padding-top: 0px;
+    border-left: 15px solid #d0d0d0;
+}
+
+#nav li a {
     display: block;
     
     padding: 10px;
     padding-left: 20px;
 }
 
-ul#nav li a:hover {
+#nav li a:hover {
     background-color: #d0d0d0;
     text-decoration: none;
 }
 
-ul#nav li a.selected-page {
+#nav li a.selected-page {
     border-left: 5px solid black;
     padding-left: 15px;
 }
--- a/templates/layout.tmpl	Sat Feb 07 01:33:30 2009 +0200
+++ b/templates/layout.tmpl	Sat Feb 07 02:12:32 2009 +0200
@@ -1,5 +1,18 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
+<%def name="render_menu(open_page, page, items, ancestry)">
+<ul>
+% for pi in items :
+    <li>
+        <a href="${site_page_url}/${pi.url}"${' class="selected-page"' if pi == open_page else ''}>${pi.title} ${'&raquo;' if pi.children and pi.parent else ''}</a>
+    % if pi in ancestry and pi.children and pi.parent :
+        ${render_menu(page, pi, pi.children, ancestry)}
+    % endif
+    </li>
+% endfor
+</ul>
+</%def>
+
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
     <head>
         <title>qmsk.net :: ${page.title}</title>
@@ -9,15 +22,10 @@
             <div id="header">
                 <a href="${site_page_url}/">QMSK.NET</a>
             </div>
- 
-            <ul id="nav">
-            % if menu.page.parent and menu.page.parent.parent :
-                <li><a href="${site_page_url}/${menu.page.parent.url}">&laquo;</a></li>
-            % endif
-            % for pi in menu.items :
-                <li><a href="${site_page_url}/${pi.url}"${' class="selected-page"' if pi.url == page.url else ''}>${pi.title} ${'&raquo;' if pi.children and pi.parent else ''}</a></li>
-            % endfor
-            </ul>
+            
+            <div id="nav">
+                ${render_menu(menu.page, menu.page, menu.items, menu.ancestry)}
+            </div>
 
             <div id="content">
                 ${page.content}