basic multi-level menu
authorTero Marttila <terom@fixme.fi>
Sat, 07 Feb 2009 02:12:32 +0200
changeset 154 4a77c68e62f7
parent 153 01f5ef2890c4
child 155 5e349c1067ec
basic multi-level menu
lib/menu.py
lib/page.py
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/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}