Render TOC as nested lists (#1857).

git-svn-id: svn+ssh://rubyforge.org/var/svn/redmine/trunk@4377 e93f8b46-1217-0410-a6f0-8f06a7374b81

app/helpers/application_helper.rb

@@ -682,7 +682,7 @@ module ApplicationHelper
   def parse_headings(text, project, obj, attr, only_path, options)
     headings = []
     text.gsub!(HEADING_RE) do
-      level, attrs, content = $1, $2, $3
+      level, attrs, content = $1.to_i, $2, $3
       item = strip_tags(content).strip
       anchor = item.gsub(%r{[^\w\s\-]}, '').gsub(%r{\s+(\-+\s*)?}, '-')
       headings << [level, anchor, item]
@@ -696,12 +696,24 @@ module ApplicationHelper
         div_class = 'toc'
         div_class << ' right' if $1 == '>'
         div_class << ' left' if $1 == '<'
-        out = "<ul class=\"#{div_class}\">"
+        out = "<ul class=\"#{div_class}\"><li>"
+        root = headings.map(&:first).min
+        current = root
+        started = false
         headings.each do |level, anchor, item|
-          out << "<li class=\"heading#{level}\"><a href=\"##{anchor}\">#{item}</a></li>\n"
+          if level > current
+            out << '<ul><li>' * (level - current)
+          elsif level < current
+            out << "</li></ul>\n" * (current - level) + "</li><li>"
+          elsif started
+            out << '</li><li>'
           end
-        out << '</ul>'
+          out << "<a href=\"##{anchor}\">#{item}</a>"
-        out
+          current = level
+          started = true
+        end
+        out << '</li></ul>' * (current - root)
+        out << '</li></ul>'
       end
     end
   end

public/stylesheets/application.css

@@ -715,9 +715,10 @@ div.wiki ul.toc {
 
 div.wiki ul.toc.right { float: right; margin-left: 12px; margin-right: 0; width: auto; }
 div.wiki ul.toc.left  { float: left; margin-right: 12px; margin-left: 0; width: auto; }
-div.wiki ul.toc li { list-style-type:none;}
+div.wiki ul.toc ul { margin: 0; padding: 0; }
-div.wiki ul.toc li.heading2 { margin-left: 6px; }
+div.wiki ul.toc li { list-style-type:none; margin: 0;}
-div.wiki ul.toc li.heading3 { margin-left: 12px; font-size: 0.8em; }
+div.wiki ul.toc li li { margin-left: 1.5em; }
+div.wiki ul.toc li li li { font-size: 0.8em; }
 
 div.wiki ul.toc a {
     font-size: 0.9em;

test/unit/helpers/application_helper_test.rb

@@ -423,25 +423,38 @@ h2. Subtitle with [[Wiki|another Wiki]] link
 
 h2. Subtitle with %{color:red}red text%
     
-h2. Subtitle with *some* _modifiers_
+h3. Subtitle with *some* _modifiers_
 
 h1. Another title
 
-h2. An "Internet link":http://www.redmine.org/ inside subtitle
+h3. An "Internet link":http://www.redmine.org/ inside subtitle
 
 h2. "Project Name !/attachments/1234/logo_small.gif! !/attachments/5678/logo_2.png!":/projects/projectname/issues
 
 RAW
 
     expected =  '<ul class="toc">' +
-               '<li class="heading1"><a href="#Title">Title</a></li>' +
+                  '<li><a href="#Title">Title</a>' +
-               '<li class="heading2"><a href="#Subtitle-with-a-Wiki-link">Subtitle with a Wiki link</a></li>' + 
+                    '<ul>' +
-               '<li class="heading2"><a href="#Subtitle-with-another-Wiki-link">Subtitle with another Wiki link</a></li>' + 
+                      '<li><a href="#Subtitle-with-a-Wiki-link">Subtitle with a Wiki link</a></li>' + 
-               '<li class="heading2"><a href="#Subtitle-with-red-text">Subtitle with red text</a></li>' +
+                      '<li><a href="#Subtitle-with-another-Wiki-link">Subtitle with another Wiki link</a></li>' + 
-               '<li class="heading2"><a href="#Subtitle-with-some-modifiers">Subtitle with some modifiers</a></li>' +
+                      '<li><a href="#Subtitle-with-red-text">Subtitle with red text</a>' +
-               '<li class="heading1"><a href="#Another-title">Another title</a></li>' +
+                        '<ul>' +
-               '<li class="heading2"><a href="#An-Internet-link-inside-subtitle">An Internet link inside subtitle</a></li>' +
+                          '<li><a href="#Subtitle-with-some-modifiers">Subtitle with some modifiers</a></li>' +
-               '<li class="heading2"><a href="#Project-Name">Project Name</a></li>' +
+                        '</ul>' +
+                      '</li>' +
+                    '</ul>' +
+                  '</li>' +
+                  '<li><a href="#Another-title">Another title</a>' +
+                    '<ul>' +
+                      '<li>' +
+                        '<ul>' +
+                          '<li><a href="#An-Internet-link-inside-subtitle">An Internet link inside subtitle</a></li>' +
+                        '</ul>' +
+                      '</li>' +
+                      '<li><a href="#Project-Name">Project Name</a></li>' +
+                    '</ul>' +
+                  '</li>' +
                '</ul>'
 
     @project = Project.find(1)
@@ -458,8 +471,8 @@ h1. Included
 RAW
 
     expected = '<ul class="toc">' +
-               '<li class="heading1"><a href="#Included">Included</a></li>' +
+               '<li><a href="#Included">Included</a></li>' +
-               '<li class="heading1"><a href="#Child-page-1">Child page 1</a></li>' + 
+               '<li><a href="#Child-page-1">Child page 1</a></li>' + 
                '</ul>'
 
     @project = Project.find(1)