Skip to content

Commit 147d117

Browse files
committed
auto merge of #16169 : Gankro/rust/simple-docs, r=cmr
<strike>Adds a simple/detailed toggle to api doc pages. Detailed mode is the current behaviour, simple mode hides all doccomment details leaving only signatures for quick browsing. </strike> Adds [expand all] and [collapse all] "links" to all api doc pages. All doccomments are collapsed, leaving only signatures for quick browsing. In addition, clicking on a <strike>function name</strike> function's [toggle details] link now toggles the visibility of the associated doccomment. -------- # [Live Build Here](http://cg.scs.carleton.ca/~abeinges/doc/std/vec/struct.Vec.html) This is something that's been bothering me, and I've seen some people mention in IRC before. The docs are *great* if you want a full in-depth look at an API, but *awful* if you want to scan them. This provides the ability to toggle complexity freely. Interacts perfectly well with noscript, since the static page is effectively unchanged. Collapsing is just hiding divs with css. I'm not much of a designer, so design input welcome on the actual UX for toggling. The actual javascript is *a bit* brittle to layout changes, but it always will be without adding lots of extra junk to the actual markup, which didn't seem worth it.
2 parents 432042a + 88fe6df commit 147d117

File tree

3 files changed

+96
-3
lines changed

3 files changed

+96
-3
lines changed

src/librustdoc/html/render.rs

+6
Original file line numberDiff line numberDiff line change
@@ -1316,6 +1316,12 @@ impl<'a> fmt::Show for Item<'a> {
13161316
_ => {}
13171317
};
13181318

1319+
try!(write!(fmt,
1320+
r##"<span id='render-detail'>
1321+
<a id="collapse-all" href="#">[collapse all]</a>
1322+
<a id="expand-all" href="#">[expand all]</a>
1323+
</span>"##));
1324+
13191325
// Write `src` tag
13201326
//
13211327
// When this item is part of a `pub use` in a downstream crate, the

src/librustdoc/html/static/main.css

+39-3
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ h3.impl, h3.method, h4.method {
101101
h3.impl, h3.method {
102102
margin-top: 15px;
103103
}
104-
h1, h2, h3, h4, section.sidebar, a.source, .search-input, .content table a {
104+
h1, h2, h3, h4, section.sidebar, a.source, .search-input, .content table a, .collapse-toggle {
105105
font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
106106
}
107107

@@ -277,7 +277,10 @@ nav.sub {
277277
}
278278
.content .multi-column li { width: 100%; display: inline-block; }
279279

280-
.content .method { font-size: 1em; }
280+
.content .method {
281+
font-size: 1em;
282+
position: relative;
283+
}
281284
.content .methods .docblock { margin-left: 40px; }
282285

283286
.content .impl-methods .docblock { margin-left: 40px; }
@@ -405,7 +408,7 @@ h1 .stability {
405408
padding: 4px 10px;
406409
}
407410

408-
.impl-methods .stability {
411+
.impl-methods .stability, .methods .stability {
409412
margin-right: 20px;
410413
}
411414

@@ -477,3 +480,36 @@ pre.rust { position: relative; }
477480
margin: 0 auto;
478481
}
479482
}
483+
484+
.collapse-toggle {
485+
font-weight: 100;
486+
position: absolute;
487+
left: 13px;
488+
color: #999;
489+
margin-top: 2px;
490+
}
491+
492+
.toggle-wrapper > .collapse-toggle {
493+
left: -24px;
494+
margin-top: 0px;
495+
}
496+
497+
.toggle-wrapper {
498+
position: relative;
499+
}
500+
501+
.toggle-wrapper.collapsed {
502+
height: 1em;
503+
transition: height .2s;
504+
}
505+
506+
.collapse-toggle > .inner {
507+
display: inline-block;
508+
width: 1ch;
509+
text-align: center;
510+
}
511+
512+
.toggle-label {
513+
color: #999;
514+
font-style: italic;
515+
}

src/librustdoc/html/static/main.js

+51
Original file line numberDiff line numberDiff line change
@@ -730,4 +730,55 @@
730730
if (query['gotosrc']) {
731731
window.location = $('#src-' + query['gotosrc']).attr('href');
732732
}
733+
734+
$("#expand-all").on("click", function() {
735+
$(".docblock").show();
736+
$(".toggle-label").hide();
737+
$(".toggle-wrapper").removeClass("collapsed");
738+
$(".collapse-toggle").children(".inner").html("-");
739+
});
740+
741+
$("#collapse-all").on("click", function() {
742+
$(".docblock").hide();
743+
$(".toggle-label").show();
744+
$(".toggle-wrapper").addClass("collapsed");
745+
$(".collapse-toggle").children(".inner").html("+");
746+
});
747+
748+
$(document).on("click", ".collapse-toggle", function() {
749+
var toggle = $(this);
750+
var relatedDoc = toggle.parent().next();
751+
if (relatedDoc.is(".docblock")) {
752+
if (relatedDoc.is(":visible")) {
753+
relatedDoc.slideUp({duration:'fast', easing:'linear'});
754+
toggle.parent(".toggle-wrapper").addClass("collapsed");
755+
toggle.children(".inner").html("+");
756+
toggle.children(".toggle-label").fadeIn();
757+
} else {
758+
relatedDoc.slideDown({duration:'fast', easing:'linear'});
759+
toggle.parent(".toggle-wrapper").removeClass("collapsed");
760+
toggle.children(".inner").html("-");
761+
toggle.children(".toggle-label").hide();
762+
}
763+
}
764+
});
765+
766+
$(function() {
767+
var toggle = "<a href='javascript:void(0)'"
768+
+ "class='collapse-toggle'>[<span class='inner'>-</span>]</a>";
769+
770+
$(".method").each(function() {
771+
if ($(this).next().is(".docblock")) {
772+
$(this).children().first().after(toggle);
773+
}
774+
});
775+
776+
var mainToggle = $(toggle);
777+
mainToggle.append("<span class='toggle-label' style='display:none'>"
778+
+ "&nbsp;Expand&nbsp;description</span></a>")
779+
var wrapper = $("<div class='toggle-wrapper'>");
780+
wrapper.append(mainToggle);
781+
$("#main > .docblock").before(wrapper);
782+
});
783+
733784
}());

0 commit comments

Comments
 (0)