1
0
mirror of https://github.com/golang/go synced 2024-11-21 13:04:39 -07:00

godoc: make 'Overview' section collapsable

This makes packages with lengthly package comments easier to browse.

R=golang-dev, r
CC=golang-dev
https://golang.org/cl/5901055
This commit is contained in:
Andrew Gerrand 2012-03-26 14:10:27 +11:00
parent ce06e15e2a
commit 0b762d9523
4 changed files with 40 additions and 29 deletions

View File

@ -164,21 +164,26 @@ function getElementsByClassName(base, clazz) {
return foundElements; return foundElements;
} }
function godocs_bindExampleToggle(eg) { function godocs_bindToggle(el) {
var heading = getElementsByClassName(eg, "exampleHeading"); var button = getElementsByClassName(el, "toggleButton");
var callback = function() { var callback = function() {
if (eg.className == "example") { if (el.className == "toggle") {
eg.className = "exampleVisible"; el.className = "toggleVisible";
} else { } else {
eg.className = "example"; el.className = "toggle";
} }
}; };
for (var i = 0; i < heading.length; i++) { for (var i = 0; i < button.length; i++) {
bindEvent(heading[i], "click", callback); bindEvent(button[i], "click", callback);
} }
} }
function godocs_bindExampleLink(l) { function godocs_bindToggles(className) {
var prefix = "example_"; var els = getElementsByClassName(document, className);
for (var i = 0; i < els.length; i++) {
godocs_bindToggle(els[i]);
}
}
function godocs_bindToggleLink(l, prefix) {
bindEvent(l, "click", function() { bindEvent(l, "click", function() {
var i = l.href.indexOf("#"+prefix); var i = l.href.indexOf("#"+prefix);
if (i < 0) { if (i < 0) {
@ -186,24 +191,23 @@ function godocs_bindExampleLink(l) {
} }
var id = prefix + l.href.slice(i+1+prefix.length); var id = prefix + l.href.slice(i+1+prefix.length);
var eg = document.getElementById(id); var eg = document.getElementById(id);
eg.className = "exampleVisible"; eg.className = "toggleVisible";
}); });
} }
function godocs_bindExamples() { function godocs_bindToggleLinks(className, prefix) {
var examples = getElementsByClassName(document, "example"); var links = getElementsByClassName(document, className);
for (var i = 0; i < examples.length; i++) {
godocs_bindExampleToggle(examples[i]);
}
var links = getElementsByClassName(document, "exampleLink");
for (i = 0; i < links.length; i++) { for (i = 0; i < links.length; i++) {
godocs_bindExampleLink(links[i]); godocs_bindToggleLink(links[i], prefix);
} }
} }
function godocs_onload() { function godocs_onload() {
godocs_bindSearchEvents(); godocs_bindSearchEvents();
godocs_generateTOC(); godocs_generateTOC();
godocs_bindExamples(); godocs_bindToggles("toggle");
godocs_bindToggles("toggleVisible");
godocs_bindToggleLinks("exampleLink", "example_");
godocs_bindToggleLinks("overviewLink", "");
} }
bindEvent(window, 'load', godocs_onload); bindEvent(window, 'load', godocs_onload);

View File

@ -364,11 +364,11 @@ div#blog .read {
text-align: right; text-align: right;
} }
.exampleHeading { cursor: pointer; } .toggleButton { cursor: pointer; }
.example .collapsed { display: block; } .toggle .collapsed { display: block; }
.example .expanded { display: none; } .toggle .expanded { display: none; }
.exampleVisible .collapsed { display: none; } .toggleVisible .collapsed { display: none; }
.exampleVisible .expanded { display: block; } .toggleVisible .expanded { display: block; }
table.codetable { margin-left: auto; margin-right: auto; border-style: none; } table.codetable { margin-left: auto; margin-right: auto; border-style: none; }
hr { border-style: none; border-top: 1px solid black; } hr { border-style: none; border-top: 1px solid black; }

View File

@ -1,9 +1,9 @@
<div id="example_{{.Name}}" class="example"> <div id="example_{{.Name}}" class="toggle">
<div class="collapsed"> <div class="collapsed">
<p class="exampleHeading"><span class="text">Example{{example_suffix .Name}}</span></p> <p class="exampleHeading toggleButton"><span class="text">Example{{example_suffix .Name}}</span></p>
</div> </div>
<div class="expanded"> <div class="expanded">
<p class="exampleHeading"><span class="text">Example{{example_suffix .Name}}</span></p> <p class="exampleHeading toggleButton"><span class="text">Example{{example_suffix .Name}}</span></p>
{{with .Doc}}<p>{{html .}}</p>{{end}} {{with .Doc}}<p>{{html .}}</p>{{end}}
<p>Code:</p> <p>Code:</p>
<pre class="code">{{.Code}}</pre> <pre class="code">{{.Code}}</pre>

View File

@ -10,7 +10,7 @@
<dd><code>import "{{html .ImportPath}}"</code></dd> <dd><code>import "{{html .ImportPath}}"</code></dd>
</dl> </dl>
<dl> <dl>
<dd><a href="#overview">Overview</a></dd> <dd><a href="#overview" class="overviewLink">Overview</a></dd>
<dd><a href="#index">Index</a></dd> <dd><a href="#index">Index</a></dd>
{{if $.Examples}} {{if $.Examples}}
<dd><a href="#examples">Examples</a></dd> <dd><a href="#examples">Examples</a></dd>
@ -20,9 +20,16 @@
{{end}} {{end}}
</dl> </dl>
</div> </div>
<h2 id="overview">Overview</h2>
<!-- The package's Name is printed as title by the top-level template --> <!-- The package's Name is printed as title by the top-level template -->
{{comment_html .Doc}} <div id="overview" class="toggleVisible">
<div class="collapsed">
<h2 class="toggleButton" title="Click to show Overview section">Overview ▹</h2>
</div>
<div class="expanded">
<h2 class="toggleButton" title="Click to hide Overview section">Overview ▾</h2>
{{comment_html .Doc}}
</div>
</div>
{{example_html "" $.Examples $.FSet}} {{example_html "" $.Examples $.FSet}}
<h2 id="index">Index</h2> <h2 id="index">Index</h2>