Wiki: indice

app/views/stylesheets/wiki.css.erb

@@ -865,5 +865,30 @@ ul.nested li {
   padding-bottom: 4px !important;
 }
 
+#contents {
+  margin-top: 18px;
+  padding: 0px 27px 9px 0px;
+  border: 1px solid #ccc;
+  width: 300px;
+}
+
+
+#contents h1 {
+  font-size: 12px;
+  margin: 0px;
+  text-align: center;
+  font-weight: bold;
+}
+
+#contents li {
+  list-style: none;
+}
+
+#contents ol {
+  margin: 0px;
+  padding: 0px 0px 0px 18px;
+}
+
+
 /*body { background-image: url(<%= App.base_path %>/prototype/line.png); background-repeat: repeat; }
 html * { background-color: transparent !important; }*/

app/views/wiki/show.html.haml

@@ -1,7 +1,6 @@
 -# cache(course_wiki_path(@course.id, @wiki_page.id)) do
 
 = javascript_include_tag 'wiki'
-
 .cmd
   = action_icon 'edit', 'Editar', edit_course_wiki_instance_url
   = action_icon 'undo', 'Historico', versions_course_wiki_instance_url
@@ -9,5 +8,11 @@
 
 %h4.title= h(@course.full_name)
 %h1.title= h(@wiki_page.title)
+#contents{:style => "display: none"}
+  %h1 Índice
 #wiki_text
   = @wiki_page.content.format_wiki
+
+%script
+  = "enumerate_headers();"
+

public/javascripts/wiki.js

@@ -26,6 +26,7 @@ events['#show_markup_help:click'] = function(element, e)
 
 function enumerate_headers()
 {
+	contents = "";
 	elems = $('wiki_text').childElements();
 
 	count = 0;
@@ -50,31 +51,70 @@ function enumerate_headers()
 		if(ignore-- > 0) return;
 
 	    text = item.innerHTML;
+
 	    if(item.match('h1')) {
-	        text = (++c1) + ". " + text;    
+			if(c5 != 0) contents += "</ol>";
+			if(c4 != 0) contents += "</ol>";
+			if(c3 != 0) contents += "</ol>";
+			if(c2 != 0) contents += "</ol>";
+			if(c1 == 0) contents += "<ol>";
+
+	        n = (++c1);
 	        c2 = c3 = c4 = c5 = 0;
+
+			contents += "<li><a href='#" + n + "'>" + n + ". " + text + "</a></li>";
+			text += "<a name='" + n + "'></a>";
 	    }
 
 	    if(item.match('h2')) {
-	        text = c1 + "." + (++c2) + " " + text;    
+			if(c5 != 0) contents += "</ol>";
+			if(c4 != 0) contents += "</ol>";
+			if(c3 != 0) contents += "</ol>";
+			if(c2 == 0) contents += "<ol>";
+
+	        n = c1 + "." + (++c2);
 	        c3 = c4 = c5 = 0;
+
+			contents += "<li><a href='#" + n + "'>" + n + ". " + text + "</a></li>";
+			text += "<a name='" + n + "'></a>";
 	    }
 
 	    if(item.match('h3')) {
-	        text = c1 + "." + c2 + "." + (++c3) + " " + text;
+			if(c5 != 0) contents += "</ol>";
+			if(c4 != 0) contents += "</ol>";
+			if(c3 == 0) contents += "<ol>";
+
+	        n = c1 + "." + c2 + "." + (++c3);
 	        c4 = c5 = 0;
+
+			contents += "<li><a href='#" + n + "'>" + n + ". " + text + "</a></li>";
+			text += "<a name='" + n + "'></a>";
 	    }
 
 	    if(item.match('h4')) {
-	        text = c1 + "." + c2 + "." + c3 + "." + (++c4) + " " + text;
+			if(c5 != 0) contents += "</ol>";
+			if(c4 == 0) contents += "<ol>";
+
+	        n = c1 + "." + c2 + "." + c3 + "." + (++c4);
 	        c5 = 0;
+
+			contents += "<li><a href='#" + n + "'>" + n + ". " + text + "</a></li>";
+			text += "<a name='" + n + "'></a>";
 	    }
 
 	    if(item.match('h5')) {
-	        text = c2 + "." + c3 + "." + c5 + "." + (++c5) + " " + text;
+			if(c5 != 0) contents += "</ol>";
+
+	        n = c2 + "." + c3 + "." + c5 + "." + (++c5);
+
+			contents += "<li><a href='#" + n + "'>" + n + ". " + text + "</a></li>";
+			text += "<a name='" + n + "'></a>";
 	    }
 	    
 	    item.innerHTML = text;
 	});
+
+	$('contents').toggle();
+	$('contents').innerHTML += contents;
 }